Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Paginated Data Table
A React data table with pagination controls using TanStack Table getPaginationRowModel and shadcn/ui Button for Previous/Next navigation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Long lists overwhelm users—pagination breaks data into digestible chunks. This React data table uses TanStack Table's getPaginationRowModel with initialState pageSize 5 showing Previous and Next buttons with disabled state management. Built with shadcn/ui Button and Table components featuring page counter and sm size variant. The pagination pattern improves performance—perfect for transaction histories, product listings, user tables, or anywhere datasets exceed comfortable single-page viewing reducing DOM size and improving load times through chunked data presentation.
| ID | Description | Date | Status | Amount |
|---|---|---|---|---|
TXN-001 | Payment received | 2024-01-15 | Completed | $500.00 |
TXN-002 | Subscription renewal | 2024-01-16 | Completed | $29.00 |
TXN-003 | Refund processed | 2024-01-17 | Completed | -$150.00 |
TXN-004 | Product purchase | 2024-01-18 | Pending | $89.99 |
TXN-005 | Service fee | 2024-01-19 | Completed | $12.00 |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Numeric Pagination
Clickable page numbers with ellipsis
Basic Data Table
Checkboxes and sorting
Table with Filters
Column filtering inputs
Navigation Button Group
Grouped navigation buttons
Column Visibility
Toggle column visibility
Expandable Rows
Nested sub-row content
Questions you might have
React Data Table with Column Visibility
A React data table with column visibility toggle using TanStack Table VisibilityState and shadcn/ui DropdownMenuCheckboxItem controls
React Date Picker with Range
A React date range picker displaying two months side-by-side for selecting start and end dates in booking flows and analytics dashboards