Component gallery

Table hooks

The hooks under DataTable used on their own: sort, search, filters, and selection state driving a plain Table.

useTableSort

Tri-state cycle per column; apply is a pure client-side sort
{"key":"price","dir":"asc"}
  • Oil filter · queued · 12.4
  • Air filter · queued · 19.2
  • Wiper blades · active · 24.9
  • Brake pads · active · 84.5
  • Headlight · error · 122
  • Radiator · active · 240

useTableSearch

getInputProps wires any input; fields scopes the match
  • Brake pads · active · 84.5
  • Air filter · queued · 19.2
  • Headlight · error · 122
  • Wiper blades · active · 24.9
  • Oil filter · queued · 12.4
  • Radiator · active · 240

useTableFilters + FilterBar

Registry-driven filters; the bar renders the right control per kind
  • Brake pads · active · 84.5
  • Air filter · queued · 19.2
  • Headlight · error · 122
  • Wiper blades · active · 24.9
  • Oil filter · queued · 12.4
  • Radiator · active · 240

useTableSelection

Row identity, toggle, select-all over the visible rows
  • Brake pads
  • Air filter
  • Headlight
  • Wiper blades
  • Oil filter
  • Radiator

useTablePagination + paginationMeta

Client-side slice; meta derives the 1-based visible range
page 1/2 · paginationMeta: {"from":1,"to":3,"total":6}
  • Brake pads · active · 84.5
  • Air filter · queued · 19.2
  • Headlight · error · 122

useColumnVisibility

Hidden-key set; apply drops hidden columns preserving order
visible: name, status

noopSyncAdapter

The URL/query sync seam every hook accepts; the no-op is the default stand-in
sync: { key: "jobs", adapter: noopSyncAdapter } // keys: read, write

Styling slots

No styling slots on this page
(none)
these hooks return state and handlers, never DOM, so there is nothing to restyle
@versable-git/ui · all states, both themes