Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Data Table examples · Advanced

Numeric Pagination Data Table for React

A table of invoices with numbered page buttons between Previous and Next.

Framework
UI library

Twenty-five invoices, five per page, with a button for each page between Previous and Next. The current page is a solid button and the rest are outlined; with more than seven pages the row keeps the first, the last and the neighbors of the current page, with an ellipsis for the gaps. Use it when people jump between pages rather than step through them.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When does the ellipsis show?

getPageItems returns every page when there are seven or fewer, so these five pages all show. With more, it keeps the first and last pages and the ones around the current page, and puts an ellipsis where pages are skipped.

What happens when I click a page number?

The button calls table.setPageIndex(page). The current page uses variant="default" and aria-current="page"; the others use variant="outline". The ellipsis is text hidden from screen readers, not a button.

How many rows are on a page?

Five: initialState.pagination sets pageSize to 5, with rowPaginationFeature and createPaginatedRowModel(). Call table.setPageSize to change it; this demo has no page-size control.

Are Previous and Next still there?

Yes. They call table.previousPage() and table.nextPage() and are disabled at either end from getCanPreviousPage() and getCanNextPage().

Where is the current page stored?

In the table. The component reads table.state.pagination.pageIndex and table.getPageCount() on every render. Keep it in the URL yourself if a reload should land on the same page.

Can I move between pages from the keyboard?

Every page number, Previous and Next is a button, so Tab reaches them and Enter or Space activates them. The buttons sit in a nav labeled Pagination, and each number is labeled with its page.

All 8 data table examples