# r-pagination
Navigation control for moving between pages of content, with page number buttons, prev/next arrows, and configurable items-per-page options.
Example
```
```
## class: `RPagination`, `r-pagination`
### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ------------------------- | ------- | -------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------ | -------------- |
| `arrows` | | `boolean` | `true` | UI: Arrows present/absent: | |
| `ellipsisLabel` | | `string` | `'Ellipsis indicating skipped pages'` | Label for Ellipsis stepper. Important to ensure accessibility for screen reader users. | |
| `endText` | | `string` | `'results'` | Text to display after total results | |
| `firstPageButtonLabel` | | `string` | `'Go to the first page'` | Label for First Page button. Important to ensure accessibility for screen reader users. | |
| `itemsPerPage` | | `number` | `5` | Amount of items to show per page; | |
| `itemsPerPageLabel` | | `string` | `'Items per page'` | Label for Items per page select. | |
| `itemsPerPageOptions` | | `(5 \| 10 \| 15 \| 20 \| 25 \| 50 \| 100)[]` | `[...paginationItemsPerPageOptionsArray]` | Items per page options for dropdown. | |
| `lastPageButtonLabel` | | `string` | `'Go to the last page'` | Label for Last Page button. Important to ensure accessibility for screen reader users. | |
| `listBoxPosition` | | `"bottom" \| "top"` | `'top'` | Position of the list box | |
| `maxVisiblePages` | | `number` | `paginationMaxVisiblePagesDefault` | The maximum number of visible page buttons (excluding ellipsis steppers). | |
| `middleText` | | `string` | `'of'` | Text to display between currently shown results and total amount of results | |
| `nextPageButtonLabel` | | `string` | `'Go to the next page'` | Label for Next Page button. Important to ensure accessibility for screen reader users. | |
| `pageActive` | | `number` | `1` | Current page number; | |
| `pageLabel` | | `string` | `'Page'` | Label for Page number buttons. Important to ensure accessibility for screen reader users. | |
| `previousPageButtonLabel` | | `string` | `'Go to the previous page'` | Label for Previous Page button. Important to ensure accessibility for screen reader users. | |
| `resultsLine` | | `boolean` | `false` | UI: Result Line and select field present/absent; | |
| `selectText` | | `string` | `'page'` | Text to show in select | |
| `startText` | | `string` | `'Showing'` | Text to show in beginning of resultLine; | |
| `totalResults` | | `number` | `1` | Total amount of pages to select from; | |
| `variant` | | `"maximized" \| "minimized" \| "standard"` | `'standard'` | Allows selection between different pagination styles: minimized, standard, maximized; | |
### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------- | -------------- |
| `setItemsPerPageOptions` | | Sets available values for the items-per-page select.
Prefer this API over the deprecated itemsPerPageOptions prop. | `options: (5 \| 10 \| 15 \| 20 \| 25 \| 50 \| 100)[]` | `Promise` | |
### Events
| Name | Type | Description | Inherited From |
| --------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `rArrowClick` | `CustomEvent<{ total: number; active: number; previous: number; next: number; direction: string; }>` | Signifies that one of the pagination arrow buttons was cliked.
Pagination state and `direction` are passed as part of event `detail` property. | |
| `rChange` | `CustomEvent<{ total: number; active: number; previous: number; next: number; }>` | Signifies that currently active page was changed.
Pagination state is passed as part of event `detail` property. | |
| `rItemsPerPageChange` | `CustomEvent` | Signifies that items per page was changed.
New items per page value is passed as part of event `detail` property. | |
| `rNumberClick` | `CustomEvent<{ total: number; active: number; previous: number; next: number; }>` | Signifies that one of the pagination number buttons was cliked.
Pagination state is passed as part of event `detail` property. | |
### Attributes
| Name | Field | Inherited From |
| ---------------------------- | ----------------------- | -------------- |
| `arrows` | arrows | |
| `ellipsis-label` | ellipsisLabel | |
| `end-text` | endText | |
| `first-page-button-label` | firstPageButtonLabel | |
| `items-per-page` | itemsPerPage | |
| `items-per-page-label` | itemsPerPageLabel | |
| `last-page-button-label` | lastPageButtonLabel | |
| `list-box-position` | listBoxPosition | |
| `max-visible-pages` | maxVisiblePages | |
| `middle-text` | middleText | |
| `next-page-button-label` | nextPageButtonLabel | |
| `page-active` | pageActive | |
| `page-label` | pageLabel | |
| `previous-page-button-label` | previousPageButtonLabel | |
| `results-line` | resultsLine | |
| `select-text` | selectText | |
| `start-text` | startText | |
| `total-results` | totalResults | |
| `variant` | variant | |
## Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | -------------- | ----------- | ------ | ------- |
| `js` | `RPagination` | RPagination | | |
| `custom-element-definition` | `r-pagination` | RPagination | | |