Pagination

A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

When To Use

Common props ref：Common props

<Pagination onChange={onChange} total={50} />

Property	Description	Type	Default
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	-
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	-
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

A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

Common props ref：Common props

<Pagination onChange={onChange} total={50} />

Property	Description	Type	Default
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	-
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	-
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