Pagination

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

Importimport { Pagination } from "antd";

Docs

When To Use

Common props ref：Common props

jsx

<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	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)	-

Component TokenHow to use?

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

Global TokenHow to use?

contributors