logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.11.5
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • FlexNew
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
More
Changer
Jumper
Mini size
Simple mode
Controlled
Total number
Show All
Prev and next
API
Design Token

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
    GalaceanGalacean-Interactive Graphics Solution
    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

    API

    Common props ref:Common props

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

    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?

    • 1
    • 2
    • 3
    • 4
    • 5
    Basic

    Basic pagination.

    expand codeexpand code
    • 1
    • •••
    • 4
    • 5
    • 6
    • 7
    • 8
    • •••
    • 50
    • 10 / page
    More

    More pages.

    expand codeexpand code
    • 1
    • 2
    • 3
    • 4
    • 5
    • •••
    • 50
    • 10 / page

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

    Change pageSize.

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

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

    Jump to a page directly.

    expand codeexpand code
    • 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
    Mini size

    Mini size pagination.

    expand codeexpand code
    • /5

    • /5
    Simple mode

    Simple mode.

    expand codeexpand code
    • 1
    • 2
    • 3
    • 4
    • 5
    Controlled

    Controlled page number.

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

    expand codeexpand code
    • Total 85 items
    • 1
    • 2
    • 3
    • 4
    • 5
    • •••
    • 9
    • 10 / page
      Go toPage
    Show All

    Show all configured prop.

    expand codeexpand code
    • Previous
    • 1
    • 2
    • 3
    • 4
    • 5
    • •••
    • 50
    • Next
    • 10 / page
    Prev and next

    Use text link for prev and next button.

    expand codeexpand code