# Filter toolbar

A React component in [Beamline](https://beamline.io/)'s [Data & tables](https://beamline.io/components/data) category. Live demo: https://beamline.io/components/filter-toolbar

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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Data & tables

- [Data grid](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/table): A plain, styled HTML table for small static data: header, body, footer, caption, numeric cells, three densities and a sticky header.