TanStack TableによるReactデータテーブルのサンプル集
Reactデータテーブルのサンプル集：TanStack Table v9とTailwind | We.Inc
型チェック済みのTanStack Table v9によるReactのサンプル集です。並べ替え、全体検索、ページ送り、行の選択、列の表示切り替え、固定ヘッダー、サーバー側のデータを扱い、Tailwindでスタイルを付けています。
TanStack TableによるReactデータテーブルのサンプル集
TanStack Tableは、見た目を持たないヘッドレスなReact向けテーブルライブラリーです。並べ替え、絞り込み、ページ送り、選択の処理を担い、マークアップは自分で書きます。バージョン9では、各機能をtableFeaturesで登録し、ブラウザー側で行う処理ごとに行モデルを追加して、useTableを呼び出し、ヘッダーとセルをFlexRenderで描画します。以下のサンプルは9.3に対して型チェック済みです。
方法を選ぶ
- 数百から数千
- TanStack Table（クライアント側）
- 数万以上
- 手動（サーバー側）の並べ替えとページ送りを使ったTanStack Table
完成したテーブルを試してから、それを組み立てるコードをコピーしましょう。ページを軽く保つため、このページのプレビューは素のReactの状態管理で描いています。横に表示しているコードは、あなたのアプリで同じ動きをするTanStack v9版です。
- @tanstack/react-tableをインストールします。
- 必要な機能をtableFeaturesに列挙し、ブラウザー側で行う処理ごとに行モデルの枠を用意します。
- コンポーネントの外で、createColumnHelperを使って列を定義します。
- 機能、列、データを渡してuseTableを呼び出します。
- 独自のマークアップとFlexRenderで、ヘッダーグループと行を描画します。
- getRowIdで行に安定したidを付けましょう。並べ替えや再取得のあとも選択状態が保たれます。
- 列を非表示にできるようにしたら、getAllCells()ではなくrow.getVisibleCells()を描画しましょう。
- データが空のときの代替値は、コンポーネントの外で一度だけ定義しましょう。描画のたびに新しい[]を作ると、行モデルが無効になってしまいます。
- キーボードで操作できるよう、並べ替えできる各thの中に並べ替えボタンを置きましょう。
- 数値や日付の書式はセルの関数の中で整えましょう。そうすれば、並べ替えには元の値がそのまま使われます。
よくある質問
React TableとTanStack Tableは同じものですか？
はい。react-table v7は、v8からTanStack Tableに名前が変わり、@tanstack/react-tableとして公開されています。バージョン9もヘッドレスという考え方はそのままですが、機能を明示的に登録する必要があり、そのおかげでバンドルが小さく保たれます。
TanStack Tableにスタイルは含まれていますか？
いいえ。提供されるのは状態と行モデルだけです。table、th、tdの各要素は自分で書き、Tailwind、CSS、またはshadcn/uiのようなコンポーネントライブラリーでスタイルを付けます。
並べ替えやページ送りはサーバー側で行うべきですか？
データ全体が大きすぎてブラウザーに送れない場合は、そうすべきです。manualの各オプションを設定し、並べ替えとページの状態をAPIに送って、ページ送りの操作が正しく動くよう行の総数を渡します。
スクロールしてもヘッダーを表示したままにするには？
囲み要素に最大の高さとoverflow autoを指定し、theadをtop 0のstickyにして、行が透けて見えないよう背景色を付けます。
できあがったスタイルを使う
- 完成したデザインから始めたい場合は、当サイトのコンポーネントギャラリーに、並べ替え、検索、行の選択、ページ送りを備えたTailwindのデータテーブルがあり、ReactまたはHTMLとしてコピーできます。shadcn/uiのプロジェクトなら、当サイトのshadcnのフォームとテーブルのガイドをご覧ください。
よくある間違い
- コンポーネントの中でメモ化せずに列を宣言すること。描画のたびにテーブルが作り直されます。
- manualPaginationを有効にしたのに、すべての行を渡し続けること。最初のページにすべてが表示されてしまいます。
- 独自の並べ替え関数の中で順序を逆にすること。昇順の比較結果を返しましょう。降順にはライブラリーが反転してくれます。
TanStack Tableを準備する
インストール
パッケージは1つだけです。スタイルを持たず、それ自体では何も描画しません。テーブルのマークアップは自分で書くので、Tailwindとの相性が抜群です。
動作する最小のテーブル
機能は最初に列挙し、一度だけ渡します。機能、列、データの配列は（コンポーネントの外か状態の中に置いて）安定させましょう。そうしないと、テーブルが描画のたびに行を作り直します。
機能と行モデル
動作ごとに登録するもの（v9）
- ヘッダーをクリックして並べ替え
- rowSortingFeature
- sortedRowModel: createSortedRowModel()
- 全列を対象にした検索ボックス
- columnFilteringFeature + globalFilteringFeature
- filteredRowModel: createFilteredRowModel()
- 列ごとの絞り込み
- columnFilteringFeature
- filteredRowModel: createFilteredRowModel()
- 行のページ分け
- rowPaginationFeature
- paginatedRowModel: createPaginatedRowModel()
- チェックボックスによる選択
- rowSelectionFeature
- なし
- 列の表示と非表示
- columnVisibilityFeature
- なし
- 処理をサーバーに任せる
- 同じ機能
- 枠は不要。manualSorting、manualFiltering、manualPaginationを設定
完全なデータテーブル
並べ替え、検索、ページ送り、選択、列の非表示、固定ヘッダー
すべてを1つのコンポーネントにまとめ、Tailwindのクラスでスタイルを付けています。囲み要素がスクロールし、theadがstickyなので、ヘッダー行は同じ位置にとどまります。aria-sortは、列がどちらの向きに並べ替えられているかをスクリーンリーダーに伝えます。
サーバー側のデータ
サーバー側での並べ替えとページ送り
大きなデータセットでは、サーバーが並べ替えて1ページ分を返します。行モデルの枠は省き、manualのフラグを設定して、何ページあるかをテーブルが把握できるようrowCountを渡します。並べ替えとページの状態がリクエストの内容を決めます。
v8からのアップグレード
v8から移行する場合
- useReactTable({ getCoreRowModel: getCoreRowModel(), ... })
- useTable({ features, ... }); コアの行モデルは自動で用意される
- getSortedRowModel: getSortedRowModel()
- tableFeaturesにrowSortingFeatureとsortedRowModel: createSortedRowModel()を指定
- flexRender(cell.column.columnDef.cell, cell.getContext())
- <table.FlexRender cell={cell} />（flexRenderも引き続き使える）
- 既定ですべてがバンドルされる
- 登録した機能だけがバンドルされる
スタイル付きの完成版をコピーしたいですか？こちらをご覧ください：
TailwindのReactデータテーブルコンポーネント
顧客
状態
合計
支払い済み
保留中
返金済み
注文を検索
このページのすべての行を選択
注文 {id} を選択
一致する注文はありません。
前へ
{p} / {n} ページ
次へ
{n} 件を選択中
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る