Data table

Filter bar

The toolbar above a table: search (300px), status filter chips with counts, a Filters popover for the rest, and view options on the right. Counts always add up to the total.

Live specimen

Lifted from the approved family page at build time; interact with it.

Filter bar

Search first, status chips with counts, then the facets behind Filters.

Search

default
hover
focus
disabled
error

Entity type filter ignored: it must be at most 100 characters.

Status chip with count

default
hover
focus
selected
disabled

Applied filters

Each applied facet becomes a removable pill. Counts on the status chips always add up to the total.

Collection is Crystal SpringsPrice £500 to £1,500

Filters popover, open. Facets are the Global Store facets: fabric code, collection, price range by currency, colour, composition, weight and blend.

Usesshadcn InputToggleGroupPopoverSelectBadgeTanStack column.setFilterValue().dt-fchip.dt-fpop--motion-pop-in

from families/data-table/#filter-bar