Implementation:Ucbepic Docetl ResizableDataTable

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the feature-rich, resizable data table used to display pipeline outputs in the DocETL playground.

Description

The ResizableDataTable is a comprehensive data table built on @tanstack/react-table with column resizing, sorting, filtering, pagination, column visibility toggling, and full-text search. It computes column statistics (min, max, avg, distribution, distinct counts) and renders histograms and categorical bar charts in column headers. Each cell supports markdown rendering via MarkdownCell, searchable content via SearchableCell, and detailed inspection via ColumnDialog. Column widths persist to localStorage.

Usage

Rendered within the Output panel and other data display contexts. The primary component for viewing tabular pipeline output data throughout the playground.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/ResizableDataTable.tsx
• Lines: 1-1265

Signature

export type DataType = Record<string, unknown>;
export type ColumnType<T> = {
  accessorKey: string;
  header: string;
  cell?: ({ getValue }: { getValue: () => unknown }) => React.ReactNode;
  initialWidth?: number;
  id?: string;
};

export interface ColumnStats {
  min: number;
  max: number;
  avg: number;
  distribution: number[];
  bucketSize: number;
  type: "number" | "array" | "string-words" | "string-chars" | "boolean";
  distinctCount: number;
  totalCount: number;
  isLowCardinality: boolean;
  sortedValueCounts: { value: string; count: number }[];
}

export function calculateColumnStats(data: Record<string, unknown>[], accessor: string): ColumnStats | null
export function WordCountHistogram(props: { stats: ColumnStats }): JSX.Element
export function CategoricalBarChart(props: { stats: ColumnStats }): JSX.Element

export default function ResizableDataTable<T extends DataType>(props: {
  data: T[];
  columns: ColumnType<T>[];
  currentOperation?: string;
  boldedColumns?: string[];
  startingRowIndex?: number;
}): JSX.Element

Import

import ResizableDataTable, { ColumnType, ColumnStats, calculateColumnStats } from "@/components/ResizableDataTable";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
data	T[]	Yes	Array of row data objects
columns	ColumnType<T>[]	Yes	Column definitions
currentOperation	string	No	Current operation name for observability
boldedColumns	string[]	No	Column keys to render in bold
startingRowIndex	number	No	Starting row index for display

Outputs

Name	Type	Description
rendered	JSX.Element	Full-featured data table with resizing, sorting, search, and stats

Usage Examples

<ResizableDataTable
  data={outputRows}
  columns={[
    { accessorKey: "theme", header: "Theme" },
    { accessorKey: "report", header: "Report" },
  ]}
  currentOperation="summarize_themes"
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment