The Pagination component is used to display pagination in applications. It allows users to navigate between different pages of content, improving the user experience when browsing large amounts of data.
Max pages
Use wje-pagination when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
page
| Description | Retrieves the current page number as a numeric value. |
| Attribute | page |
| Type | number |
| Default | - |
| Description | Retrieves the total number of items represented by the 'total-items' attribute. |
| Attribute | total-items |
| Type | number |
| Default | - |
pageSize
| Description | Retrieves the value of the 'page-size' attribute and converts it to a number. If the attribute is not set or is invalid, returns the default value of 3. |
| Attribute | page-size |
| Type | number |
| Default | - |
| Name | Description |
|---|
wje-pagination:page-change | Emitted when component state changes. |
| Description | Creates a pagination control for navigating between pages of content. This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items. |
| Signature | () => DocumentFragment |
| Description | Creates and returns a DocumentFragment containing a series of buttons for pagination purposes, based on the provided pagination object. |
| Signature | (paginateObj: object) => DocumentFragment |
| Name | Description |
|---|
native | The wrapper element for the pagination component. |
No CSS custom properties available for this component.
No slots available for this component.