Skip to main content

Pagination

Pagination State​

  • Create a state for pagination
const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: 10
});

Create Pagination Row Model​

  • Pass pagination state to useReactTable
const table = useReactTable({
  data,
  columns,
  getPaginationRowModel: getPaginationRowModel(),
  onColumnPinningChange: setColumnPinning,
  state: {
    pagination
  }
});

Update Pagination State​

<button
  onClick={() => {
    setPagination((prev) => ({
      ...prev,
      pageIndex: prev.pageSize + 10
    }));
  }}
>
  Next Page
</button>