Pagination
Pagination divided content into several pages and allows users to navigate in between.
Basic
Basic usage of Pagination.
- 1
- 2
- 3
- 4
- 5
More
Pagination will diaplay ellipsis for indicating previous or continuing results when the page amount is overflow.
- 1
- 50
- 1
- 100
Total
Display total number of data by setting
displayTotal to true.Total 50 Items
- 1
- 50
Page sizes
Displaying the pagination count divided by
total & pageSize, often used on displaying numbers of data in a page. Total 100 Items
- 1
- 20
5 / page
Controlled
Example of controlled pagination.
- 1
- 100
API
Pagination
| Prop | Description | Type | Default |
|---|---|---|---|
| currentPage | Current page number | number | 1 |
| displayTotal | Whether to display total of data items | boolean | false |
| onChange | Callback when Pagination index was clicked | (pageNumber: number) => void | - |
| pageSize | Number of data items per page | number | 1 |
| total | Total number of data items | number | 5 |