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.
Usage
More
Changer
Jumper
Go topage
Go topage
Simple Mode
/5
/5
Pagination controlled
Show all
Show all prop configured.
Total 85 items
Go topage
Custom Render
Prev
Next
Playground
Test different behavior of Pagination with the following controls.
Controls:
API Reference
Pagination
| Prop | Type | Default |
|---|---|---|
current | number | ─ |
defaultCurrent | number | ─ |
defaultPageSize | number | ─ |
pageSize | number | ─ |
disabled | boolean | ─ |
hideOnSinglePage | boolean | ─ |
itemRender | function() | ─ |
pageSizeOptions | string[] | number[] | ─ |
showQuickJumper | boolean | ─ |
showSizeChanger | boolean | ─ |
showTotal | function() | ─ |
simple | boolean | ─ |
total* | number | ─ |
onChange | (page, pageSize) => void | ─ |
onShowSizeChange | (current, size) => void | ─ |
Last updated on