行選択と仮想化テーブル

idが'select'の選択列をColumnDef配列に追加します。セルでは、row.getToggleSelectedHandler()に接続したチェックボックスを描画します。ヘッダーでは、table.getToggleAllRowsSelectedHandler()を使って全選択用のチェックボックスを描画します。

さらに、rowSelection状態とonRowSelectionChangeをuseReactTableに渡します。

row.getIsSelected()は、行が現在選択されている場合にtrueを返します。選択された行にハイライトされた背景スタイルを適用するのに適しています。

row.getIsSomeSelected()は、グループ内の一部の行だけが選択されている場合の不確定状態のチェックボックスを処理します（グループ化されたテーブルで便利です）。

table.getSelectedRowModel().rowsは、現在選択されているすべての行オブジェクトの配列を返します。各行には、元のデータオブジェクトを格納するrow.originalプロパティがあります。

これを使うと、「選択項目を削除」や「選択項目をエクスポート」のように、選択された集合を対象とする一括操作ボタンを作成できます。

table.getSelectedRowModel().rows.length > 0に基づいて、操作ボタンを条件付きで描画します。行が選択されていない場合は、空の状態に対する分かりにくい操作を避けるため、一括操作ツールバーを非表示にするか無効にします。

UIには選択件数を表示します。「{count}行を選択中」と表示すれば、ユーザーは選択状況を把握できます。

10,000行をDOMノードとして描画すると、非常に時間がかかります。ブラウザーは何千もの要素をレイアウトし、描画し、管理しなければなりません。その結果、スクロールがぎこちなくなり、初回の描画も遅くなります。

仮想化では、ビューポートに現在表示されている行だけを描画するため、DOMのサイズを大幅に削減し、パフォーマンスを向上させられます。

@tanstack/react-tableとともに@tanstack/react-virtualをインストールします。2つのライブラリは別々ですが、互いに補完するように設計されています。TanStack Tableはデータのロジックを管理し、TanStack VirtualはDOMに描画する項目を管理します。

連携する箇所は、table.getRowModel().rowsから得られる行配列です。

useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 })を呼び出します。countによって仮想アイテムの数が決まり、すべてのフィルター適用後のテーブルの現在の行数と一致します。

estimateSizeは行の初期高さの見積もりを提供し、実際の高さは行の描画時に測定されます。

virtualizer.getVirtualItems()を呼び出すと、現在DOMに含めるべき行だけを取得できます。この配列をmapし、table.getRowModel().rows[virtualRow.index]で実際の行を取得して、それらのtr要素だけを描画します。

各仮想アイテムには、スクロールコンテナ内で絶対位置指定するためのstartプロパティがあります。

正しいスクロール位置を維持するには、最初の仮想アイテムのstartと同じ高さの上部スペーサーdivと、全体のサイズから最後のアイテムのendを引いた高さの下部スペーサーdivを追加します。

これらの見えないdivが、描画されていない行が占めるはずの空間を埋めるため、スクロールバーの比率が正しく保たれます。

動的な行の高さを正確に測定するには、measureElement: el => el.getBoundingClientRect().heightをuseVirtualizerに渡します。各行のrefをtr要素に設定し、仮想化機能が実際に描画された高さを測定できるようにします。

これにより、内容の異なる行（複数行のテキストや展開された行）があっても、レイアウトシフトを防げます。

ソート、フィルタリング、ページネーション、行選択、TanStack Virtualを備えたTanStack Tableは、すべて組み合わせて利用できます。useVirtualizerに渡す行数は、アクティブなすべての行モデルがデータを処理した後のtable.getRowModel().rowsから取得します。

ページネーションを有効にした場合は、最初にページネーションを適用し、その後、現在のページの行を仮想化して、大きなページ内でも滑らかにスクロールできるようにします。

現在選択されているすべての行について、元のデータオブジェクトを返すメソッドはどれですか。

行選択では、getToggleSelectedHandlerを備えたチェックボックス列とrowSelection状態を使用し、table.getSelectedRowModel().rowsで選択されたデータにアクセスします。useVirtualizerによる仮想化では、getVirtualItems、スペーサーdiv、必要に応じた動的な高さ用のmeasureElementを使って、表示中の行だけを描画します。

TanStack Tableのすべての機能（ソート、フィルタリング、ページネーション、選択）は、仮想描画と自然に組み合わせられます。