Implementation:Apache Druid GenericOutputTable

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

Overview

GenericOutputTable is a React component that renders a paginated, interactive table for displaying SQL query results in the explore view.

Description

The component wraps ReactTable to present QueryResult data with column-level and cell-level context menus for filtering (WHERE/HAVING), ordering, and clipboard operations. It supports column grouping via columnHints, type icons, numeric formatting with braced alignment, and automatic pagination with configurable initial page sizes. When the inline result set is truncated by the outer SQL LIMIT, it displays a "dead end" page with an export option.

Usage

GenericOutputTable is used by visualization modules such as GroupingTableModule to render tabular query results. It is instantiated whenever a module needs to display structured rows and columns with interactive SQL filtering and sorting capabilities.

Code Reference

Source Location

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

Signature

export function calculateInitPageSize(height: number): number;

export interface GenericOutputTableProps {
  queryResult: QueryResult;
  timezone: Timezone;
  onWhereChange?(where: SqlExpression): void;
  onHavingChange?(having: SqlExpression): void;
  onOrderByChange?(columnName: string, desc: boolean): void;
  onExport?(): void;
  showTypeIcons: boolean;
  initPageSize?: number;
  columnHints?: Map<string, ColumnHint>;
}

export const GenericOutputTable = React.memo(
  function GenericOutputTable(props: GenericOutputTableProps): JSX.Element
);

Import

import { GenericOutputTable, calculateInitPageSize } from './views/explore-view/components/generic-output-table/generic-output-table';

I/O Contract

Inputs

Name	Type	Required	Description
queryResult	QueryResult	Yes	The SQL query result containing header and row data to display
timezone	Timezone	Yes	Timezone used for formatting timestamp values in cells
onWhereChange	(where: SqlExpression) => void	No	Callback invoked when a WHERE filter is added or removed via the cell/header menu
onHavingChange	(having: SqlExpression) => void	No	Callback invoked when a HAVING filter is added or removed
onOrderByChange	(columnName: string, desc: boolean) => void	No	Callback invoked when a column ordering is changed via the header menu
onExport	() => void	No	Callback invoked when the user clicks the export button on the dead-end page
showTypeIcons	boolean	Yes	Whether to display data type icons in column headers
initPageSize	number	No	Initial number of rows per page (defaults to 20)
columnHints	Map<string, ColumnHint>	No	Hints for column display names, grouping, formatting, and hidden status

Outputs

Name	Type	Description
Rendered table	JSX.Element	A paginated ReactTable with interactive column headers and cell context menus

Usage Examples

Rendering query results in a module

<GenericOutputTable
  queryResult={resultData.result}
  timezone={timezone}
  columnHints={resultData.columnHints}
  showTypeIcons={false}
  onOrderByChange={(columnName, desc) => {
    setParameterValues({
      orderByColumn: columnName,
      orderByDirection: desc ? 'DESC' : 'ASC',
    });
  }}
  onWhereChange={setWhere}
  initPageSize={calculateInitPageSize(stage.height)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development