
Description
Apply globalFilter across eligible columns with globalFilteringFeature, columnFilteringFeature, filteredRowModel, globalFilterFn, and manual server filtering. Load when columns unexpectedly participate or a global filter changes state without changing rows.
SKILL.md
This skill builds on core, table-features, client-vs-server, and column-filtering. Global filtering reuses the column-filtering pipeline.
Setup
import {
columnFilteringFeature,
createFilteredRowModel,
filterFn_includesString,
globalFilteringFeature,
tableFeatures,
} from '@tanstack/table-core'
export const features = tableFeatures({
columnFilteringFeature,
globalFilteringFeature,
filteredRowModel: createFilteredRowModel(),
filterFns: { includesString: filterFn_includesString },
})
Core Patterns
const options = {
globalFilterFn: 'includesString' as const,
getColumnCanGlobalFilter: (column) => column.id !== 'actions',
}
Declare eligibility when product rules differ from default primitive-value detection.
Common Mistakes
CRITICAL Omitting column-filter prerequisite
Wrong: tableFeatures({ globalFilteringFeature })
Correct: tableFeatures({ columnFilteringFeature, globalFilteringFeature, filteredRowModel: createFilteredRowModel() })
Global filtering depends on column filtering and needs the filtered model for client processing.
Source: packages/table-core/src/types/TableFeatures.ts#FeatureSlotPrereqs
HIGH Assuming every column participates
Wrong: const options = { globalFilterFn: 'includesString' }
Correct: const options = { getColumnCanGlobalFilter: column => column.id !== 'actions' }
Default eligibility uses the first core row and accepts string or number values.
Source: packages/table-core/src/features/global-filtering/globalFilteringFeature.ts
HIGH Keeping manual filter local only
Wrong: table.setGlobalFilter(search); const options = { manualFiltering: true }
Correct: const page = await fetchRows({ search }); const options = { data: page.rows, manualFiltering: true }
Manual filtering bypasses the client model, so the value must drive the server request.
Source: docs/framework/react/guide/global-filtering.md#manual-server-side-global-filtering
API Discovery
Inspect node_modules/@tanstack/table-core/dist/features/global-filtering/ plus dist/features/column-filtering/ for shared state and filter functions.
More skills from the table repository
View all 30 skillsaggregation
perform data aggregation in TanStack Table
Jul 26Data AnalysisFrontendTanStackapi-not-found
diagnose TanStack Table API errors
Jul 26DebuggingFrontendTanStackcell-selection
select rectangular cell ranges in tables
Jul 26Data AnalysisTanStackUI Componentsclient-vs-server
manage TanStack Table data pipelines
Jul 26Data PipelineFrontendPerformanceTanStackcolumn-faceting
build faceted filter UIs
Jul 26Data VisualizationFrontendTanStackcolumn-filtering
implement column filtering in TanStack Table
Jul 26Data AnalysisFrontendTanStack
More from TanStack
View publishercolumn-ordering
manage TanStack Table column ordering
table
Jul 26FrontendTanStackUI Componentscolumn-pinning
configure column pinning in TanStack Table
table
Jul 26CSSFrontendTanStackUI Componentscolumn-resizing
implement column resizing in TanStack Table
table
Jul 26FrontendTanStackUI Componentscolumn-sizing
configure column sizing in TanStack Table
table
Jul 26CSSFrontendTanStackUI Componentscolumn-visibility
manage column visibility in TanStack Table
table
Jul 26FrontendTanStackUI Componentscore
build data grids with TanStack Table
table
Jul 26Data AnalysisFrontendUI Components