components/pagination/index.en-US.md
<code src="./demo/basic.tsx">Basic</code> <code src="./demo/align.tsx" version="5.19.0">Align</code> <code src="./demo/more.tsx">More</code> <code src="./demo/changer.tsx">Changer</code> <code src="./demo/jump.tsx">Jumper</code> <code src="./demo/mini.tsx">Size</code> <code src="./demo/simple.tsx">Simple mode</code> <code src="./demo/controlled.tsx">Controlled</code> <code src="./demo/total.tsx">Total number</code> <code src="./demo/all.tsx">Show All</code> <code src="./demo/itemRender.tsx">Prev and next</code> <code src="./demo/wireframe.tsx" debug>Wireframe</code> <code src="./demo/component-token.tsx" debug>component Token</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
Common props ref：Common props
<Pagination onChange={onChange} total={50} />
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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> | - | 6.0.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 | 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 | boolean | SelectProps | - | SelectProps: 5.21.0 | 4.21.0, 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 | Component size | large | medium | small | medium | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| total | Total number of data items | number | 0 | × | |
| totalBoundaryShowSizeChanger | When total larger than it, showSizeChanger will be true | number | 50 | 6.2.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) | - | × |
<code src="./demo/_semantic.tsx" simplify="true"></code>
<ComponentTokenTable component="Pagination"></ComponentTokenTable>