Skip to main content

@elabs-ai/components-data

8 pages

TanStack DataTable, FilterBar, SearchInput, FacetFilter, ColumnPicker.

pnpm add @elabs-ai/components-data

A DataGrid from one serialisable spec — rows, optional column specs (inferred when absent) and an optional saved view.

5 examples

Column-visibility toggle for a live TanStack table.

2 examples

The spreadsheet-grade preset of DataTable (interaction="grid"): one tab stop, arrow keys across header and body cells, Excel-style cell ranges (drag, Shift, Ctrl/⌘), Ctrl/⌘+A, and Ctrl/⌘+C copies what the cells display as tab-separated text.

15 examples

TanStack-backed data grid with sorting, filtering, pagination and a render-prop toolbar.

43 examples

Multi-select faceted filter rendered as a dropdown of toggles.

3 examples

The two-cluster table toolbar: filters on the leading edge, actions on the trailing edge.

2 examples

The removable active-filter chip for FilterBar, with an optional secondary count ("excluded 1,204"), passed to the base trailing slot rather than folded into label — a long label truncates on its own, the count never loses characters to the ellipsis.

5 examples

Controlled search box that drives a DataTable's global filter.

3 examples