Data Pagination

A pagination footer over a consumer-owned useReactTable() instance — selection count, rows-per-page select, page indicator, and first/prev/next/last controls.

DataPagination is a headless-composition component over the same useReactTable() instance you'd pass to Data Grid, Data Filter, and Data Search — a sibling toolbar control, not a prop on any of them. It drives TanStack's own pagination state; it never slices rows itself.

Installation

pnpm dlx shadcn@latest add @syncblocks/data-pagination

Usage

import { DataPagination } from "@/components/ui/data-pagination"

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})

<DataPagination table={table} />

getPaginationRowModel() is required — without it table.getRowModel() returns every row and the controls page through nothing.

Inside Data Grid you don't render it yourself: the grid appends DataPagination automatically whenever the table it's given has a getPaginationRowModel, the same way it only offers search and filters when a filtered row model is present.

Features

• Selection count — N of M row(s) selected, counted against the filtered row model so it reflects what's actually reachable. On a table with enableRowSelection: false it degrades to a plain M row(s) count instead of a permanent "0 of M selected".
• Rows per page — a select bound to table.setPageSize(). Override the choices with pageSizeOptions.
• Page indicator — Page X of Y. An empty table reads "Page 1 of 1" rather than TanStack's raw "of 0".
• First / previous / next / last — laid out in the shadcn Pagination nav/list structure, disabled at the boundaries via getCanPreviousPage() / getCanNextPage(), each with an explicit aria-label since they're icon-only. They're Buttons rather than PaginationLink/PaginationNext: those render an <a> with no href, which can't be disabled or activated from the keyboard — and paging a client-side table isn't navigation.

API Reference