mcpField
C
column-filtering

column-filtering

github.com/tanstack开发28.5k36 次安装1 周前更新
代码仓库

关于 column-filtering

介绍 TanStack Table 的列筛选状态、行处理和筛选器配置。内容侧重于按需注册内置筛选函数，以及避免手动模式、访问器值和受控更新方面的错误。

主要功能

  1. 01按需注册内置筛选函数
  2. 02配置叶节点优先筛选
  3. 03区分手动筛选与客户端筛选
  4. 04处理更新函数回调

适用场景

  1. 01为表格数据配置列筛选
  2. 02根据后代筛选层级行
  3. 03正确维护受控筛选状态

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/column-filtering确认已加载。

详细介绍

此技能建立在 core、table-features 和 client-vs-server 之上。筛选状态、行处理和筛选 UI 是彼此独立的关注点。

设置

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

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

单独导入各个内置 filterFn_*，并且仅注册列通过字符串名称引用的筛选函数，或 filterFn: 'auto' 应根据数据类型解析出的筛选函数。完整的 filterFns 注册对象仍然可用，但会打包所有内置筛选函数。

核心模式

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

仅当父级应因某个后代匹配而保留时，才使用叶级优先筛选。

常见错误

[HIGH] 同时使用手动筛选和客户端筛选

错误：const options = { manualFiltering: true }

正确：const options = { manualFiltering: false }

手动模式会返回预筛选模型；如果值为 true，则应改为将筛选状态发送到服务端。

来源：packages/table-core/src/features/column-filtering/columnFilteringFeature.types.ts

[HIGH] 筛选渲染器输出

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

正确：helper.accessor('status', { filterFn: 'includesString' })

内置字符串和数值筛选函数需要可比较的访问器值，而不是对象或 UI 节点。

来源：docs/framework/react/guide/column-filtering.md#filterfns

[HIGH] 忽略 updater 函数回调

错误：onColumnFiltersChange: value => { columnFilters = value as ColumnFiltersState }

正确：onColumnFiltersChange: updater => { columnFilters = functionalUpdate(updater, columnFilters) }

受控回调接收的可能是一个值，也可能是一个基于先前状态的函数。

来源：packages/table-core/src/features/column-filtering/columnFilteringFeature.types.ts

API 探索

查看 node_modules/@tanstack/table-core/dist/features/column-filtering/ 和 dist/features/column-filtering/filterFns.d.ts，了解确切的签名和自动移除行为。

评论

支持 Markdown