mcpField
C
column-filtering

column-filtering

github.com/tanstackDevelopment28.5k36 installsUpdated 1w ago
Repository

About column-filtering

A TanStack Table skill covering column filtering state, row processing, and filter configuration. It focuses on registering needed built-in filters and avoiding mistakes with manual mode, accessor values, and controlled updates.

Key features

  1. 01Register individual built-in filter functions
  2. 02Configure leaf-first filtering
  3. 03Distinguish manual and client filtering
  4. 04Handle updater-function callbacks

Use cases

  1. 01Set up column filters for table data
  2. 02Filter hierarchical rows by descendants
  3. 03Maintain controlled filter state correctly

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tanstack/table --skill column-filtering

After installing, type/column-filteringin Claude Code to confirm it loaded.

Details

From the project README

This skill builds on core, table-features, and client-vs-server. Filtering state, row processing, and filter UI are separate concerns.

Setup

import {
  columnFilteringFeature,
  createFilteredRowModel,
  filterFn_includesString,
  tableFeatures,
} from '@tanstack/table-core'

export const features = tableFeatures({
  columnFilteringFeature,
  filteredRowModel: createFilteredRowModel(),
  filterFns: { includesString: filterFn_includesString },
})

Import individual filterFn_* built-ins and register only those your columns reference by string name or that filterFn: 'auto' should resolve for your data types. The full filterFns registry object still works but bundles every built-in.

Core Patterns

const options = {
  filterFromLeafRows: true,
  maxLeafRowFilterDepth: 2,
}

Use leaf-first filtering only when a parent should survive because a descendant matches.

Common Mistakes

[HIGH] Combining manual and client filtering

Wrong: const options = { manualFiltering: true }

Correct: const options = { manualFiltering: false }

Manual mode returns the pre-filtered model; send filter state to the server instead if it is true.

Source: packages/table-core/src/features/column-filtering/columnFilteringFeature.types.ts

[HIGH] Filtering renderer output

Wrong: helper.accessor(row => ({ label: row.status }), { filterFn: 'includesString' })

Correct: helper.accessor('status', { filterFn: 'includesString' })

Built-in string and numeric filters expect comparable accessor values, not objects or UI nodes.

Source: docs/framework/react/guide/column-filtering.md#filterfns

[HIGH] Ignoring updater-function callbacks

Wrong: onColumnFiltersChange: value => { columnFilters = value as ColumnFiltersState }

Correct: onColumnFiltersChange: updater => { columnFilters = functionalUpdate(updater, columnFilters) }

Controlled callbacks receive either a value or a function of previous state.

Source: packages/table-core/src/features/column-filtering/columnFilteringFeature.types.ts

API Discovery

Inspect node_modules/@tanstack/table-core/dist/features/column-filtering/ and dist/features/column-filtering/filterFns.d.ts for exact signatures and auto-remove behavior.

Comments

Markdown supported