Importimport{ Pagination }from"antd"; |
Sourcecomponents/pagination |
Common props ref：Common props
<Pagination onChange={onChange} total={50} />
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | Align | start | center | end | - | 5.19.0 |
| 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 | string[] | 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 | |
| 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 |
Basic pagination.
More pages.
Change pageSize.
Jump to a page directly.
Mini size pagination.
Simple mode.
Controlled page number.
You can show the total number of data by setting showTotal.
Show all configured prop.
Use text link for prev and next button.
Wireframe style.
Component Token Debug.
