Navigation · Pagination
Pagination
The Pager helps users navigate between multiple pages

Demos

How to import

Basic Usage

Set the total number of pages via Total, Set capacity per page via pageSize.

Show total page number

Use the showTotal property to control whether the total number of pages is shown.

Specify current page number

You can specify the currently active page number via defaultCurrentPage.

Capacity switching per page

By setting showSizeChanger for true, allowing quick switching of capacity per page via the Select component

Jump to a page quickly

By setting showQuickJumper to true, you can enter the page number through the Input control to quickly jump
When Input loses focus, if there is a valid number in Input, it will jump directly. You can also enter the page number you want to jump to when the Input is focused, and then hit enter to jump directly
If you enter a page number greater than the total page number of the pager, we will automatically jump to the last page for you
showQuickJumper is available after v1.31

Page number controlled

After the currentPage is passed in, the pager is a controlled component and is generally used in conjunction with onPageChange. The current active page number depends entirely on the value of the currentPage passed in.

Preset capacity per page

Specify an optional value for switching the capacity per page by using the pageSizeOpts array

Mini version

Show mini pagination via size properties.
Turn on hoverShowPageSelect to quickly switch hover page numbers (provided after v1.27.0)

API reference

PropertiesInstructionstypeDefaultVersion
classNameThe CSS class name of the wrapper elementstring
currentPageCurrent page numbernumber
defaultCurrentPageDefault current page numbernumber
hideOnSinglePageWhether to hide the page divider automatically when the total number of pages is less than 2. When showSizeChanger is true, this switch no longer takes effectbooleanfalse
hoverShowPageSelectWhether to show the page select when hover page (only work when size='small')booleanfalse1.27.0
nextTextText displayed by the next Page buttonstring| React Node
pageSizeNumber of entries per pagenumber10
pageSizeOptsSpecify how many items are displayed per pagearray[10, 20, 40, 100]
popoverPositionFloating layer direction, visible Popover·API reference·positionstring"bottomLeft"
popoverZIndexFloating layer z-index valuenumber1030
prevTextText displayed by the previous Page buttonstring| React Node
sizeSize, optional small, defaultstring'default'
styleInline styleobject
showSizeChangerWhether to show a selector to switch the capacity of each pagebooleanfalse
showQuickJumperWhether to show a input to type the page number, supported after v1.31booleanfalse1.31.0
showTotalWhether to show total page numberboolean3
totalTotal number of entriesnumber1
onChangeThe callback function when page number or capacity per page changesfunction(currentPage: number, pageSize: number)
onPageChangeA callback function for page number changesfunction(currentPage: number)
onPageSize ChangeCallback function when capacity changes per pagefunction(pageSize: number)

Accessibility

ARIA

  • aria-label: Labels the element such as previous, next, pages in the pagination.
  • aria-current: Indicates the current page.

Design Tokens

FAQ

  • Why is the page drop-down selector only 1,000,000 at most?
    Because when creating lists, the browser has restrictions on the size of Array.from () to create arrays; At the same time, in order to take into account the overhead of Array.from(), we set the threshold of 1,000,000.

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED