Global search

An expandable global search box appears in the toolbar by default (enableGlobalFilter: true). It filters across all searchable columns at once, complementing the per-column filters.

Search modes

When enableGlobalFilterModes: true (the default), the search icon at the start of the box opens a mode menu — fuzzy, contains, and more. A clear button sits at the end of the box while it has text. The initial mode comes from initialState.globalFilterMode, which defaults to "fuzzy".

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

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableGlobalFilter: true,
  enableGlobalFilterModes: true,
  initialState: { globalFilterMode: "fuzzy" },
})
return <DataTable table={table} />

Opening the search box

The search box starts closed unless a search is set. The search button opens it and stays beside it; clicking the button again closes the box and clears the search. Its open state is table state, showGlobalFilter: start it open with initialState: { showGlobalFilter: true }, control it with state.showGlobalFilter and onShowGlobalFilterChange, or open it from code with table.setShowGlobalFilter(true). Setting a search value from outside opens it too.

Custom search modes

Limit or reorder the search mode menu with globalFilterModeOptions. It can also list your own custom filter functions by name; the search runs them on each searchable column, and a row matches when any column passes.

const table = useDataTable({
  data,
  columns,
  filterFns: {
    exact: (row, columnId, value) => String(row.getValue(columnId)) === value,
  },
  globalFilterModeOptions: ["contains", "fuzzy", "exact"],
  initialState: { globalFilterMode: "contains" },
  localization: { filterModes: { exact: "Exact match" } },
})

Disabling global search

Set enableGlobalFilter: false to remove the search box from the toolbar.

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

Custom mode menu

Replace the built-in mode radio items with renderGlobalFilterModeMenuItems. It receives the allowed modes, the currentMode, and an onSelect(mode) to switch.

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

useDataTable({
  renderGlobalFilterModeMenuItems: ({ modes, currentMode, onSelect }) =>
    modes.map((mode) => (
      <DropdownMenuItem
        key={mode}
        disabled={mode === currentMode}
        onClick={() => onSelect(mode)}
      >
        {mode}
      </DropdownMenuItem>
    )),
})

Ranked results

In fuzzy mode, each match carries a relevance score. Set enableGlobalFilterRankedResults to order rows by that score — best matches first — for as long as a search is active.

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  initialState: { globalFilterMode: "fuzzy" },
  enableGlobalFilterRankedResults: true,
})

The ranking yields to the user: the moment they click a column to sort, their sort takes over, and clearing the search restores the original order. It applies only in "fuzzy" mode and is skipped while grouping or row expansion is active, or under manualSorting / manualFiltering (the server owns ordering there).

Placement

Move the search to the left toolbar region with positionGlobalFilter: "left" — see Toolbar customization.

Relevant options

Related