Implementation:Apache Druid ColumnPickerMenu

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

Overview

ColumnPickerMenu is a React component that renders a searchable dropdown menu for selecting columns from a data source.

Description

The component presents a filterable list of columns using BlueprintJS Menu and MenuItem components. Each column entry displays an icon based on its type and supports a right-click context menu for copying the column name as plain text or as a SQL column reference. An optional "None" item can be shown when the onSelectNone callback is provided.

Usage

Used within the Explore view's control pane and other UI surfaces where the user needs to pick a column from the available set of columns in a query source. Typically rendered inside a Popover as a column selection dropdown.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/column-picker-menu/column-picker-menu.tsx
• Lines: 1-102

Signature

export interface ColumnPickerMenuProps {
  className?: string;
  columns: readonly Column[];
  onSelectColumn(column: Column): void;
  rightIconForColumn?: (column: Column) => IconName | undefined;
  onSelectNone?: () => void;
  shouldDismissPopover?: boolean;
}

export const ColumnPickerMenu = function ColumnPickerMenu(props: ColumnPickerMenuProps): JSX.Element;

Import

import { ColumnPickerMenu } from './views/explore-view/components/column-picker-menu/column-picker-menu';

I/O Contract

Inputs

Name	Type	Required	Description
className	string	No	Optional CSS class name applied to the root container
columns	readonly Column[]	Yes	Array of Column objects available for selection
onSelectColumn	(column: Column) => void	Yes	Callback invoked when a column is selected
rightIconForColumn	(column: Column) => IconName or undefined	No	Function returning an optional right icon for each column item
onSelectNone	() => void	No	Callback invoked when the "None" option is selected; shows the None item when provided
shouldDismissPopover	boolean	No	Whether selecting a menu item should dismiss the parent Popover

Outputs

Name	Type	Description
JSX.Element	ReactElement	A searchable menu of columns with context menu support for copy actions

Usage Examples

Basic Column Picker

<ColumnPickerMenu
  columns={querySource.columns}
  onSelectColumn={(column) => handleColumnSelect(column)}
  shouldDismissPopover
/>

Column Picker with None Option and Right Icons

<ColumnPickerMenu
  columns={querySource.columns}
  onSelectColumn={(column) => setSelectedColumn(column)}
  onSelectNone={() => setSelectedColumn(undefined)}
  rightIconForColumn={(col) => col.name === activeColumn ? IconNames.TICK : undefined}
  shouldDismissPopover
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development