tanstack-table-nextjs

name

tanstack-table-nextjs

description

Next.js/ReactでTanStack Table v8/latest（@tanstack/react-table）を使った型安全なデータテーブルを実装・修正・レビューするときに使う。App Router/Pages Router、Client Component境界、columns/data/useReactTable、ColumnDef、Table/Header/Row/Cell、sorting/filtering/faceting/pagination/row-selection/visibility/ordering/pinning/sizing/grouping/expanding/row-pinning/virtualization/server-side/manual mode/URL search params/row actions/editable cellsを扱う依頼で発動する。

TanStack Table for Next.js Skill

このSkillは、Next.jsでTanStack Tableを使う実装を、公式ドキュメントに沿って漏れなく組み立てるための手順パッケージです。 TanStack Tableはヘッドレスなので、DOM・スタイル・UI部品はプロジェクト側で用意します。

必ず守ること

1. TanStack TableはUIコンポーネント集ではない。<Table>や<Button>などの完成済みUIを前提にせず、table/header/row/cellなどのAPIを使って自分でマークアップを描画する。
2. Next.js App RouterではClient境界を明示する。useReactTable、useState、イベントハンドラ、ブラウザAPI、インタラクティブな列ヘッダー・行アクション・チェックボックスを含むファイルはClient Component側に置く。
3. Server Componentでデータ取得し、Client Componentへシリアライズ可能なpropsとして渡す。DBクライアント、シークレット、サーバー専用処理をClient bundleへ混ぜない。
4. 最初に行データ型を定義する。type User = ...などのTDataを決め、ColumnDef<TData>[]、DataTable<TData, TValue>に伝播させる。
5. dataとcolumnsは安定参照を意識する。無限再レンダーを避けるため、コンポーネント外定義、useMemo、または親からの安定propsを使う。
6. getCoreRowModel()は必須。追加機能ごとに必要なrow modelだけをimportする。
7. client-sideとserver-side/manual modeを混ぜない。サーバー側で並び替え・絞り込み・ページングする場合はmanualSorting、manualFiltering、manualPaginationなどを使い、対応するclient row modelを無条件に足さない。
8. 列定義の3分類を区別する。Accessor Column、Display Column、Grouping Columnを用途で使い分ける。