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

When it will take a long time to load/render all items.
If you want to browse the data by navigating through pages.

Examples

Basic pagination.

TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;

export default App;

More pages.

TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;

export default App;

Changer

Change pageSize.

TypeScript
JavaScript
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;

Jumper

Jump to a page directly.

TypeScript
JavaScript
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

Mini size pagination.

TypeScript
JavaScript
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;

Simple mode

Simple mode.

TypeScript
JavaScript
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

Controlled page number.

TypeScript
JavaScript
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;

Total number

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

TypeScript
JavaScript
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

Show all configured prop.

TypeScript
JavaScript
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;

Prev and next

Use text link for prev and next button.

TypeScript
JavaScript
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;

API

<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[]	[`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)	-

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

API

<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[]	[`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)	-

Ant Design

Pagination

Ant Design

Pagination

When To Use

Examples

API

When To Use

Examples

API