skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

global-filtering

Applies globalFilter across eligible columns in TanStack Table using globalFilteringFeature and filteredRowModel.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#Search#typeScript#tanstack table#datagrid#table-core#Filtering#global filter
One-click install
npx skills add https://github.com/TanStack/table --skill global-filtering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: global-filtering
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/global-filtering
Command: npx skills add https://github.com/TanStack/table --skill global-filtering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Global filtering in TanStack Table often misbehaves: unexpected columns participate in the search, or the filter state changes while rows stay the same. This Skill explains how to configure global filtering correctly on top of the column-filtering pipeline, for both client-side and manual server-side filtering.

Core Features & Use Cases

  • Correct feature wiring: Registers columnFilteringFeature, globalFilteringFeature, and a filteredRowModel together so global filtering actually processes rows.
  • Column eligibility control: Uses getColumnCanGlobalFilter to exclude columns like 'actions' from the global search instead of relying on default primitive-value detection.
  • Manual server-side filtering: Shows how to drive server requests with the global filter value when manualFiltering is enabled, since the client model is bypassed.
  • Use Case: A React datagrid with a search box where the 'actions' column must be excluded and filtering runs on the server; this Skill provides the exact options and feature registration to make it work.

Quick Start

Ask the AI to set up global filtering in a TanStack Table instance that excludes specific columns and supports server-side search.

Frequently Asked Questions about global-filtering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add global filtering to a TanStack Table?▼

Register columnFilteringFeature, globalFilteringFeature, and a filteredRowModel created with createFilteredRowModel in tableFeatures, then set globalFilterFn such as 'includesString'. Global filtering reuses the column-filtering pipeline, so the column filtering feature is a required prerequisite.

How do I exclude a column from global filter in TanStack Table?▼

Provide a getColumnCanGlobalFilter option, for example returning false when column.id equals 'actions'. By default, eligibility is detected from the first core row and accepts string or number values, which can make unexpected columns participate.

Why does global filter state change but rows stay the same?▼

This usually happens when manualFiltering is enabled but the filter value only updates local table state. With manual filtering the client model is bypassed, so the global filter value must be sent to the server and the fetched rows passed back as data.

Does global filtering work without column filtering in TanStack Table?▼

No. Global filtering depends on columnFilteringFeature as a feature prerequisite and needs a filteredRowModel for client-side processing. Registering globalFilteringFeature alone will not produce filtered rows.

Which columns participate in global filtering by default?▼

Default eligibility inspects the first core row and includes columns whose values are strings or numbers. Columns with other value types are excluded unless you override the behavior with getColumnCanGlobalFilter.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
1

tanstack-table

Build accessible data tables with TanStack Table and React Aria Components.

Official
Intermediate
TanStackTanStack
28.3k

svelte/getting-started

Create typed TanStack Table v9 setups for Svelte 5 with reactive instances.

Official
Intermediate
TanStackTanStack
28.3k

filtering

Implement client-side column and global filtering in TanStack Table v9.

Official
Intermediate
jezwebjezweb
961

TanStack Table

Configure TanStack Table with server-side pagination, filtering, sorting, and virtualization.

Community
Intermediate