How do I install the Global Filtering skill?

Run npx skillmds@latest add tanstack/global-filtering in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Global Filtering safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Global Filtering?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Global Filtering free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Global Filtering?

TanStack (@tanstack) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Global Filtering by tanstack — Agent Skill

Name: Global Filtering
Author: TanStack

Global Filtering

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.

TanStack 95eedba 2.4 KB Updated Sep 17, 2026

File contents

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.

---name: global-filteringdescription: 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.---This skill builds on `core`, `table-features`, `client-vs-server`, and `column-filtering`. Global filtering reuses the column-filtering pipeline.## Setup```tsimport { columnFilteringFeature, createFilteredRowModel, filterFn_includesString, globalFilteringFeature, tableFeatures,} from '@tanstack/table-core'export const features = tableFeatures({ columnFilteringFeature, globalFilteringFeature, filteredRowModel: createFilteredRowModel(), filterFns: { includesString: filterFn_includesString },})```## Core Patterns```tsconst 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 prerequisiteWrong: `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 participatesWrong: `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 onlyWrong: `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 DiscoveryInspect `node_modules/@tanstack/table-core/dist/features/global-filtering/` plus `dist/features/column-filtering/` for shared state and filter functions.

Frequently asked questions