Implementation:Apache Druid TransformTable

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 transform expression configuration during the Load Data wizard's transform step.

Description

The TransformTable component renders a paginated ReactTable showing sampled data where each column header is clickable to configure or edit transform expressions. Columns that have transforms applied are highlighted with a "transformed" CSS class and display their transform expression in the column header detail area. When a user clicks an untransformed column, a new default expression transform is created using the escaped column name. The module also exports a helper function transformTableSelectedColumnName that resolves the currently selected transform column from a partial Transform object.

Usage

Used in the transform step of the Load Data wizard to let users visually inspect sample data and interactively define per-row expression transforms that create derived columns or alter existing column values during ingestion.

Code Reference

Source Location

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

Signature

export function transformTableSelectedColumnName(
  sampleResponse: SampleResponse,
  selectedTransform: Partial<Transform> | undefined,
): string | undefined;

export interface TransformTableProps {
  sampleResponse: SampleResponse;
  columnFilter: string;
  transformedColumnsOnly: boolean;
  transforms: Transform[];
  selectedColumnName: string | undefined;
  onTransformSelect: (transform: Transform, index: number) => void;
}

export const TransformTable = React.memo(function TransformTable(props: TransformTableProps));

Import

import { TransformTable, transformTableSelectedColumnName } from './transform-table/transform-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 displayed columns (case-insensitive matching)
transformedColumnsOnly	boolean	Yes	When true, only columns with existing transforms are shown
transforms	Transform[]	Yes	Array of currently configured transform definitions
selectedColumnName	undefined	Yes	Name of the currently selected/highlighted column
onTransformSelect	(transform: Transform, index: number) => void	Yes	Callback invoked when a column header is clicked, providing the transform and its index (-1 for new transforms)

Outputs

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

Usage Examples

Rendering the transform table

<TransformTable
  sampleResponse={sampleResponse}
  columnFilter={searchText}
  transformedColumnsOnly={showTransformedOnly}
  transforms={currentTransforms}
  selectedColumnName={selectedTransformColumn}
  onTransformSelect={(transform, index) => editTransform(transform, index)}
/>

Resolving selected transform column

const selectedColumn = transformTableSelectedColumnName(sampleResponse, currentTransform);
// Returns the transform name if it exists in sample headers, otherwise undefined

Related Pages

• Environment:Apache_Druid_Web_Console_Development