Chapter 36: Global Filtering (React) Guide

Core Idea

globalFilteringFeature (built on columnFilteringFeature) is a single cross-column filter value against one globalFilterFn — narrower in scope than column filtering (12 built-in functions vs. 18, no range-comparison-heavy variants) but otherwise the same registration/state/control patterns.

Key Concepts

• Setup: tableFeatures({ columnFilteringFeature, globalFilteringFeature, filteredRowModel: createFilteredRowModel(), filterFns: {...} }) for client-side; manualFiltering: true and skip the row model for server-side (same trade-offs as column filtering — see Client-Side vs Server-Side Guide).
• globalFilterFn (table option, not per-column) selects the comparator — a registered string name or a function passed directly. 12 built-in options: string (includesString, includesStringSensitive, equalsString), equality (equals, weakEquals), array-valued (arrIncludes, arrIncludesAll, arrIncludesSome, arrHas), ranges (inNumberRange, between, betweenInclusive) — notably no startsWith/endsWith/inDateRange/empty/notEmpty (those are column-filtering-only).
• State: globalFilter is a single value (typed any so custom functions can use non-string shapes, but usually a search string). Reactive read: table.state.globalFilter; snapshot: table.atoms.globalFilter.get(). Ownership: external atom (v9-recommended) via atoms.globalFilter, or classic state.globalFilter + onGlobalFilterChange, or initialState.globalFilter alone — never mix initialState with a controlled value for the same slice.
• No built-in search input — the library owns state/logic only. Wire your own <input> to table.state.globalFilter / table.setGlobalFilter(value).
• Disabling: per-column enableGlobalFilter: false (excludes that column from the global search — check via column.getCanGlobalFilter()), or table-wide enableGlobalFilter: false; enableFilters: false disables both column and global filtering at once.
• APIs: table.setGlobalFilter(value), table.resetGlobalFilter() / resetGlobalFilter(true), table.getGlobalFilterFn() (current comparator), table.getGlobalAutoFilterFn() (the default — currently includesString), column.getCanGlobalFilter().
• Fuzzy filtering (approximate/ranked matching) is the most common custom globalFilterFn in practice — covered in its own chapter since it needs filterMeta and a paired sort function to be genuinely useful.

Code Examples

const features = tableFeatures({
  columnFilteringFeature, globalFilteringFeature,
  filteredRowModel: createFilteredRowModel(),
  filterFns: { includesString: filterFn_includesString },
})
const table = useTable({ features, columns, data, globalFilterFn: 'includesString' })

<input value={table.state.globalFilter ?? ''} onChange={(e) => table.setGlobalFilter(e.target.value)} placeholder="Search..." />

• What it demonstrates: the complete, minimal search-box integration — read table.state.globalFilter, write via table.setGlobalFilter.

Key Takeaways

1. Global filtering is a strict subset of column filtering's built-in functions — reach for column filtering (or a custom function) when you need startsWith/date ranges/emptiness checks globally.
2. You must build the search <input> yourself; nothing renders automatically.
3. enableGlobalFilter: false per-column is how you exclude a field (like an internal id) from cross-table search without affecting its own column filter.

Connects To

• Column Filtering (React) Guide: the prerequisite feature and the full 18-function built-in set.
• Fuzzy Filtering (React) Guide: the standard custom globalFilterFn for approximate/ranked search.
• Client-Side vs Server-Side Guide: manualFiltering and the page-reset caveat, identical to column filtering's.