TanStack Table 【React Table v7 → v8】ページネーションのマイグレーション

こんにちはフロントエンドエンジニアの茶木です。
TanStack Table 便利ですよね。 React Table v7→v8のマイグレーションでページネーションについての勘所を解説しようと思います。

関連記事もありますので良かったらご覧ください

今回のページネーションは、ページごとのデータはページングの要求ごとにAPIなどを使ってサーバーから取得する想定のものです。

v7では

pageCount は 1ページあたりの行数、pageIndex はページ番号、pageSize はページ数です。よくあるのは URLQueryから取得するケースだと思います。

manualPagination は、今回のように、サーバーから1ページ分だけ要求するようなケースで使用します。（ false のときは、取得したデータを React Table でページ分割します）

  const table = useTable(
    {
      columns,
      data,
      manualPagination: true,
      pageCount,
      initialState: {
        pageIndex:,
        pageSize,
      },
    },
    usePagination
  );

v8では

注目点は getPaginationRowModel: getPaginationRowModel() を指定すること、 initialState のメンバーに pagination が必要なことです。

  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    manualPagination: true,
    pageCount,
    initialState: {
      pagination: {
        pageIndex,
        pageSize,
      },
    },
  });

ページネーション情報を取得

table.getState() で pagination が取得できます。

const { pagination } = table.getState();
const { pageIndex, pageSize } = pagination;

ページの移動

v7 と同じようにできます。v7と少し違うのは、canPreviousePage canNextPage がメソッドになって、それぞれ getCanPreviousPage() getCanNextPage() になっているところは注意です。

table.setPageIndex( index )

table.firstPage()
table.previousPage()
table.getCanPreviousPage()

table.lastPage()
table.nextPage();
table.getCanNextPage()

おわりに

息の長いプロジェクトなどは、ライブラリのアップデートなど定期的なメンテナンスが必要になってきますね。Gaji-Labo では、機能開発とのバランスをみて、技術的負債を返済の提案も積極的に行ってエンジニア手動でメンテナンスも進めていきます。