UI Components

See the /infinite example for a live demo with all components in action.

DataTableInfinite

The main infinite scroll table component. Located at src/app/infinite/data-table-infinite.tsx.

<DataTableInfinite
  columns={columns}
  data={flatData}
  totalRows={totalDBRowCount}
  filterRows={filterDBRowCount}
  totalRowsFetched={totalFetched}
  defaultColumnFilters={defaultColumnFilters}
  defaultColumnSorting={sort ? [sort] : undefined}
  defaultColumnVisibility={defaultColumnVisibility}
  filterFields={filterFields}
  sheetFields={sheetFields}
  schema={filterSchema.definition}
  meta={metadata}
  isFetching={isFetching}
  isLoading={isLoading}
  fetchNextPage={fetchNextPage}
  hasNextPage={hasNextPage}
  fetchPreviousPage={fetchPreviousPage}
  refetch={refetch}
  renderSheetTitle={(props) => props.row?.original.pathname}
  getRowId={(row) => row.uuid}
  chartData={chartData}
  chartDataColumnId="date"
/>

DataTableFilterControls

The left sidebar with accordion-based filter controls. Renders the appropriate UI component for each filter type:

• Checkbox — multi-select with search and count display
• Slider — dual min/max range inputs
• Input — text search with debounce
• Timerange — date range picker with preset shortcuts

Toggle with Cmd+B. For responsive layouts, DataTableFilterControlsDrawer provides a mobile-friendly drawer alternative.

DataTableFilterCommand

The command palette for text-based filtering. Opens with Cmd+K.

Supports filter syntax:

• Regular: host:API
• Union: regions:ams,gru
• Range: latency:100-500
• Quoted: host:"API Server" (for values with space)

<DataTableFilterCommand schema={filterSchema.definition} tableId="my-table" />

DataTableSheetDetails

Row detail drawer. Opens when a row is selected. Supports keyboard navigation between rows.

<DataTableSheetDetails
  title={<>{row?.original.pathname}</>}
  titleClassName="font-mono"
>
  <DataTableSheetContent fields={sheetFields} />
</DataTableSheetDetails>

Cell Components

Built-in cell renderers (used automatically by generateColumns):

• DataTableCellText — plain text with overflow tooltip
• DataTableCellCode — monospace
• DataTableCellNumber — formatted with optional unit
• DataTableCellTimestamp — relative time with absolute tooltip
• DataTableCellBadge — colored chip
• DataTableCellBoolean — checkmark / dash
• DataTableCellStatusCode — HTTP status styling
• DataTableCellLevelIndicator — severity dot

All support an optional colorMap for value-based coloring.

Filter Functions

Register custom filter functions on your table:

import { inDateRange, arrSome } from "@/lib/table/filterfns";
 
// In your table config
filterFns: {
  inDateRange, arrSome;
}

• inDateRange — matches dates within [start, end] range
• arrSome — matches if row value is in the filter array

Extending TanStack Table Types

import "@tanstack/react-table";
 
declare module "@tanstack/react-table" {
  interface TableMeta<TData extends unknown> {
    getRowClassName?: (row: Row<TData>) => string;
  }
 
  interface ColumnMeta {
    headerClassName?: string;
    cellClassName?: string;
    label?: string;
  }
 
  interface FilterFns {
    inDateRange?: FilterFn<any>;
    arrSome?: FilterFn<any>;
  }
}