Pagination
Use pagination to control the amount of information in a single page.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: The simplest usage.
- More: More pages.
- Change pageSize: The pageSize of Pagination can be changed.
- Jump: Enter the page number to quickly jump to the specified page.
- Size: Set
sizefield to use different sizes. - Simple: When page space is limited, you can set
simpletotrue. - Show Total: Set
showTotalto show the total number of data. - Count under control: By changing the value of
total, solve the situation where the total number of pages cannot be calculated. - Show all: Show all configuration items.
- Customize style: Customize style to get different visual styles.
- Previous and next: Set the
itemRenderto customize the pagination buttons. - Display length when page numbers are omitted: With
bufferSizeyou can set the number of pages between thecurrentpage and.... An...means at least2pages are omitted.
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Pagination
| Property | Description | Type | DefaultValue | Version |
|---|---|---|---|---|
| disabled | Whether to disable | boolean | - | - |
| hideOnSinglePage | Whether to hide when there is only one page | boolean | - | 2.6.0 |
| pageSizeChangeResetCurrent | When pageSize changes, resets the current page number to 1 | boolean | true | - |
| showJumper | Whether to display quick jump. Defaults to true in simple mode | boolean | - | - |
| showMore | Whether to show more page number tips (can be used when the total number of data cannot be calculated yet) | boolean | - | - |
| simple | Whether to use simplified pagination mode | boolean | - | - |
| sizeCanChange | Is it possible to change page size | boolean | - | - |
| bufferSize | the number of pages between the current page and ... | number | 2 | 2.32.0 |
| current | Current page | number | - | - |
| defaultCurrent | To set default current page | number | - | - |
| defaultPageSize | To set default number of data per page | number | - | - |
| pageSize | Number of data items per page | number | - | - |
| total | Total number of data | number | - | - |
| itemRender | Customized pagination button structure | (page: number,type: 'page' | 'more' | 'prev' | 'next',originElement: ReactNode) => ReactNode | - | - |
| size | pager size | 'mini' | 'small' | 'default' | 'large' | - | - |
| activePageItemStyle | The style of the selected page button | CSSProperties | - | - |
| className | Additional css class | string | string[] | - | - |
| icons | Set icon of the pager | {prev?: ReactNode;next?: ReactNode;more?: ReactNode;} | - | - |
| pageItemStyle | Pagination button style | CSSProperties | - | - |
| selectProps | Props of the Select | Partial<SelectProps> | - | - |
| sizeOptions | The number of data items that can be displayed per page | number[] | - | - |
| style | Additional style | CSSProperties | - | - |
| onChange | Callback when page changes | (pageNumber: number, pageSize: number) => void | - | - |
| onPageSizeChange | Callback when pageSize changes | (size: number, current: number) => void | - | - |
| showTotal | Whether to display the total number of data | boolean | ((total: number, range: number[]) => ReactNode) | - | - |