Implementation:Apache Druid CellFilterMenu

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

Overview

CellFilterMenu is a React context menu component that provides SQL-based filtering actions when a user right-clicks on a cell value in a query result table.

Description

The component generates a Blueprint Menu containing filter options derived from the clicked cell's column metadata and value. It supports equality, inequality, greater-than, and less-than filter clauses, and can append new filter values to existing WHERE or HAVING clauses via IN/NOT IN expressions. When no active query is present, it falls back to clipboard-copy operations for the cell value and its SQL filter expressions.

Usage

Used within query result tables in the Druid web console workbench to allow users to interactively add SQL WHERE and HAVING filter clauses by clicking on cell values.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/cell-filter-menu/cell-filter-menu.tsx
• Lines: 1-191

Signature

export interface CellFilterMenuProps {
  column: Column;
  value: unknown;
  headerIndex: number;
  runeMode?: boolean;
  query: SqlQuery | undefined;
  onQueryAction?(action: QueryAction): void;
  onShowFullValue?(valueString: string): void;
}

export function CellFilterMenu(props: CellFilterMenuProps): JSX.Element;

Import

import { CellFilterMenu } from './components/cell-filter-menu/cell-filter-menu';

I/O Contract

Inputs

Name	Type	Required	Description
column	Column	Yes	The column metadata (name, sqlType, nativeType) for the clicked cell
value	unknown	Yes	The raw value of the clicked cell
headerIndex	number	Yes	The zero-based index of the column in the SELECT expression list
runeMode	boolean	No	When true, suppresses SQL clipboard items (for native query mode)
query	SqlQuery or undefined	Yes	The current active SQL query; undefined triggers clipboard-only mode
onQueryAction	(action: QueryAction) => void	No	Callback to apply a filter transformation to the current query
onShowFullValue	(valueString: string) => void	No	Callback to display the full cell value in a modal

Outputs

Name	Type	Description
JSX.Element	Menu	A Blueprint Menu element containing contextual filter and clipboard menu items

Usage Examples

Basic cell filter menu in a query result table

<CellFilterMenu
  column={column}
  value={cellValue}
  headerIndex={columnIndex}
  query={currentQuery}
  onQueryAction={action => setQuery(action(query))}
  onShowFullValue={val => showFullValueDialog(val)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development