Implementation:Apache Druid SchemaTable

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

Overview

A React table component that displays the schema configuration for dimensions and metrics during the Load Data wizard's schema step.

Description

The SchemaTable component renders a paginated ReactTable showing sampled data columns categorized as either dimensions, metrics, or the timestamp column. Each column header displays the column's type information and is clickable to open an editor for that dimension or metric specification. Columns are visually distinguished with CSS classes indicating their role (timestamp, dimension, metric) and data type (string, long, float, etc.). The component supports both auto-detected dimensions and explicitly defined dimension specs, handling selection state for dimensions, metrics, and auto-dimensions independently.

Usage

Used in the schema configuration step of the Load Data wizard to let users review and modify the column types, dimension specifications, and metric specifications that will be applied during ingestion.

Code Reference

Source Location

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

Signature

export interface SchemaTableProps {
  sampleBundle: {
    sampleResponse: SampleResponse;
    dimensions: (string | DimensionSpec)[] | undefined;
    metricsSpec: MetricSpec[] | undefined;
    definedDimensions: boolean;
  };
  columnFilter: string;
  selectedAutoDimension: string | undefined;
  selectedDimensionSpecIndex: number;
  selectedMetricSpecIndex: number;
  onAutoDimensionSelect: (dimensionName: string) => void;
  onDimensionSelect: (dimensionSpec: DimensionSpec, index: number) => void;
  onMetricSelect: (metricSpec: MetricSpec, index: number) => void;
}

export const SchemaTable = React.memo(function SchemaTable(props: SchemaTableProps));

Import

import { SchemaTable } from './schema-table/schema-table';

I/O Contract

Inputs

Name	Type	Required	Description
sampleBundle	{ sampleResponse, dimensions, metricsSpec, definedDimensions }	Yes	Bundle containing sample data, dimension definitions, metric specs, and whether dimensions are explicitly defined
columnFilter	string	Yes	Text filter to narrow displayed columns (case-insensitive matching)
selectedAutoDimension	undefined	Yes	Name of the currently selected auto-detected dimension
selectedDimensionSpecIndex	number	Yes	Index of the currently selected explicit dimension spec (-1 for none)
selectedMetricSpecIndex	number	Yes	Index of the currently selected metric spec (-1 for none)
onAutoDimensionSelect	(dimensionName: string) => void	Yes	Callback when an auto-detected dimension column header is clicked
onDimensionSelect	(dimensionSpec: DimensionSpec, index: number) => void	Yes	Callback when an explicitly defined dimension column header is clicked
onMetricSelect	(metricSpec: MetricSpec, index: number) => void	Yes	Callback when a metric column header is clicked

Outputs

Name	Type	Description
Rendered table	JSX.Element	A paginated ReactTable with color-coded dimension/metric/timestamp columns and clickable headers for schema editing

Usage Examples

Rendering the schema table

<SchemaTable
  sampleBundle={{
    sampleResponse,
    dimensions: dimensionsSpec.dimensions,
    metricsSpec: metricsSpec,
    definedDimensions: schemaMode === 'fixed',
  }}
  columnFilter={searchText}
  selectedAutoDimension={selectedAutoDim}
  selectedDimensionSpecIndex={selectedDimIndex}
  selectedMetricSpecIndex={selectedMetricIndex}
  onAutoDimensionSelect={name => setSelectedAutoDim(name)}
  onDimensionSelect={(spec, i) => editDimension(spec, i)}
  onMetricSelect={(spec, i) => editMetric(spec, i)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development