Column filtering

Each column can expose its own filter control in a per-column filter row. Toggle the row with the funnel icon in the toolbar, or have it open from the start with defaultShowColumnFilters: true.

Column filters

GitHub


					2261	45000134754		099
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

Rows per page

1–10 of 48

Choosing a filter control

The UI for each filter is chosen by the column's meta.variant. Supported variants are "text" (default), "select", "multi-select", "checkbox", "range", "range-slider", "date", and "date-range".

For select and multi-select, supply meta.options as an array of { label, value }. If you omit them, the options are derived from the column's faceted unique values.

import { DataTable, useDataTable } from "@/components/ui/data-table"

const columns = [
  { accessorKey: "title", header: "Title", meta: { variant: "text" } },
  {
    accessorKey: "status",
    header: "Status",
    meta: {
      variant: "select",
      options: [
        { label: "Active", value: "active" },
        { label: "Archived", value: "archived" },
      ],
    },
  },
  { accessorKey: "score", header: "Score", meta: { variant: "range" } },
]

const table = useDataTable({ data, columns, getRowId: (row) => row.id })
return <DataTable table={table} />

Open the filter row by default

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  defaultShowColumnFilters: true,
})

Custom filter UI

Use meta.renderColumnFilter as an escape hatch to render your own filter control for a column.

Match highlighting

Matched substrings in cells are highlighted by default. Disable it for the whole table with enableFilterMatchHighlighting: false, or for a single column with meta.disableHighlight: true.

Disabling a column's filter

Set enableColumnFilter: false on a column to remove its filter control entirely.

Faceted values

Select / multi-select filters auto-derive their options, and range filters their min/max bounds, from the data's faceted values. This is on by default; set enableFacetedValues: false to skip computing the faceted row models (e.g. for very large client-side datasets) — then provide meta.options explicitly for select-style filters.

Relevant options

useDataTable options that affect column filtering:

Prop	Type	Default	Description
`defaultShowColumnFilters?`	`boolean`	`false`	Initially show the filter row. Uncontrolled.
`showColumnFilters?`	`boolean`	—	Controlled filter-row visibility. Pair with `onShowColumnFiltersChange`; omit for uncontrolled (seed with `defaultShowColumnFilters`).
`onShowColumnFiltersChange?`	`(showColumnFilters: boolean) => void`	—	Called whenever the filter row is shown or hidden.
`enableColumnFilterModes?`	`boolean`	`true`	Show the filter-mode menu adornment on filter fields. Default true.
`enableFilterMatchHighlighting?`	`boolean`	`true`	Highlight matched substrings in cells. Default true.
`enableFacetedValues?`	`boolean`	`true`	Compute faceted unique values / min-max (auto select options + range bounds). Default true; disable to skip the faceted row models.
`columnFilterDisplayMode?`	`ColumnFilterDisplayMode`	`"subheader"`	Where column filter inputs live: `"subheader"` (a filter row under the header, default), `"popover"` (per-column popovers opened from the column header), or `"custom"` (you render them).

Per-column, via columnDef.meta:

meta key	Type	Description
`variant?`	`FilterVariant`	Filter UI variant rendered in the filter row. Defaults to "text".
`options?`	`DataTableFilterOption[]`	Options for `select` / `multi-select` filter variants. If omitted for a select-style variant, options are derived from faceted unique values.
`filterMode?`	`FilterMode`	Default filter mode for this column (overrides the per-variant default).
`enableColumnFilterModes?`	`boolean`	Per-column override for the filter-mode menu (defaults to the table).
`renderColumnFilter?`	`(props: { column: Column<TData, TValue> table: DataTableInstance<TData> }) => React.ReactNode`	Custom filter UI for this column (escape hatch). Replaces the variant.
`columnFilterModeOptions?`	`FilterMode[]`	Restrict (and order) the filter-mode menu for this column to this subset of modes. Include the column's default mode.
`disableHighlight?`	`boolean`	Opt this column out of match highlighting.

← PreviousUsage Next →Filter modes