Advanced Filter Builder React component
A query builder for data tables: conditions made of field, operator and value with operators that fit the field type, and / or toggles, one level of grouping, a plain-English sentence of the filter, saved views, copy as JSON, and a results table that filters live.
About the Advanced Filter Builder component
Advanced Filter Builder lets people ask precise questions of a table without writing a query: pick a field, an operator and a value, combine conditions with and or or, and group them when a question needs brackets.
It stays understandable as it grows. Operators change to fit the field, values are chips or numbers, and a sentence under the builder reads the whole filter back in plain English. The table below updates with every change, and useful filters can be saved as views.
When to use it
Use it above customer lists, order tables, logs and any dataset where simple search and a few dropdown filters aren't enough.
For everyday filtering keep quick filter chips on the table and offer this builder behind an Advanced button.
Installation
Add the Advanced Filter Builder component to your project with the shadcn CLI. It lands in components/advanced-filter-builder.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/advanced-filter-builderOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AdvancedFilterBuilder /> accepts 4 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| defaultFilter | object | DEFAULT |
| defaultFilter.id* | string | — |
| defaultFilter.join* | "and" | "or" | — |
| defaultFilter.items* | (Condition | FilterGroup)[] | — |
| onChange | (filter: FilterGroup) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- defaultFilterobjectDefault: DEFAULT
- defaultFilter.id*string
- defaultFilter.join*"and" | "or"
- defaultFilter.items*(Condition | FilterGroup)[]
- onChange(filter: FilterGroup) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Advanced Filter Builder FAQ
- How do I filter my real data?
- onChange receives the filter as a nested group of conditions. Translate it to your API or SQL query on the server, or evaluate it in the browser like the demo does for small datasets.
- Why only one level of groups?
- One level covers almost every real question, such as active customers who are on Team or pay over $500, and deeper nesting quickly becomes hard to read.
- What does the and / or pill do?
- It switches how all conditions in that group combine. And means every condition must match; or means any one is enough. The sentence below updates to match.
- How do saved views work?
- Save view stores the current filter under a name as a chip; clicking a chip applies it again. Persist them per user on your server to keep them across sessions.
- Is it accessible?
- Every select and input is labelled, value chips are toggle buttons with aria-pressed, the join pill says what it will change to, remove buttons name their condition, and the result count updates politely.
