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.
This example presents the simplest pagination with default controls and page display.
Max pages
This example limits how many page links stay visible at once, making it easier to see how long paginations are condensed.
This example changes the shape of pagination controls to a round variant, which alters the overall visual tone.
This example focuses on the button-style pagination pattern where previous and next actions are visually dominant.
This example adds textual pagination state, such as the current page or result range, next to the controls.
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.
| Description | Controls whether hide-empty is enabled and affects component behavior. |
| Attribute | hide-empty |
| Type | boolean |
| Default | false |
maxPages
| Description | Sets the maximum number of pages. Updates the 'max-pages' attribute with the provided value. |
| Attribute | max-pages |
| Type | number｜string |
| Default | 10 |
page
| Description | Retrieves the current page number as a numeric value. |
| Attribute | page |
| Type | string |
| Default | 0 |
pageSize
| Description | Sets the pageSize attribute to the specified value. |
| Attribute | page-size |
| Type | number｜string |
| Default | 3 |
pageSizeOptions
| Description | Retrieves the list of available page size options. This method is used to fetch the values representing the different page size options that can be provided or configured in a paginated component or system. |
| Attribute | page-size-options |
| Type | Array<number> |
| Default | - |
| Description | Sets the 'round' attribute on the element. If the provided value is truthy, the 'round' attribute is added. If the value is falsy, the attribute is removed. |
| Attribute | round |
| Type | boolean |
| Default | false |
| Description | Sets the visibility of the first button based on the provided value. Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise. |
| Attribute | show-first-button |
| Type | boolean |
| Default | false |
| Description | Sets the show-info attribute on the element based on the provided value. |
| Attribute | show-info |
| Type | boolean |
| Default | false |
| Description | Sets the visibility of the "last" button. This method controls the presence or absence of the "show-last-button" attribute based on the provided value. |
| Attribute | show-last-button |
| Type | boolean |
| Default | false |
showPageSizeOptions
| Description | Sets sizing for show-page-size-options. |
| Attribute | show-page-size-options |
| Type | boolean |
| Default | false |
| Description | Sets the total number of items. |
| Attribute | total-items |
| Type | number |
| Default | 0 |
| 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.