ソート、フィルタリング、ページネーション

ソートを追加するには、getSortedRowModelをインポートし、useReactTableの設定に追加します。また、ソート状態（{id, desc}オブジェクトの配列）と、Reactの状態に接続するonSortingChangeハンドラーも必要です。

ソート済み行モデルはコア行モデルをラップし、現在のソート状態に基づいて行の順序を変更します。

各列ヘッダーにはcolumn.getToggleSortingHandler()が用意されています。これをth要素のonClickに割り当てます。クリックするたびに、昇順、降順、ソートなしの状態が順番に切り替わります。

column.getIsSorted()は'asc'、'desc'、またはfalseを返すため、適切なソート方向の矢印を表示できます。

TanStack Tableでは、複数の列を同時にソートできます。ユーザーがShiftキーを押しながら2つ目の列ヘッダーをクリックすると、最初の列を削除せずにソート配列へ追加できます。

sortingState配列には、優先順位順にすべてのアクティブなソート列が含まれ、ソート済み行モデルはそれらを順番に適用します。

グローバルフィルタリングを有効にするには、getFilteredRowModelをインポートし、globalFilter状態とonGlobalFilterChangeハンドラーを追加します。入力要素を状態に接続すると、すべての列を一度に対象としてフィルタリングできます。

グローバルフィルターでは、デフォルトであいまい一致またはincludes方式が使用され、filterFnsで設定を変更できます。

各列では、column.getFilterValue()とcolumn.setFilterValue()を使って独自のフィルターを提供できます。各列ヘッダーの下にフィルター入力欄を追加し、これらのメソッドに接続します。

列フィルターとグローバルフィルターは重ねて適用されます。フィルタリング済み行モデルに表示されるには、行が有効なすべてのフィルターを通過する必要があります。

getPaginationRowModelをインポートし、pagination状態オブジェクト（pageIndexとpageSize）およびonPaginationChangeハンドラーとともにuseReactTableの設定へ追加します。

ページネーション行モデルは、フィルタリング済み（およびソート済み）の行を分割し、現在のページに該当する部分だけを取り出します。

テーブルインスタンスには、移動用のtable.nextPage()、table.previousPage()、table.firstPage()、table.lastPage()が用意されています。境界に到達したときは、table.getCanNextPage()とtable.getCanPreviousPage()を使ってボタンを無効にします。

table.setPageIndex(n)を使うと特定のページへ直接移動でき、table.setPageSize(n)を使うと1ページに表示する行数を変更できます。

table.getPageCount()は、フィルタリング後の行数をpageSizeで割って、ページの総数を返します。table.getState().pagination.pageIndexは、現在の0始まりのページインデックスを示します。

これらの値を使って、ページネーションUIに「12ページ中3ページ目」のようなページ番号を表示できます。

行モデルは組み合わせて利用できます。getCoreRowModelが基盤を提供し、getFilteredRowModelがそれをラップしてフィルターを適用し、getSortedRowModelがフィルタリング済みのデータをラップしてソートを適用し、getPaginationRowModelが結果を現在のページ用に分割します。

順序が重要です。フィルタリングの後にソートが行われ、最後にページネーションが行われます。

TanStack Tableは、行モデルの計算結果を内部でメモ化します。変更された行モデルだけが再計算されるため、大規模なデータセットでもソートとフィルタリングを効率的に実行できます。

非常に大規模なデータセット（100,000行以上）では、ページネーションと仮想化（react-virtual）を組み合わせ、ページ内のすべての行を一度にレンダリングしないようにします。

getSortedRowModelをソート状態に、getFilteredRowModelをglobalFilterおよび列フィルターの状態に、getPaginationRowModelをページネーション状態に接続します。各機能はオプトイン方式で、他の機能と自然に組み合わせられます。

列ヘッダーではgetToggleSortingHandlerでソートを操作し、入力欄ではsetFilterValueとonGlobalFilterChangeでフィルターを操作し、ボタンではnextPage、previousPage、setPageIndexでページネーションを操作します。

TanStack Tableのページネーション状態で、現在のページインデックスとページサイズを保持するオブジェクトはどれですか。

ソートにはgetSortedRowModel、ソート状態、列ヘッダーのクリックハンドラーが必要です。フィルタリングには、グローバルおよび列ごとのフィルター状態とともにgetFilteredRowModelを使用します。ページネーションには、pageIndexとpageSizeの状態とともにgetPaginationRowModelを使用します。

3つの行モデルはすべて自動的に組み合わされます。最初にフィルタリング、次にソート、最後にページネーションが行われます。