Data Table

DataTable is Cubitt's table renderer on top of TanStack Table. The core component owns layout, row models, and feature flags like sorting, pinning, resizing, pagination, selection, and virtualization.

The surrounding table experience is intentionally composable:

Search is composed with useSearch and input primitives.
Column visibility is composed with useDataTableColumnVisibility and menu primitives.
Filtering is composed with Filters and useFiltersTanstack(...).
Bulk actions are usually composed with the SelectionToolbar primitive.
Inline edit and component overrides are opt-in extensions on the table itself.

Core

Columns

Column ids, accessors, renderers, sizing, and the DataTable-specific column metadata.

Table Features

Sorting, pinning, resizing, pagination, and controlled table state.

Composition

Search

Compose row search with useSearch, SearchExpand, and DataTable.

Filtering

Compose structured column filters with Filters, useFiltersTanstack, and DataTable.

Column Visibility

Control visible columns with a dedicated hook and menu primitives.

Selection

Built-in row selection, controlled id-based selection, and bulk actions.

States

Loading, empty, error, and custom skeleton rendering.

Extending

Edit Mode

Inline text, select, and markdown editors with commit hooks.

Custom Components

Override table primitives and derive row, header, and cell props.

Performance

Virtualisation

Container, window, and custom-scroll virtualisation modes.

Optimisation

Practical guidance for stable columns, data flow, and large datasets.

Mental Model

Your columns define identity, rendering, sizing, and optional table metadata.
DataTable renders the table and wires TanStack row models based on the feature flags you enable.
Adjacent hooks own URL state and surrounding UI where that keeps the table API smaller and more reusable.
Performance-sensitive features like inline edit and virtualization stay opt-in.

Start with Columns and Table Features, then jump into the composition or performance pages you actually need.