column-filtering

Configure column filtering in TanStack Table with filter functions and row models.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Setting up column filtering in TanStack Table involves coordinating filter state, row models, and filter functions, and mistakes like mixing manual and client filtering or filtering renderer output silently break results.

Core Features & Use Cases

  • Feature Registration: Register columnFilteringFeature, createFilteredRowModel, and individual filterFn built-ins through tableFeatures for tree-shakable bundles.
  • Controlled State Handling: Correctly handle updater-function callbacks in onColumnFiltersChange using functionalUpdate.
  • Leaf-Row Filtering: Configure filterFromLeafRows and maxLeafRowFilterDepth so parent rows survive when descendants match.
  • Use Case: When building a data grid where users filter a status column, use helper.accessor('status', { filterFn: 'includesString' }) so built-in string filters receive comparable values instead of objects.

Quick Start

Ask the AI to set up column filtering in a TanStack Table with the includesString filter function and controlled filter state.

Frequently Asked Questions about column-filtering

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

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

Register columnFilteringFeature and createFilteredRowModel through tableFeatures, then add the filter functions your columns reference. Set filterFn on each column definition, such as filterFn: 'includesString' for string columns.

How do I use built-in filter functions in TanStack Table?

Import individual filterFn_* built-ins like filterFn_includesString and register them in the filterFns option of tableFeatures. Registering only the functions you reference keeps the bundle smaller than importing the full registry.

Why is my TanStack Table filter not working with custom accessors?

Built-in string and numeric filters expect comparable accessor values, not objects or rendered UI nodes. Use helper.accessor('status', ...) with a direct key instead of returning objects like { label: row.status } from the accessor.

What is the difference between manualFiltering and client-side filtering?

With manualFiltering: true, the table returns the pre-filtered row model and expects you to send filter state to your server. With manualFiltering: false, the filteredRowModel processes rows client-side; do not combine both approaches.

Why does onColumnFiltersChange receive a function instead of a value?

Controlled filter callbacks receive either a value or an updater function of previous state. Wrap the callback with functionalUpdate(updater, columnFilters) so both forms are handled correctly.

When should I use filterFromLeafRows in TanStack Table?

Use filterFromLeafRows with maxLeafRowFilterDepth only when a parent row should survive filtering because a descendant matches. It changes filtering to evaluate leaf rows first in nested or grouped data.