Implementation:Apache Druid HelperTable

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

Overview

HelperTable is a memoized React component that displays a compact, interactive table of column values with counts, enabling quick value-based filtering within the Explore view.

Description

The component queries the data source for distinct values of a given expression along with their counts, displaying them in a scrollable list. Each row shows the value, its count, and a checked/unchecked icon reflecting the current filter state. Users can click a row to filter to that single value, Shift-click to toggle values additively, and click the check icon to toggle inclusion/exclusion. The component integrates with the existing filter patterns by reading and updating ValuesFilterPattern entries within the WHERE clause. A searchable mode can be toggled via a search button in the header.

Usage

Used as a side helper panel in the Explore view to provide quick drill-down filtering. Multiple HelperTable instances can appear simultaneously for different columns, each independently querying and filtering.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/helper-table/helper-table.tsx
• Lines: 1-191

Signature

export interface HelperTableProps {
  querySource: QuerySource;
  where: SqlExpression;
  setWhere(where: SqlExpression): void;
  expression: ExpressionMeta;
  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): Promise<QueryResult>;
  onDelete(): void;
}

export const HelperTable = React.memo(
  function HelperTable(props: HelperTableProps): JSX.Element
);

Import

import { HelperTable } from './views/explore-view/components/helper-table/helper-table';

I/O Contract

Inputs

Name	Type	Required	Description
querySource	QuerySource	Yes	The current query source providing the base query for value retrieval
where	SqlExpression	Yes	The current WHERE clause expression used for filtering
setWhere	(where: SqlExpression) => void	Yes	Callback to update the WHERE clause when the user selects or deselects values
expression	ExpressionMeta	Yes	The expression (column) whose values are displayed in this helper table
runSqlQuery	(query: string or SqlQuery, signal?: AbortSignal) => Promise<QueryResult>	Yes	Function to execute SQL queries for fetching values and counts
onDelete	() => void	Yes	Callback invoked when the user removes this helper table

Outputs

Name	Type	Description
JSX.Element	ReactElement	A compact value-count table with interactive filtering, search, and delete controls

Usage Examples

Helper Table for a Column

<HelperTable
  querySource={querySource}
  where={currentWhere}
  setWhere={setWhere}
  expression={ExpressionMeta.fromColumn(cityColumn)}
  runSqlQuery={runSqlQuery}
  onDelete={() => removeHelperTable('city')}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development