logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
More
Changer
Jumper
Mini size
Simple mode
Controlled
Total number
Show All
Prev and next
API

Pagination

MenuSteps

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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.

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

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

export default App;
More

More pages.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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;
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
Simple mode

Simple mode.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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} />
PropertyDescriptionTypeDefaultVersion
currentCurrent page numbernumber-
defaultCurrentDefault initial page numbernumber1
defaultPageSizeDefault number of data items per pagenumber10
disabledDisable paginationboolean-
hideOnSinglePageWhether to hide pager on single pagebooleanfalse
itemRenderTo customize item's innerHTML(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode-
pageSizeNumber of data items per pagenumber-
pageSizeOptionsSpecify the sizeChanger optionsstring[] | number[][10, 20, 50, 100]
responsiveIf size is not specified, Pagination would resize according to the width of the windowboolean-
showLessItemsShow less page itemsbooleanfalse
showQuickJumperDetermine whether you can jump to pages directlyboolean | { goButton: ReactNode }false
showSizeChangerDetermine whether to show pageSize select, it will be true when total > 50boolean-
showTitleShow page item's titlebooleantrue
showTotalTo display the total number and rangefunction(total, range)-
simpleWhether to use simple modeboolean-
sizeSpecify the size of Pagination, can be set to smalldefault | smalldefault
totalTotal number of data itemsnumber0
onChangeCalled when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its argumentsfunction(page, pageSize)-
onShowSizeChangeCalled when pageSize is changedfunction(current, size)-
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • •••
  • 4
  • 5
  • 6
  • 7
  • 8
  • •••
  • 50
  • 10 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 / page

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

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

  • /5
  • 1
  • 2
  • 3
  • 4
  • 5
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page

  • 1-20 of 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 9
  • 10 / page
    Go toPage
  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • Next
  • 10 / page