Implementation:Apache Druid ReactTableInputs

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

Overview

ReactTableInputs provides a set of filter input components for react-table column headers, supporting text search with multiple filter modes, suggestible multi-select, and boolean filtering.

Description

The module exports three components: GenericFilterInput renders a debounced text input with a mode selector popover supporting contains, exact match, regex, and comparison operators; suggestibleFilterInput is a higher-order function that wraps GenericFilterInput with a popover of predefined suggestion values for multi-select toggling; and BooleanFilterInput renders a simple HTML select dropdown with true/false/show-all options. All components use the TableFilter utility for encoding and decoding filter mode/needle pairs in the react-table filter value string.

Usage

Used as the filterInput component for react-table column definitions throughout the Druid web console, providing consistent filtering behavior across datasources, segments, tasks, supervisors, and other tabular views.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/react-table/react-table-inputs.tsx
• Lines: 1-178

Signature

export function GenericFilterInput(props: FilterRendererProps): JSX.Element;

export function suggestibleFilterInput(
  suggestions: string[],
): (props: FilterRendererProps) => JSX.Element;

export function BooleanFilterInput(props: FilterRendererProps): JSX.Element;

Import

import { GenericFilterInput, suggestibleFilterInput, BooleanFilterInput } from './react-table/react-table-inputs';

I/O Contract

Inputs

Name	Type	Required	Description
column	Column	Yes	The react-table Column object providing header metadata
filter	any	Yes	The current filter value string (encoded mode and needle)
onChange	ReactTableFunction	Yes	Callback to update the filter value
key	string	No	React key for the filter input element

Outputs

Name	Type	Description
JSX.Element	InputGroup or HTMLSelect	A filter input component rendered in the react-table column header

Usage Examples

Using GenericFilterInput in a column definition

const columns = [
  {
    Header: 'Datasource',
    accessor: 'datasource',
    Filter: GenericFilterInput,
  },
  {
    Header: 'Type',
    accessor: 'type',
    Filter: suggestibleFilterInput(['index_parallel', 'index_realtime', 'compact']),
  },
  {
    Header: 'Active',
    accessor: 'active',
    Filter: BooleanFilterInput,
  },
];

Related Pages

• Environment:Apache_Druid_Web_Console_Development