DataTable

The feature layer over Table: sort, search, the filter registry, selection, row menus, column visibility, and pagination, each a standalone hook named in features.

Uncontrolled: features self-own their state

One toolbar: search, Refresh and Download at the right end, and ticking a row swaps the toolbar for the bulk bar in place

Browsable list recipe


Validate batch #129	Validate	Fay Ng	Paused	4,813	P5
Enhance batch #114	Enhance	Carmen Diaz	Paused	4,758	P5
Extract batch #128	Extract	Efe Sol	Failed	4,476	P4
Validate batch #113	Validate	Ben Cho	Failed	4,421	P4
ImageGen batch #127	ImageGen	Dev Patel	Queued	4,139	P3

Showing 1-5 of 42

…

No card on this page is a page-level list; each one isolates a DataTable feature at reading width. A shipped list is the composition the recipe carries row by row: the card that owns the scroll, FacetBar as the toolbar, the three-way empty state, the boot skeleton, the bulk bar.

Filter registry

Per-column filter kinds → key:value chips with disable-toggle + remove. AND across, OR within.

Module · 2

All status

Module

Rows

Add filter


Extract batch #104	Extract	Efe Sol	Paused	1,388	P5
Enhance batch #106	Enhance	Ada Reyes	Running	2,062	P2
Extract batch #108	Extract	Carmen Diaz	Failed	2,736	P4
Enhance batch #110	Enhance	Efe Sol	Done	3,410	P1
Extract batch #112	Extract	Ada Reyes	Queued	4,084	P3
Enhance batch #114	Enhance	Carmen Diaz	Paused	4,758	P5

Showing 1-6 of 16

Uncheck a chip to grey it out without losing it; the “Add filter” picker offers every registered column. Match kinds (Module, Status) stand as facet menus in the one FacetBar toolbar with search at its right end; kinds that cannot be a menu, like the Rows range, keep the click-to-add FilterBar beneath it.

Quiet defaults

Three jobs, one page: no pager, and the count sits quietly in the footer. Empty cells say N/A. Search for zzz to see the filtered-empty state with Clear search.

						Note
Extract batch #100	Extract	Ada Reyes	Done	40	P1	N/A
Validate batch #101	Validate	Ben Cho	Running	377	P2	N/A
Enhance batch #102	Enhance	Carmen Diaz	Queued	714	P3	N/A

Showing 1-3 of 3

FacetBar

The standing-facets toolbar, the union of both product apps: checkbox dropdowns with counts, a single-select facet behind an all-sentinel, helper tooltips, and applied values as removable chips behind the chips knob

Filter

Module · 1

All statuses

Module: Extract

1 filter value applied

FilterableCell, the click-to-filter cell:

Model-driven: selection bulk bar + column visibility

Build the model yourself with useDataTable, then compose a custom toolbar off its live state

Columns:

Tick rows to reveal the bulk bar. The header checkbox selects the visible page and shows an indeterminate state for a partial selection.


Extract batch #104	Extract	Efe Sol	Paused	1,388	P5
Validate batch #109	Validate	Dev Patel	Paused	3,073	P5
Enhance batch #114	Enhance	Carmen Diaz	Paused	4,758	P5
ImageGen batch #119	ImageGen	Ben Cho	Paused	1,443	P5
Extract batch #124	Extract	Ada Reyes	Paused	3,128	P5
Validate batch #129	Validate	Fay Ng	Paused	4,813	P5

Showing 1-6 of 42

…

URL-sync seam (live)

Both tables share the real qsync adapter: sort or page one and the other follows, and a reload restores both from the URL

The URL adapter mounts client-side.

Selection primitives

The cells DataTable composes, exported for custom tables

SelectAllCell: header checkbox, indeterminate-aware

Brake pads

Air filter

SelectionCheckbox: the raw control, indeterminate shown

RowMenu

The kebab menu a row's trailing cell carries

Styling slots

DataTable's own slots, on top of the core Table slots documented on the Table page

wrapperClassName: the outer toolbar+table+footer column
toolbarClassName: the default toolbar
selectCellClassName: the auto checkbox cell
menuTriggerClassName: the row-menu kebab trigger
filterBarClassName: the auto-rendered FilterBar