Advanced filter
Set enableAdvancedFilter: true to add a toolbar button that opens a dialog where users build compound filter rules — multiple conditions joined by All (AND) or Any (OR) logic. The button badges the number of active rules.
ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | ||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | ||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | ||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | ||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | ||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | ||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | ||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | ||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | ||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | ||
| $4,120,536 |
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableAdvancedFilter: true,
})
return <DataTable table={table} />
How it works
Each rule is a { columnId, operator, value }. The available operators adapt to the column's meta.variant:
| Variant | Operators |
|---|---|
text (default) | contains, does not contain, starts with, ends with, equals, not equals, is empty, is not empty |
select / multi-select | equals, not equals, is empty, is not empty |
range / range-slider | equals, not equals, >, ≥, <, ≤, between, is empty, is not empty |
date / date-range | equals, not equals, >, <, between, is empty, is not empty |
checkbox | equals |
Build your rules in the dialog, then click Apply to filter the table. Closing or cancelling the dialog discards unapplied edits.
Additive to column filters
The advanced filter is independent of the per-column filter row and global search: a row must pass all active filter systems to be shown. Clear the panel's rules (or use "Clear all") to remove just the advanced filters.
Controlled usage
Drive the filter from your own state with advancedFilter + onAdvancedFilterChange (or seed an uncontrolled table with defaultAdvancedFilter).
const [filter, setFilter] = React.useState<AdvancedFilterGroup>({
logic: "and",
rules: [],
})
const table = useDataTable({
data,
columns,
enableAdvancedFilter: true,
advancedFilter: filter,
onAdvancedFilterChange: setFilter,
})