Filtering

Two complementary tools: a global search box, and an advanced column-filter rule builder with per-type operators and AND/OR logic. Give a column a type to get the right operators and value inputs.

Loading demo…

Type in the search box, or open the filter icon to build a rule (e.g. Status equals Active).

Column types & operators

Set type on a ColumnDef to drive the operators and value input:

type	Operators
text (default)	contains, startsWith, endsWith, equals, notEquals, isEmpty, isNotEmpty
number	equals, notEquals, greaterThan, lessThan, greaterThanOrEqual, lessThanOrEqual, between, isEmpty, isNotEmpty
date	equals, notEquals, after, before, between, isEmpty, isNotEmpty
boolean	is
select	equals, notEquals, in, notIn, isEmpty, isNotEmpty (uses options)

between (number & date) shows two inputs — a { from, to } range, inclusive. Either bound may be left blank for an open-ended range (e.g. from 100 with no upper bound).

const columns = [
  { id: 'status', header: 'Status', accessorKey: 'status',
    type: 'select', options: [{ label: 'Active', value: 'active' }] },
];

<DataTable columns={columns} data={data} enableGlobalFilter enableColumnFilter />

Auto-populated (faceted) options

A type: 'select' column without an explicit options list auto-populates its filter values from the data's distinct values (cardinality-guarded). Below, Role and Status are type: 'select' with no options — open the column filter and the value dropdown is filled from the data.

Loading demo…

// no `options` → distinct values are derived from the data
{ id: 'role', header: 'Role', accessorKey: 'role', type: 'select' }

The values reflect the data, not other active filters (the rule-builder's custom filter isn't a native TanStack column filter). Auto-population needs the full dataset locally, so it's a client-mode feature — under server pagination/filtering only one page is loaded, so provide explicit options instead.

Props

Prop	Type	Default	Description
enableGlobalFilter	boolean	true	Toolbar global search box.
enableColumnFilter	boolean	false	Advanced column-filter rule builder.
filterMode	'client' | 'server'	'client'	Filter locally or on the server.
onGlobalFilterChange	(value) => void	—	Global search changed.
onColumnFilterChange	(state, isApplied) => void	—	Column filters changed/applied.

Server-side

With filterMode="server", the global filter and the applied column filters are passed to onFetchData instead of filtering locally.