Pagination
Paging navigation, used to assist long lists to load only part of the data, you can quickly switch to the specified data page.
Import
import { Pagination } from 'rsuite';
// or
import Pagination from 'rsuite/Pagination';Examples
Basic
Size
Disabled
Used with Link in next/link
Advanced
The layout prop can customize the layout of a paging component. It receives an array parameter and renders according to the order of the values in the array. The default value of layout is ['pager'], and the optional values include: total (total entry input area), pager (page area), limit (entry option area), skip (quick jump page area), - (area placeholder, fill up the remaining space) , | (vertical separator).
Props
<Pagination>
| Property | Type (Default) |
Description |
|---|---|---|
| activePage * | number (1) |
Current page number |
| boundaryLinks | boolean | Show border paging buttons 1 and pages |
| classPrefix | string ('pagination') |
The prefix of the component CSS class |
| disabled | boolean | (eventKey: number) => boolean | Disabled component |
| ellipsis | boolean | Displays the ellipsis |
| first | boolean | Displays the first page |
| last | boolean | Displays the last page |
| layout | LayoutType[] (['pager']) |
Customize the layout of a paging component |
| limit | number (30) |
The number of rows per page.Will use total and limit to calculate the number of pages |
| limitOptions | number[] ([30,50,100]) |
Customizes the options of the rows per page select field. |
| linkAs | ElementType (button) |
Customizes the element type for the component |
| linkProps | object | Additional props passed as-is to the underlying link for non-active items |
| locale | PaginationLocale | Locale text |
| maxButtons | number | Page buttons display the maximum number of |
| next | boolean | Displays the next page |
| onChangeLimit | (limit:number) => void; | Callback fired when the number of rows per page is changed |
| onChangePage | (page:number) => void; | Callback fired when the page is changed |
| prev | boolean | Displays the previous page |
| total * | number | The total number of rows. Generally obtained through the server |
ts:LayoutType
type LayoutType = 'total' | '-' | 'pager' | '|' | 'limit' | 'skip';