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] アップデーター関数のコールバックを無視する

誤り：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 対応