logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • 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
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Pagination

A long list can be divided into several pages, and only one page will be loaded at a time.
Importimport { Pagination } from "antd";
Sourcecomponents/pagination
Docs
Edit this pageChangelog

Resources

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

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

API

Common props ref:Common props

jsx
<Pagination onChange={onChange} total={50} />
PropertyDescriptionTypeDefaultVersion
alignAlignstart | center | end-5.19.0
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 optionsnumber[][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 | SelectProps-SelectProps: 5.21.0
showTitleShow page item's titlebooleantrue
showTotalTo display the total number and rangefunction(total, range)-
simpleWhether to use simple modeboolean | { readOnly?: boolean }-
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)-

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
itemActiveBgBackground color of active Pagination itemstring#ffffff
itemActiveBgDisabledBackground color of disabled active Pagination itemstringrgba(0,0,0,0.15)
itemActiveColorDisabledText color of disabled active Pagination itemstringrgba(0,0,0,0.25)
itemBgBackground color of Pagination itemstring#ffffff
itemInputBgBackground color of inputstring#ffffff
itemLinkBgBackground color of Pagination item linkstring#ffffff
itemSizeSize of Pagination itemnumber32
itemSizeSMSize of small Pagination itemnumber24
miniOptionsSizeChangerTopTop of Pagination size changernumber0
Global TokenHow to use?
Basic

Basic pagination.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Align
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.19.0
More

More pages.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Changer

Change pageSize.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Jumper

Jump to a page directly.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Mini size

Mini size pagination.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Simple mode

Simple mode.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Controlled

Controlled page number.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Total number

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Show All

Show all configured prop.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Prev and next

Use text link for prev and next button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5

  • 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

  • 2/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