Filtering

Show filter UI with showFilterChipBar (active-filter chips above the header) and showFloatingFilters (always-visible inline filter inputs below the header):

<Grid rows={rows} columns={columns} showFilterChipBar showFloatingFilters />

Column filter typesCopy Anchor Link

Use filterDef on a column to configure rich filter UI — the same definition renders consistently across the sidebar panel, the header 3-dot menu, and the floating filter row.

const columns: ColumnDef<Person>[] = [
	{
		field: 'team',
		header: 'Team',
		filterDef: {
			type: 'multi-select',
			options: [
				{ label: 'Compute', value: 'compute' },
				{ label: 'Flight', value: 'flight', count: 12 },
			],
		},
	},
];

type: 'infinite-multi-select' pairs with fetchPage instead of fetchOptions for a server-paginated, virtually-scrolled option list. filterDef supersedes the legacy filterType/filterValues fields, which are still supported and normalized internally.

Quick filterCopy Anchor Link

A single search string matched across multiple columns (or every column):

api.setQuickFilter('nvda', ['symbol', 'name']); // scoped to these columns
api.setQuickFilter('nvda'); // every column
const current = api.getQuickFilter();

Reading and setting filter state directlyCopy Anchor Link

api.setFilterModel({ team: { type: 'equals', filter: 'compute' } });
api.setFilterModel(null); // clear all

EventsCopy Anchor Link

import { GridEventName } from '@witbybit/wit-grid-react';

api.addEventListener(GridEventName.filterChanged, () => console.log(api.getState().filterModel));
api.addEventListener(GridEventName.quickFilterChanged, () => console.log(api.getQuickFilter()));