Implementation:Apache Druid SchemaColumnList

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

Overview

A React component that renders an organized list of dimension and metric columns from a SQL query result in the SQL Data Loader's schema step.

Description

The ColumnList component displays columns extracted from a QueryResult object, splitting them into dimensions and metrics sections based on whether the SQL query contains a GROUP BY clause. Dimensions are derived from grouped select expressions (or all select expressions if there is no GROUP BY), while metrics come from aggregate select expressions. Each column is rendered as an ExpressionEntry sub-component that is clickable for editing. The component includes informational popovers explaining the difference between dimensions and metrics with links to the Druid schema design documentation. An optional columnFilter function allows filtering which columns are displayed.

Usage

Used in the schema step of the SQL Data Loader view as a sidebar column list that shows users all the dimensions and metrics defined by their SQL ingestion query, allowing them to click on individual columns to edit their expressions.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx
• Lines: 1-155

Signature

export interface ColumnListProps {
  queryResult: QueryResult;
  columnFilter?(columnName: string): boolean;
  selectedColumnIndex: number;
  onEditColumn(columnIndex: number): void;
}

export const ColumnList = function ColumnList(props: ColumnListProps);

Import

import { ColumnList } from './column-list/column-list';

I/O Contract

Inputs

Name	Type	Required	Description
queryResult	QueryResult	Yes	The SQL query result containing header metadata and the parsed SQL query for extracting dimension/metric expressions
columnFilter	(columnName: string) => boolean	No	Optional filter function to control which columns are displayed in the list
selectedColumnIndex	number	Yes	Index of the currently selected column in the query result header (used for highlight state)
onEditColumn	(columnIndex: number) => void	Yes	Callback invoked when a column entry is clicked, providing the header index of the column to edit

Outputs

Name	Type	Description
Rendered column list	JSX.Element	A structured list divided into Dimensions and Metrics sections (or a single Columns section for non-grouped queries), with clickable ExpressionEntry items and info popovers

Usage Examples

Rendering the column list with selection

<ColumnList
  queryResult={queryResult}
  selectedColumnIndex={selectedIndex}
  onEditColumn={index => openExpressionEditor(index)}
/>

Rendering with a column filter

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

Related Pages

• Environment:Apache_Druid_Web_Console_Development