import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;
export default App;
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => (
<>
<Pagination align="start" defaultCurrent={1} total={50} />
<br />
<Pagination align="center" defaultCurrent={1} total={50} />
<br />
<Pagination align="end" defaultCurrent={1} total={50} />
</>
);
export default App;
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;
export default App;
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;
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;
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;
import React from 'react';
import { Pagination } from 'antd';
const App: React.FC = () => (
<>
<Pagination simple defaultCurrent={2} total={50} />
<br />
<Pagination simple={{ readOnly: true }} defaultCurrent={2} total={50} />
<br />
<Pagination disabled simple defaultCurrent={2} total={50} />
</>
);
export default App;
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;
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;
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;
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;
import React from 'react';
import { ConfigProvider, Pagination } from 'antd';
const App: React.FC = () => (
<ConfigProvider theme={{ token: { wireframe: true } }}>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
<br />
<Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
<br />
<Pagination size="small" defaultCurrent={50} total={500} />
<br />
<Pagination disabled size="small" defaultCurrent={50} total={500} />
</ConfigProvider>
);
export default App;
import React from 'react';
import type { PaginationProps } from 'antd';
import { ConfigProvider, 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 = () => (
<ConfigProvider
theme={{
components: {
Pagination: {
itemSize: 20,
itemSizeSM: 12,
itemActiveBg: '#e7cc87',
itemLinkBg: '#344324',
itemActiveBgDisabled: '#9c1515',
itemInputBg: '#9c1515',
miniOptionsSizeChangerTop: 0,
itemBg: '#b5f5ec',
},
},
}}
>
<Pagination
showSizeChanger
defaultCurrent={3}
total={500}
itemRender={itemRender}
showQuickJumper
showTotal={(total) => `Total ${total} items`}
/>
<br />
<Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
</ConfigProvider>
);
export default App;
Common props ref:Common props
<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) | - |