A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.
Basic pagination.
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;
export default App;
More pages.
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;
export default App;
Change pageSize.
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
console.log(current, pageSize);
};
const App: React.FC = () => (
<>
<Pagination
showSizeChanger
onShowSizeChange={onShowSizeChange}
defaultCurrent={3}
total={500}
/>
<br />
<Pagination
showSizeChanger
onShowSizeChange={onShowSizeChange}
defaultCurrent={3}
total={500}
disabled
/>
</>
);
export default App;
Jump to a page directly.
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
const onChange: PaginationProps['onChange'] = (pageNumber) => {
console.log('Page: ', pageNumber);
};
const App: React.FC = () => (
<>
<Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
<br />
<Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
</>
);
export default App;
Mini size pagination.
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
const showTotal: PaginationProps['showTotal'] = (total) => `Total ${total} items`;
const App: React.FC = () => (
<>
<Pagination size="small" total={50} />
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
<Pagination size="small" total={50} showTotal={showTotal} />
<Pagination
size="small"
total={50}
disabled
showTotal={showTotal}
showSizeChanger
showQuickJumper
/>
</>
);
export default App;
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
margin-bottom: 24px;
}Simple mode.
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => (
<>
<Pagination simple defaultCurrent={2} total={50} />
<br />
<Pagination disabled simple defaultCurrent={2} total={50} />
</>
);
export default App;
Controlled page number.
import React, { useState } from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
const App: React.FC = () => {
const [current, setCurrent] = useState(3);
const onChange: PaginationProps['onChange'] = (page) => {
console.log(page);
setCurrent(page);
};
return <Pagination current={current} onChange={onChange} total={50} />;
};
export default App;
You can show the total number of data by setting showTotal.
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => (
<>
<Pagination
total={85}
showTotal={(total) => `Total ${total} items`}
defaultPageSize={20}
defaultCurrent={1}
/>
<br />
<Pagination
total={85}
showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
defaultPageSize={20}
defaultCurrent={1}
/>
</>
);
export default App;
Show all configured prop.
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => (
<Pagination
total={85}
showSizeChanger
showQuickJumper
showTotal={(total) => `Total ${total} items`}
/>
);
export default App;
Use text link for prev and next button.
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
if (type === 'prev') {
return <a>Previous</a>;
}
if (type === 'next') {
return <a>Next</a>;
}
return originalElement;
};
const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;
export default App;
<Pagination onChange={onChange} total={50} />
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| 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) | - |