Shadcn.io is not affiliated with official shadcn/ui
Numeric Pagination
A React data table with numeric page buttons using TanStack Table getPaginationRowModel showing clickable page numbers with ellipsis
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.
Numeric Pagination preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.