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
Simple Mode
Pagination controlled
Show all
Show all prop configured.
Custom Render
Playground
Test different behavior of Pagination with the following 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 | ─ |