Components · Data table

Table toolbar

The command bar that sits above the roster grid. A flex-1 search field leads; below it a row of active filter chips (each dismissable, with a dashed "Add filter") pairs against a right-aligned bulk-actions cluster — ColumnsButton, export, message, assign, and the primary Add volunteer. Shown with the column-visibility menu open.

Toolbar · search · filter chips · columns · bulk actions

Volunteer	Team	State	Status
HBHannah Bergström	Community outreach	WA	Active
MRMarisol Reyes	Transport	CA	Active
WCWei Chen	Transport	IL	Active

3 filters + "berg" → 9 of 47 volunteers match

The search is pinned :focus (accent ring), the Columns button is pinned open with its menu, its first item and the dashed Add filter are pinned :hover. Each chip's ✕ removes just that facet; Clear all resets the query + every chip. The grid below is a live preview of the narrowed result.

A debounced global filter over name / email / phone / state — the flex-1 field that leads the bar. Focus lifts the accent ring; empty shows the placeholder.

filter chips

One dismissable chip per active facet (Key: Value, accent-soft fill) plus a dashed Add filter that opens the facet picker. Clear all appears only while filters are set.

ColumnsButton

Toggles column visibility against a serializable ColumnLayout { order, hidden, pinned } the grid also reads — persistable to the URL or a saved view.

bulk actions

A right-aligned cluster — Export (CSV/XLSX), Message, Assign team — ending in the single primary Add button. Ghost until the row acts on the current / selected set.

Source · RescuersTable.tsx command bar (search + facet selects + column toggle) · @phauna/ds/grid ColumnsButton / GridExportButton · FilterBar chips · design-system/data-table + /filters.