Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Data Table - Numeric Pagination
A React data table with numeric page buttons using TanStack Table getPaginationRowModel showing clickable page numbers with ellipsis
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Traditional Previous/Next isn't enough—numeric pagination lets users jump pages instantly. This React data table uses TanStack Table's getPaginationRowModel with custom getPageNumbers function calculating visible page buttons and ellipsis placement. Built with shadcn/ui Button components featuring current page variant default and others outline. The numeric pagination pattern improves navigation—perfect for invoices, transaction logs, search results, or anywhere multi-page datasets need quick page access without sequential clicking through every page.
| Invoice ID | Client | Date | Status | Amount |
|---|---|---|---|---|
INV-001 | Client 1 | 2024-01-01 | Paid | $3,496.00 |
INV-002 | Client 2 | 2024-01-02 | Overdue | $2,867.00 |
INV-003 | Client 3 | 2024-01-03 | Pending | $2,629.00 |
INV-004 | Client 4 | 2024-01-04 | Overdue | $1,499.00 |
INV-005 | Client 5 | 2024-01-05 | Overdue | $1,924.00 |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Paginated Table
Basic Previous/Next pagination
Basic Data Table
Simple table with checkboxes
Expandable Rows
Nested sub-row content
Table with Filters
Column filtering inputs
Table with Actions
Row action dropdown
Navigation Button Group
Grouped navigation buttons
Questions you might have
React Data Table - Expandable Sub-Rows
A React data table with expandable sub-rows using TanStack Table getExpandedRowModel showing nested child content with ChevronDown toggle
React Data Table - Resizable Columns
A React data table with resizable columns using TanStack Table columnResizeMode and drag handles for dynamic width adjustment