Basic
More
Changer
Jumper
Mini size
Simple mode
Controlled
Total number
Show All
Prev and next
API

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

Basic pagination.

import { Pagination } from 'antd';

ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, mountNode);

1
•••
4
5
6
7
8
•••
50
10 / page

More pages.

import { Pagination } from 'antd';

ReactDOM.render(<Pagination defaultCurrent={6} total={500} />, mountNode);

1
2
3
4
5
•••
50
10 / page

1
2
3
4
5
•••
50
10 / page

Changer

Change pageSize.

import { Pagination } from 'antd';

function onShowSizeChange(current, pageSize) {
  console.log(current, pageSize);
}

ReactDOM.render(
  <>
    <Pagination
      showSizeChanger
      onShowSizeChange={onShowSizeChange}
      defaultCurrent={3}
      total={500}
    />
    <br />
    <Pagination
      showSizeChanger
      onShowSizeChange={onShowSizeChange}
      defaultCurrent={3}
      total={500}
      disabled
    />
  </>,
  mountNode,
);

1
2
3
4
5
•••
50
10 / page
Go to

1
2
3
4
5
•••
50
10 / page
Go to

Jumper

Jump to a page directly.

import { Pagination } from 'antd';

function onChange(pageNumber) {
  console.log('Page: ', pageNumber);
}

ReactDOM.render(
  <>
    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
    <br />
    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
  </>,
  mountNode,
);

1
2
3
4
5
10 / page
Go to

Total 50 items
1
2
3
4
5

Total 50 items
1
2
3
4
5
10 / page
Go to

Mini size

Mini size pagination.

import { Pagination } from 'antd';

function showTotal(total) {
  return `Total ${total} items`;
}

ReactDOM.render(
  <>
    <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
    />
  </>,
  mountNode,
);

Simple mode

Simple mode.

import { Pagination } from 'antd';

ReactDOM.render(
  <>
    <Pagination simple defaultCurrent={2} total={50} />
    <br />
    <Pagination disabled simple defaultCurrent={2} total={50} />
  </>,
  mountNode,
);

Controlled

Controlled page number.

import { Pagination } from 'antd';

class App extends React.Component {
  state = {
    current: 3,
  };

  onChange = page => {
    console.log(page);
    this.setState({
      current: page,
    });
  };

  render() {
    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
  }
}

ReactDOM.render(<App />, mountNode);

Total 85 items
1
2
3
4
5
20 / page

1-20 of 85 items
1
2
3
4
5
20 / page

Total number

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

import { Pagination } from 'antd';

ReactDOM.render(
  <>
    <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}
    />
  </>,
  mountNode,
);

Total 85 items
1
2
3
4
5
•••
9
10 / page
Go to

Show All

Show all configured prop.

import { Pagination } from 'antd';

ReactDOM.render(
  <>
    <Pagination
      total={85}
      showSizeChanger
      showQuickJumper
      showTotal={total => `Total ${total} items`}
    />
  </>,
  mountNode,
);

Previous
1
2
3
4
5
•••
50
Next
10 / page

Prev and next

Use text link for prev and next button.

import { Pagination } from 'antd';

function itemRender(current, type, originalElement) {
  if (type === 'prev') {
    return <a>Previous</a>;
  }
  if (type === 'next') {
    return <a>Next</a>;
  }
  return originalElement;
}

ReactDOM.render(<Pagination total={500} itemRender={itemRender} />, mountNode);

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`]
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`
responsive	If `size` is not specified, `Pagination` would resize according to the width of the window	boolean	-
total	Total number of data items	number	0
onChange	Called when the page number 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)	-