Implementation:Apache Druid ParseDataTable

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

Overview

A React table component that previews parsed sample data during the parser configuration step of the Load Data wizard.

Description

The ParseDataTable component renders a paginated ReactTable displaying the parsed output of sampled data rows. It supports JSON flattening by highlighting flattened columns and showing their flatten expressions (type and path) in column headers. Clicking on a flattened column header invokes a callback to edit that flatten field. The table includes an expandable SubComponent that shows the original raw input row and any parsing errors, giving users visibility into how their data was transformed during parsing.

Usage

Used in the parser step of the Load Data wizard to give users a visual preview of how their raw data is being parsed into columns, allowing them to verify column extraction, inspect flatten field configurations, and identify parsing errors.

Code Reference

Source Location

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

Signature

export interface ParseDataTableProps {
  sampleResponse: SampleResponse;
  columnFilter: string;
  canFlatten: boolean;
  flattenedColumnsOnly: boolean;
  flattenFields: FlattenField[];
  onFlattenFieldSelect?: (field: FlattenField, index: number) => void;
}

export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDataTableProps));

Import

import { ParseDataTable } from './parse-data-table/parse-data-table';

I/O Contract

Inputs

Name	Type	Required	Description
sampleResponse	SampleResponse	Yes	The sampled and parsed data response containing rows with parsed values and optional errors
columnFilter	string	Yes	Text filter to narrow displayed columns (case-insensitive matching)
canFlatten	boolean	Yes	Whether the data format supports JSON flattening (controls SubComponent display)
flattenedColumnsOnly	boolean	Yes	When true, only columns with corresponding flatten fields are shown
flattenFields	FlattenField[]	Yes	Array of configured flatten field definitions for JSON flattening
onFlattenFieldSelect	(field: FlattenField, index: number) => void	No	Callback invoked when a flattened column header is clicked for editing

Outputs

Name	Type	Description
Rendered table	JSX.Element	A paginated ReactTable with parsed data preview, expandable row details, and clickable flatten field headers

Usage Examples

Rendering the parse data table

<ParseDataTable
  sampleResponse={sampleResponse}
  columnFilter={searchText}
  canFlatten={inputFormat === 'json'}
  flattenedColumnsOnly={showFlattenedOnly}
  flattenFields={flattenSpec.fields || []}
  onFlattenFieldSelect={(field, index) => editFlattenField(field, index)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development