Pagination

Separates long lists into pages.

When to use

Use Pagination when loading or displaying every record at once would be inefficient or difficult to scan.

Examples

Basic

Basic pagination.

Align

More pages.

Changer

Change pageSize.

Jumper

Jump to a page directly.

Size

Small and large size pagination.

Simple mode

Simple mode.

Controlled

Controlled page number.

Total number

You can show the total number of data by setting showTotal.

Show All

Show all configured prop.

Prev and next

Use text link for prev and next button.

Custom component

Replace the page size changer with components.

Custom semantic dom styling

You can customize the semantic dom style of Pagination by passing objects/functions through classNames and styles.

API

Pagination and PaginationProps are exported from @ceebee/ui/client.

Pagination

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>`	`-`	—
`components`	Customize internal components	`{ sizeChanger?: React.ComponentType }`	`-`	6.6.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
`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>`	`-`	—
`total`	Total number of data items	`number`	`0`	—
`totalBoundaryShowSizeChanger`	When total larger than it, showSizeChanger will be true	`number`	`50`	—
`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)`	`-`	—

Enter or Space on a previous or next arrow advances one page. The inner native button does not also trigger the parent list item's keyboard handler, so one key press produces one page change. Pointer behavior, disabled state, and the outer page-item keyboard targets stay with Ant Design.