Implementation:Apache Druid ParseTimeTable

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Ingestion
Last Updated	2026-02-10 10:00 GMT

Overview

A React table component that displays sample data columns with interactive timestamp column selection during the Load Data wizard's timestamp configuration step.

Description

The ParseTimeTable component renders a paginated ReactTable showing sampled data where non-timestamp columns are clickable to designate them as the primary time column. It automatically detects possible Druid timestamp formats for each column's values and displays the detected format in column headers. The dedicated __time column is always shown with its current timestamp detail and is not clickable. The module also exports a helper function parseTimeTableSelectedColumnName that resolves the currently selected timestamp column from a TimestampSpec.

Usage

Used in the timestamp configuration step of the Load Data wizard to let users visually identify which column contains time data and select it as the primary timestamp column, with automatic format detection to streamline configuration.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
• Lines: 1-146

Signature

export function parseTimeTableSelectedColumnName(
  sampleResponse: SampleResponse,
  timestampSpec: TimestampSpec | undefined,
): string | undefined;

export interface ParseTimeTableProps {
  sampleBundle: {
    sampleResponse: SampleResponse;
    spec: Partial<IngestionSpec>;
  };
  columnFilter: string;
  possibleTimestampColumnsOnly: boolean;
  selectedColumnName: string | undefined;
  onTimestampColumnSelect: (newTimestampSpec: TimestampSpec) => void;
}

export const ParseTimeTable = React.memo(function ParseTimeTable(props: ParseTimeTableProps));

Import

import { ParseTimeTable, parseTimeTableSelectedColumnName } from './parse-time-table/parse-time-table';

I/O Contract

Inputs

Name	Type	Required	Description
sampleBundle	{ sampleResponse: SampleResponse; spec: Partial<IngestionSpec> }	Yes	Bundle containing both the sample data and the current ingestion spec for extracting timestamp configuration
columnFilter	string	Yes	Text filter to narrow displayed columns (case-insensitive matching)
possibleTimestampColumnsOnly	boolean	Yes	When true, only columns with detectable timestamp formats are shown (plus the __time column)
selectedColumnName	undefined	Yes	Name of the currently selected/highlighted timestamp column
onTimestampColumnSelect	(newTimestampSpec: TimestampSpec) => void	Yes	Callback invoked when a column is clicked, providing a new TimestampSpec with the column name and auto-detected format

Outputs

Name	Type	Description
Rendered table	JSX.Element	A paginated ReactTable with clickable column headers for timestamp column selection and format auto-detection

Usage Examples

Rendering the timestamp table

<ParseTimeTable
  sampleBundle={{ sampleResponse, spec: currentSpec }}
  columnFilter={searchText}
  possibleTimestampColumnsOnly={showTimestampCandidatesOnly}
  selectedColumnName={selectedTimestampColumn}
  onTimestampColumnSelect={newTimestampSpec => updateTimestampSpec(newTimestampSpec)}
/>

Resolving selected timestamp column

const selectedColumn = parseTimeTableSelectedColumnName(
  sampleResponse,
  currentSpec.dataSchema?.timestampSpec,
);

Related Pages

• Environment:Apache_Druid_Web_Console_Development