Implementation:Apache Druid SchemaPreviewTable

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

Overview

A React table component that renders a rich preview of SQL query results with interactive cell filtering and column editing in the SQL Data Loader's schema step.

Description

The PreviewTable component renders a ReactTable displaying the results of a SQL ingestion query with full interactivity. Column headers show the column name, type icon, filter indicator, and the underlying SQL formula expression. Columns are visually classified as timestamp, dimension, or metric with appropriate CSS styling including multi-value column detection via ARRAY_TO_MV wrapping. Each cell value is rendered inside a Popover that provides a CellFilterMenu for adding WHERE/HAVING filters directly from cell values. Numeric columns use BracedText for aligned decimal formatting. The component supports column selection highlighting, a column filter function, and a ShowValueDialog for inspecting long cell values.

Usage

Used in the schema step of the SQL Data Loader view as the main data preview area, allowing users to see the results of their SQL ingestion query, click column headers to edit expressions, and right-click or popover-click cell values to add data filters.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
• Lines: 1-181

Signature

export interface PreviewTableProps {
  queryResult: QueryResult;
  onQueryAction(action: QueryAction): void;
  columnFilter?(columnName: string): boolean;
  selectedColumnIndex: number;
  onEditColumn(index: number): void;
}

export const PreviewTable = React.memo(function PreviewTable(props: PreviewTableProps));

Import

import { PreviewTable } from './preview-table/preview-table';

I/O Contract

Inputs

Name	Type	Required	Description
queryResult	QueryResult	Yes	The SQL query result containing rows, header metadata, and the parsed SQL query for formula display and column classification
onQueryAction	(action: QueryAction) => void	Yes	Callback invoked when a cell filter menu action is performed (e.g., adding a WHERE or HAVING clause)
columnFilter	(columnName: string) => boolean	No	Optional filter function to control which columns are displayed in the table
selectedColumnIndex	number	Yes	Index of the currently selected column (used for highlight state)
onEditColumn	(index: number) => void	Yes	Callback invoked when a column header is clicked, providing the select index of the column to edit

Outputs

Name	Type	Description
Rendered table	null	A ReactTable with interactive column headers (type icons, formula display, filter indicators), cell-level filter popovers, numeric alignment via BracedText, and a ShowValueDialog for long values; returns null if no parsed SQL query is available

Usage Examples

Rendering the preview table

<PreviewTable
  queryResult={queryResult}
  onQueryAction={action => dispatchQueryAction(action)}
  selectedColumnIndex={selectedIndex}
  onEditColumn={index => openExpressionEditor(index)}
/>

Rendering with a column filter

<PreviewTable
  queryResult={queryResult}
  onQueryAction={action => dispatchQueryAction(action)}
  columnFilter={name => name.toLowerCase().includes(searchText.toLowerCase())}
  selectedColumnIndex={selectedIndex}
  onEditColumn={index => openExpressionEditor(index)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development