Pagination
Moves through pages of results in a list or table.
Installation
pnpm dlx shadcn@latest add @paneui/paginationUsage
Examples
Accessibility
A nav labelled Pagination; the current page button has aria-current="page", prev / next are disabled at the ends. getPageRange is exported if you build your own.
Pagination
Also accepts every prop of nav.
- size= "default"
- "sm" | "default" | "lg"
- Height of the page buttons, from 24 to 32px.
- page*
- number
- Current page, 1-based.
- pageCount*
- number
- Number of pages.
- onPageChange*
- (page: number) => void
- Called with the page to show (clamped).
- siblings= 1
- number
- Pages either side of the current one before an ellipsis.
- compact= false
- boolean
- Prev / next and a "Page x of y" label only.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Height of the page buttons, from 24 to 32px. |
| page* | number | — | Current page, 1-based. |
| pageCount* | number | — | Number of pages. |
| onPageChange* | (page: number) => void | — | Called with the page to show (clamped). |
| siblings | number | 1 | Pages either side of the current one before an ellipsis. |
| compact | boolean | false | Prev / next and a "Page x of y" label only. |
PaginationSummary
Also accepts every prop of p.
- page*
- number
- Current page.
- pageSize*
- number
- Rows per page.
- total*
- number
- Total rows.
- noun= the locale's
- string
- What is being counted.
| Prop | Type | Default | Description |
|---|---|---|---|
| page* | number | — | Current page. |
| pageSize* | number | — | Rows per page. |
| total* | number | — | Total rows. |
| noun | string | the locale's | What is being counted. |
PaginationPageSize
- size= "default"
- "sm" | "default" | "lg"
- Matches
Pagination; the select is 24, 28 or 32px tall. - value*
- number
- Rows per page.
- onValueChange*
- (size: number) => void
- Called with the new size.
- options= [10, 20, 50]
- number[]
- Choices.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Matches Pagination; the select is 24, 28 or 32px tall. |
| value* | number | — | Rows per page. |
| onValueChange* | (size: number) => void | — | Called with the new size. |
| options | number[] | [10, 20, 50] | Choices. |