Filter toolbar
A React component in Beamline's Data & tables category.
The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls.
Use it for
- Filtering a list or table by a few fields.
Not for
- Filters inside a data grid's column headers.
Anatomy
- toolbar
- chips (field · value, remove)
- Add filter menu (fields → values)
- extra controls
- Clear all
States
- no filters
- filtered
Keyboard
- Toolbar of buttons; the menu has the usual keys
Motion
An added filter grows in, the others close up when one is removed, and the removed chip fades where it stood (useFlip).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
filters | { id, label, value }[] | — | |
onRemove / onClearAll | callbacks | — | |
addFilter | { fields: { id, label, icon?, options }[], onAdd } | — | |
children | ReactNode | — | |
style / ref | CSSProperties / native Ref | — | native HTMLDivElement |
classNames | FilterToolbarClassNames | — | |
menuClassNames | MenuClassNames | — | Parts inside the portalled add-filter menu. |
Dependencies
lucide-react
Import
import { FilterToolbar } from "@/components/filter-toolbar/filter-toolbar";Get it
Filter toolbar is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Data & tables
- Data grid: Virtualised grid for thousands of rows: multi-sort, search and value filters, resizable and pinnable columns, range selection, inline edit, footer…
- Diff table: Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply…
- Import mapping: Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row…
- Table: A plain, styled HTML table for small static data: header, body, footer, caption, numeric cells, three densities and a sticky header.