列の定義と行のレンダリング

TanStack Tableの各列は、ColumnDefオブジェクトで定義します。最も重要なフィールドは、accessorKey（データオブジェクトのプロパティ名）とheader（列ラベルの文字列またはレンダー関数）です。

accessorKeyはフラットなデータに適しています。複雑な値や計算値にはaccessorFnが必要です。

データにnameやemailのような直接参照できるプロパティがある場合は、accessorKey: 'name'を使用します。firstNameとlastNameを結合するなど、値を計算する必要がある場合は、accessorFn: row => row.firstName + ' ' + row.lastNameを使用します。

行データのジェネリック型をColumnDefに指定すれば、どちらも完全に型付けされます。

ColumnDefのcellフィールドには、セルのコンテキストを受け取り、JSXを返す関数を指定できます。これにより、セル内にバッジ、ボタン、画像、その他のカスタムUIをレンダリングできます。

単純なテキスト値であればcell.renderValue()で十分です。より複雑な表示では、cell.getContext()から情報を分割代入します。

レンダリングのたびに再作成されるのを避けるため、columnsはコンポーネントの外側で定義します。その配列をdataおよびgetCoreRowModelとともにuseReactTableへ渡します。

ColumnDefにデータ型を指定すると、TypeScriptが列の型を推論するため、accessorKeyの値で補完が利用できます。

getCoreRowModelは、@tanstack/react-tableからインポートするファクトリ関数です。その戻り値をuseReactTableに渡すことで、データ配列から基本的な行のリストを構築する方法をテーブルインスタンスに伝えます。

ソート済み、フィルタリング済み、ページネーション済みの行モデルなど、追加の行モデルは、別のモデルファクトリを渡して上に組み重ねます。

table.getHeaderGroups()を呼び出し、その結果をmapしてtheadをレンダリングします。各ヘッダーグループにはheaders配列があり、各ヘッダーには列定義とidがあります。

flexRender(header.column.columnDef.header, header.getContext())を使用すると、文字列でもJSXを返す関数でも、ヘッダーコンテンツをレンダリングできます。

table.getRowModel().rowsを呼び出し、各行をmapしてtr要素を生成します。その中でrow.getVisibleCells()を呼び出し、各セルをtdにmapします。

flexRender(cell.column.columnDef.cell, cell.getContext())を使用すると、列に定義されたカスタムセルレンダラーを反映してセルの内容をレンダリングできます。

flexRenderは、Reactコンポーネント、JSXを返す関数、または単純な値のいずれかを受け取り、一貫した方法でレンダリングするヘルパーです。これにより、列定義のヘッダーやセルに、単純な文字列と完全なレンダー関数のどちらも使用できます。

この統一されたAPIにより、レンダリング前に定義の型を確認する必要がありません。

cell.renderValue()は、accessorの値を文字列として整形した結果を返します。より細かく制御する場合は、cell.getContext()から、行、列、テーブルインスタンス、元の値を含む完全なレンダリングコンテキストを取得できます。

カスタムセルレンダラーは、このコンテキストを使って、単一のaccessor値を超えた関連する行データにアクセスします。

各ColumnDefにはmetaフィールドがあり、isSticky: trueやalignment: 'right'のような任意のメタデータを付加できます。レンダラーではcolumn.columnDef.metaを通じてアクセスします。

列を左または右に固定するには、TanStack Tableが列オブジェクト上で列固定の状態とヘルパーメソッドを提供します。

accessorKey、header、必要に応じてcellを含むColumnDef配列を定義します。data、columns、getCoreRowModelを指定してuseReactTableを呼び出します。getHeaderGroupsをmapしてtheadを、getRowModel().rowsをmapしてtbodyを生成し、flexRenderで各ヘッダーとセルをレンダリングします。

この最小限の構成で、完全に機能し、スタイルも自由に設定できるテーブルが完成します。

TanStack Tableの列定義で、accessorKeyではなくaccessorFnを使うべきなのはどのような場合でしょうか。

列は、直接参照できるフィールドにはaccessorKeyを、計算値にはaccessorFnを指定したColumnDefで定義します。columnsとgetCoreRowModelをuseReactTableに渡し、ヘッダーにはgetHeaderGroupsを、ボディ行にはgetRowModel().rowsを使ってレンダリングします。

flexRenderユーティリティにより、文字列による定義と関数によるヘッダーおよびセルの定義を、同じ方法で扱えます。