Implementation:Apache Druid ResultTablePane

Knowledge Sources	Apache Druid
Domains	SQL_Querying, Data_Visualization
Last Updated	2026-02-10 00:00 GMT

Overview

Concrete React component for rendering interactive query result tables with column filtering, cell actions, and pagination.

Description

The ResultTablePane component (746 lines) renders query results using ReactTable with extensive interactive features:

• Column headers with type indicators (VARCHAR, BIGINT, TIMESTAMP, etc.)
• Cell context menus: copy value, filter by value, exclude value, aggregate column
• Column filtering and sorting
• Pagination for large result sets
• Timeline visualization for time-column data
• Download functionality (CSV, TSV, JSON, SQL INSERT)

For MSQ queries, it also integrates with ExecutionStagesPane (962 lines) which renders the stage execution DAG with timing bars and worker utilization.

Usage

Render this component in the Workbench result area after query execution. Pass the QueryResult from native queries or the Execution object from MSQ queries.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
• Lines: L1-L746
• Related: web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx (L1-L962)

Signature

interface ResultTablePaneProps {
  queryResult: QueryResult;
  onExport(format: string): void;
  onQueryAction(action: QueryAction): void;
  runeMode: boolean;
}

export const ResultTablePane = React.memo(function ResultTablePane(
  props: ResultTablePaneProps,
): JSX.Element {
  // 746-line component with ReactTable, cell menus, and column filtering
});

Import

import { ResultTablePane } from './result-table-pane/result-table-pane';

I/O Contract

Inputs

Name	Type	Required	Description
queryResult	QueryResult	Yes	Query result with columns and rows
onExport	callback	Yes	Called when user requests result export
onQueryAction	callback	Yes	Called when user applies a query action from cell context menu
runeMode	boolean	Yes	Whether the query was a native JSON query

Outputs

Name	Type	Description
Interactive table	visual	Sortable, filterable result table with cell context menus
Query actions	via callback	Filter/aggregate actions from cell interactions
Export	file download	CSV, TSV, JSON, or SQL INSERT export of results

Usage Examples

Displaying Query Results

<ResultTablePane
  queryResult={queryResult}
  onExport={(format) => downloadResults(queryResult, format)}
  onQueryAction={(action) => {
    // action = { type: 'filter', column: 'country', value: 'US' }
    // Modifies the SQL query to add WHERE country = 'US'
    applyAction(action);
  }}
  runeMode={false}
/>

Related Pages

Implements Principle

• Principle:Apache_Druid_Result_Analysis

Requires Environment

• Environment:Apache_Druid_Web_Console_Development
• Environment:Apache_Druid_Druid_Cluster_Api