Implementation:Apache Druid FilterTable

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

Overview

A React table component that displays sample data columns with interactive filter configuration during the Load Data wizard's filter step.

Description

The FilterTable component renders a paginated ReactTable showing sampled data where each column header is clickable to configure Druid ingestion filters. Columns that already have filters applied are visually highlighted with a "filtered" class and display a "(filtered)" indicator. The component also exports a helper function filterTableSelectedColumnName that resolves which column is currently selected based on the active filter's dimension name.

Usage

Used in the filter configuration step of the Load Data wizard to let users visually inspect sample data and interactively apply per-row dimension filters (selector or interval types) by clicking on column headers.

Code Reference

Source Location

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

Signature

export function filterTableSelectedColumnName(
  sampleResponse: SampleResponse,
  selectedFilter: Partial<DruidFilter> | undefined,
): string | undefined;

export interface FilterTableProps {
  sampleResponse: SampleResponse;
  columnFilter: string;
  dimensionFilters: DruidFilter[];
  selectedFilterName: string | undefined;
  onFilterSelect: (filter: DruidFilter, index: number) => void;
}

export const FilterTable = React.memo(function FilterTable(props: FilterTableProps));

Import

import { FilterTable, filterTableSelectedColumnName } from './filter-table/filter-table';

I/O Contract

Inputs

Name	Type	Required	Description
sampleResponse	SampleResponse	Yes	The sampled data response containing rows and header information
columnFilter	string	Yes	Text filter to narrow down which columns are displayed (case-insensitive)
dimensionFilters	DruidFilter[]	Yes	Array of currently configured Druid filters for dimensions
selectedFilterName	undefined	Yes	Name of the currently selected/highlighted column filter
onFilterSelect	(filter: DruidFilter, index: number) => void	Yes	Callback invoked when a column header is clicked, providing the filter and its index (-1 for new filters)

Outputs

Name	Type	Description
Rendered table	JSX.Element	A paginated ReactTable with clickable column headers for filter configuration

Usage Examples

Rendering the filter table

<FilterTable
  sampleResponse={sampleResponse}
  columnFilter={searchText}
  dimensionFilters={spec.dataSchema.transformSpec.filter ? [spec.dataSchema.transformSpec.filter] : []}
  selectedFilterName={selectedColumnName}
  onFilterSelect={(filter, index) => handleFilterSelect(filter, index)}
/>

Resolving selected column name

const selectedColumn = filterTableSelectedColumnName(sampleResponse, currentFilter);
// Returns the dimension name if it exists in the sample headers, otherwise undefined

Related Pages

• Environment:Apache_Druid_Web_Console_Development