GitHub

Go to...

Choose a page to open.

Page controls for a table, with a row range, a page size select, and page buttons.

Data Table Pagination

data-table-pagination-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/data-table-pagination.json

Usage

import { DataTablePagination } from "@/components/data-table-pagination";
<DataTablePagination
  page={page}
  pageSize={pageSize}
  total={128}
  itemName="invoices"
  onPageChange={setPage}
  onPageSizeChange={setPageSize}
/>

The component is controlled. page starts at 1. The page size is one of 10, 20, 30, 40, or 50. Reset page to 1 when the page size changes.