DataGridColumnFilter

Faceted multi-select filter for a DataGrid column, built on Base UI Combobox in multiple mode with the search field inside the popup. The trigger summarises the selection; the popup lists options with live facet counts and a clear action.

Usage

import { DataGridColumnFilter, DataGridColumnFilterProps } from "@instruments/materia-ui/compositions/data-grid-column-filter";

Best practices

For a DataGrid, prefer marking the column meta: { filter: true } and building the table with useDataGridTable: its header and PageToolbarTableFilters then filter it from one state. Use this only for a standalone filter outside that route.
Pass the TanStack column instance (not a column id) - counts come from column.getFacetedUniqueValues(), so wire getFacetedUniqueValues/getFacetedRowModel into the table for live facet counts.
Supply options (label/value/icon) explicitly; the filter renders those choices, it does not derive them from the data - omitted values won't be filterable.
Use this for a discrete multi-select facet; it stores an array filter value, so pair it with a column filter fn that matches array membership.
The typed search survives each pick, so several matches can be ticked from one query; it resets when the popup closes.

Props

Prop	Type	Description
column	`Column<TData, TValue>`	TanStack Table column to filter; supplies facet counts and reads/writes its filter value.
options(required)	`ColumnFilterOption[]`	Selectable values shown in the filter list.
title	`string`	Label for the trigger button and the search input placeholder.

Also exports

interfaceDataGridColumnFilterProps

Composition

Builds on

Badge, Button, Center, Flex, Icon, Separator