Pagination
Use pagination to help users navigate a large amount items broken down into pages.
7 pages or less
<e-pagination max-page="7" current-page="1"></e-pagination>
<e-pagination max-page="7" current-page="1"></e-pagination>8 pages
More than 8 pages
If you are 4 or more pages away from both ends.
<e-pagination max-page="9" current-page="5"></e-pagination>
<e-pagination max-page="9" current-page="5"></e-pagination>More than 8 pages
<e-pagination max-page="8" current-page="5"></e-pagination>
<e-pagination max-page="8" current-page="5"></e-pagination>API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| max-page | Defined number of pages. | string | 0 | |
| current-page | Number of the current page. | string | 1 |
Events
| Event | Description | Returns |
|---|---|---|
change | Fires on the component when the page number is clicked. | {
detail: {
page: current page number
}
} |
Related components
TableButtonButton groupPagination
Use pagination to help users navigate through large amount of items broken down into pages.
Structure
- Previous page
- Page numbers
- Current page
- Collapsed pages
- Next page
Best practices
Pagination should:
- Be always displayed even if with the current number of items does not make it necessary. This shows the users that the number of items is not fixed or limited.
- Keep filter, search and sorting when changing pages.
- Keep items on the same page across sessions if no new items were added, so users can find the same item on the same page.
- Be placed below overview tables.
- Be used only once per page.
Try to avoid:
- Using the collapsed page indicator with only one page collapsed.
- Using the pagination as a navigation for functions. Group them and use verticalnav, tabs or accordion instead.