Parameters

useTableFiltering() takes one config object. Wrap it in a getter or a ref so the table reads the current filters: useTableFiltering(() => ({ ... })).

Name	Type	Default	Description
filters	TableFilterState	—	Required. Current filter state: a map from field key to filter value.
onFilterChange	(key: string, value: TableFilterValue | null) => void	—	Required. Called when the user changes a filter value. null clears the filter.
fields	readonly TableFilterField[]	—	Required. The fields a column may filter on. Each entry has key, label, type, and the options or limits that type needs.
variant	'inline' | 'inline-compact' | 'popover'	'popover'	Where the control sits. inline and inline-compact render it in the header cell under the label, inline-compact in a tighter frame; popover keeps it behind a funnel button that applies on confirm.

Returns

useTableFiltering() returns one TablePlugin<T>. Pass it to Table in plugins. The plugin fills two fields of the plugin contract:

Name	Type	Description
transformColumns	(columns: TableColumn<T>[]) => TableColumn<T>[]	Only set for the inline variants: a filtered column without a width gets proportional(1) so the control fits under the label.
filterFor	(column: TableColumn<T>) => TableFilterContribution | null	Builds the control for a column, or null when the column has no filter or names a field that is not in fields.

TableFilterContribution

Name	Type	Description
variant	'inline' | 'inline-compact' | 'popover'	The resolved variant, after the default is applied.
field	TableFilterField	The field the column named, taken from fields.
value	TableFilterValue | null	The current value from filters, or null when the field has no filter.
onChange	(value: TableFilterValue | null) => void	Reports a new value through your onFilterChange, already keyed by the field.

TableFilterField

Name	Type	Default	Description
key	string	—	Field key. A column's filter holds this string, and the field reads row[key].
label	string	—	Label and placeholder of the control. It also names the control for screen readers.
type	'string' | 'enum' | 'multi-select' | 'number' | 'date'	—	How the filter matches. string matches a substring, enum one option, multi-select any of the picked options, number the same number, and date a cell date later than the picked day.
options	readonly { value: string, label: string }[]	—	Choices for an enum or multi-select field. Without options the control renders an empty list.
min	number	—	Smallest value a number field accepts.
max	number	—	Largest value a number field accepts.
step	number	1 when isIntegerOnly, otherwise none	Step of a number field.
isIntegerOnly	boolean	false	A number field that only accepts whole numbers.

TableFilterValue

Name	Type	Description
value	string | number | string[]	A number field stores a number, multi-select stores an array of option values, and the rest store a string. A date field stores an ISO calendar day such as 2026-03-21.