shadcn.io is not affiliated with official shadcn/ui
Data Table examples · Standard
Paginated Data Table for React
A table of transactions, five per page, with Previous and Next buttons and the current page number.
Eight transactions split into pages of five, with Page 1 of 2 on one side and Previous and Next on the other. TanStack Table's pagination keeps the page; the buttons step through it and turn off at either end. Use it for histories, logs and any list longer than a screen.
Preview
Installation
FAQ
How many rows are on a page?
Five: initialState.pagination sets pageSize to 5, and getRowModel() returns that page through rowPaginationFeature and createPaginatedRowModel(). Call table.setPageSize to change it.
How do Previous and Next work?
They call table.previousPage() and table.nextPage(), and each is disabled when getCanPreviousPage() or getCanNextPage() is false.
What does the page label read?
Page, then table.state.pagination.pageIndex + 1, of table.getPageCount(). The index starts at zero, so the label adds one.
Is the page index stored outside the table?
No, only initialState is passed and the table keeps the page. Read it from table.state.pagination or listen with onPaginationChange to sync it with the URL.
Related
- Numeric Pagination Data TableA table of invoices with numbered page
- Basic Data Table with CheckboxesA table of products with a checkbox on
- Data Table with FiltersA table of users with two inputs that
- Pagination Button GroupPagination in a button group with
- Data Table with Column VisibilityA table of orders with a Columns menu
- Expandable Sub-Rows Data TableA table of projects where each row