tanstack-table

TanStack Table

TanStack Table v9 に関連する作業、特に @tanstack/react-table、テーブル機能の構成、複雑なデータグリッドの動作、または v8 API からの移行に取り組む際に、このスキルを使用します。

ワークフロー

1. コードを変更する前に、ローカルのバージョンと対象 API を確認します。
   • @tanstack/react-table、@tanstack/table-core、任意の @tanstack/react-table-devtools、任意の @tanstack/react-store、任意の @tanstack/react-virtual、および React のバージョン。
   • アプリが安定版の v9（latest は 9.2.x）を使用しているかどうか。古いアプリでは v8 が固定されている場合があります。v8 と v9 の API を混在させないでください。
   • 現在のテーブル作成方式：useTable、createTableHook、stockFeatures、または一時的な useLegacyTable。
   • tableFeatures() に登録されている機能と、実際に必要な行モデルファクトリー。
2. 移行、新しい機能 API、またはパッケージの不一致について、最新のドキュメントを確認します。source-map.md から始めてください。
3. インストール、コア設定、列、レンダリング、行モデルについては、setup-core.md を使用します。
4. v8 から v9 への移行、useLegacyTable、状態の所有、外部アトム、セレクター、テーブルコンテキスト、React Compiler に関する注意点については、state-and-migration.md を使用します。
5. ソート、フィルタリング、ファセット化、ページネーション、選択、固定、サイズ調整、グループ化、集計、セル選択、スパン設定については、features.md を使用します。
6. サーバーサイドのパターン、TanStack Query、仮想化、開発ツール、ワーカー行モデル、パフォーマンス、アクセシビリティ、テストについては、production-patterns.md を使用します。

実装上の判断

• 単発のテーブルには useTable と明示的な tableFeatures() を使用します。複数のテーブルで機能、デフォルト設定、または標準化されたコンポーネントを共有する場合は createTableHook を使用します。ツリーシェイキングがまだ重要でない場合に限り、手軽に多くの機能をまとめて使える方法として stockFeatures を使用します。
• テーブルが必要とする機能だけを登録します。コアの行モデルは自動です。クライアントサイドのフィルタリング、ソート、グループ化、展開、ファセット化、ページネーションには、対応する行モデルファクトリーが必要です。
• レジストリスロットには、個別にインポートした filterFn_*、sortFn_*、aggregationFn_* のエントリーを優先して使用します。filterFns／sortFns／aggregationFns の各オブジェクトも引き続き使用できますが、すべての組み込み機能がバンドルされます。
• レンダリング間で data、columns、再利用可能な列ヘルパーを安定させてください。
• 行、セル、列、ヘッダーの各インスタンスからメソッドを分割代入しないでください。インスタンス上で呼び出してください。
• セルとヘッダーには table.FlexRender または v9 の FlexRender コンポーネントを使用してください。
• サーバークエリ、永続化、またはコンポーネント間の UI を支える状態には、外部アトムを優先して使用します。単純な移行作業では、従来の state と onXChange のパターンも引き続き役立ちます。
• サーバーがすでに処理済みのデータを返す場合は、manualSorting、manualFiltering、manualPagination、manualGrouping を使用します。すべてのテーブル操作で、同じデータスコープを一貫して使用してください。
• v9 は React Compiler に対応しています。v8 の 'use no memo' による回避策は削除してください。安定した row／cell／column／header オブジェクトのみを受け取るネストされたコンポーネントでは、描画する状態を購読する必要があります（Subscribe／useSelector）。
• useLegacyTable は一時的な移行用ブリッジとしてのみ扱ってください。すべての機能をバンドルし、状態全体の購読を維持するため、v9 の主なコンポーザビリティの利点には対応していません。
• 列の固定には、論理的な start／end 領域を使用します（left／right ではありません）。集計は独立した rowAggregationFeature であり、columnGroupingFeature とは別の機能です。

検証

まず、リポジトリに既存のチェックがあれば、それを優先してください。TanStack Table に意味のある変更を加える場合は、関連する項目を含めてください。

• 使用する v9 API が利用可能であることを証明するパッケージ／バージョンチェック。
• 機能の登録、列定義、状態スライス、行モデルのスロットに対する型チェック。
• 並べ替え、フィルタリング、ページネーション、選択、セル選択、展開、ピン留め、サイズ変更、セルの結合、サーバークエリとの統合に関する対象を絞ったインタラクションテスト。
• レンダリングされたマークアップ、キーボード／フォーカスの動作、固定または仮想化されたレイアウト、サイズ変更／スクロールのパフォーマンスに関するブラウザースモークテスト。
• 大規模なテーブル、仮想化、列幅の変更に対する本番ビルドまたはプロファイリングの実行。