Filter modes

Filter modes let users change how a column's filter is applied — for example matching with Contains, Starts with, Equals, Between, Greater than, or Empty. With enableColumnFilterModes: true (the default) each filter field shows a mode menu offering the modes appropriate to that column's meta.variant.

Setting the initial mode

Set a column's starting mode with meta.filterMode.

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

const columns = [
  {
    accessorKey: "title",
    header: "Title",
    meta: { variant: "text", filterMode: "startsWith" },
  },
  {
    accessorKey: "score",
    header: "Score",
    meta: { variant: "range", filterMode: "between" },
  },
]

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

Toggling the mode menu

enableColumnFilterModes is true by default. Turn it off globally to hide every mode menu, or override it per column with meta.enableColumnFilterModes.

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

const columns = [
  // mode menu hidden for this column only
  { accessorKey: "id", header: "ID", meta: { enableColumnFilterModes: false } },
]

Restricting the available modes

Limit a column's mode menu to a specific subset (and order) with meta.columnFilterModeOptions. Only modes valid for the column's variant are kept; include the column's default mode.

const columns = [
  {
    accessorKey: "title",
    header: "Title",
    meta: {
      variant: "text",
      filterMode: "contains",
      columnFilterModeOptions: ["contains", "startsWith", "equals"],
    },
  },
]

Custom mode menu

Replace the built-in radio items with your own using renderColumnFilterModeMenuItems. You get the allowed modes, the currentMode, and an onSelect(mode) to switch.

import { DropdownMenuItem } from "@/components/ui/dropdown-menu"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  renderColumnFilterModeMenuItems: ({ modes, currentMode, onSelect }) =>
    modes.map((mode) => (
      <DropdownMenuItem
        key={mode}
        disabled={mode === currentMode}
        onClick={() => onSelect(mode)}
      >
        {mode}
      </DropdownMenuItem>
    )),
})

The global-search mode menu has the same hook: renderGlobalFilterModeMenuItems — see Global search.

Localizing mode labels

Mode menu labels are localizable via localization.filterModes.

Related

• Column filtering
• Localization