Importimport { Pagination } from "antd"; |
Docs |
contributors
Common props ref：Common props
<Pagination onChange={onChange} total={50} />
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | Align | start | center | end | - | 5.19.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| current | Current page number | number | - | |
| defaultCurrent | Default initial page number | number | 1 | |
| defaultPageSize | Default number of data items per page | number | 10 | |
| disabled | Disable pagination | boolean | - | |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |
| itemRender | To customize item's innerHTML | (page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode | - | |
| pageSize | Number of data items per page | number | - | |
| pageSizeOptions | Specify the sizeChanger options | number[] | [10, 20, 50, 100] | |
| responsive | If size is not specified, Pagination would resize according to the width of the window | boolean | - | |
| showLessItems | Show less page items | boolean | false | |
| showQuickJumper | Determine whether you can jump to pages directly | boolean | { goButton: ReactNode } | false | |
| showSizeChanger | Determine whether to show pageSize select, it will be true when total > 50 | boolean | SelectProps | - | SelectProps: 5.21.0 |
| showTitle | Show page item's title | boolean | true | |
| showTotal | To display the total number and range | function(total, range) | - | |
| simple | Whether to use simple mode | boolean | { readOnly?: boolean } | - | |
| size | Specify the size of Pagination, can be set to small | default | small | default | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | |
| total | Total number of data items | number | 0 | |
| onChange | Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - | |
| onShowSizeChange | Called when pageSize is changed | function(current, size) | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| itemActiveBg | Background color of active Pagination item | string | #ffffff |
| itemActiveBgDisabled | Background color of disabled active Pagination item | string | rgba(0,0,0,0.15) |
| itemActiveColorDisabled | Text color of disabled active Pagination item | string | rgba(0,0,0,0.25) |
| itemBg | Background color of Pagination item | string | #ffffff |
| itemInputBg | Background color of input | string | #ffffff |
| itemLinkBg | Background color of Pagination item link | string | #ffffff |
| itemSize | Size of Pagination item | number | 32 |
| itemSizeSM | Size of small Pagination item | number | 24 |
| miniOptionsSizeChangerTop | Top of Pagination size changer | number | 0 |