Updating Table Hooks from V7 to V8

This example demonstrates how to update custom hooks from React Table V7 to TanStack Table V8, focusing on converting useTable and usePagination hooks to their new syntax.

// V7: Importing useTable and usePagination from react-table
import { useTable, usePagination } from 'react-table';

This is how we used to import and use the hooks in React Table V7 for basic table setup and pagination.

// V8: Importing useReactTable from @tanstack/react-table
import { useReactTable } from '@tanstack/react-table';

In TanStack Table V8, we import useReactTable, which encompasses all functionalities including pagination.

// V7: Setup table instance with useTable hook
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }, usePagination);

This is the way to configure the table instance in V7, including pagination.

// V8: Setup table instance with useReactTable and specify features including pagination
const table = useReactTable({
  columns,
  data,
  pageCount: controlledPageCount,
  getCoreRowModel: getCoreRowModel(),
  onPaginationChange: setPagination,
  state: {
    pagination: { pageIndex, pageSize }
  }
});

In V8, the setup is streamlined into a single hook, with pagination and other functionalities controlled through options.