# xpl-pagination

Pagination bar allows users to navigate pages of content.

> **Note:** This component is in beta. Use with caution and expect updates before the full release.

<!-- Auto Generated Below -->


## Properties

| Property              | Attribute                | Description                                                                                       | Type      | Default              |
| --------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- | --------- | -------------------- |
| `currentPage`         | `current-page`           | The current active page (1-based). Marked as mutable so we can update from inside this component. | `number`  | `1`                  |
| `rowsPerPageOptions`  | `rows-per-page-options`  | The rows-per-page options offered in the dropdown.                                                | `string`  | `'10,25,50,100,150'` |
| `selectedRowsPerPage` | `selected-rows-per-page` | The currently selected rows-per-page.                                                             | `number`  | `10`                 |
| `totalPages`          | `total-pages`            | Total number of pages.                                                                            | `number`  | `1`                  |
| `withPageControl`     | `with-page-control`      | Whether to allow go to page navigation.                                                           | `boolean` | `false`              |


## Events

| Event               | Description                                 | Type                  |
| ------------------- | ------------------------------------------- | --------------------- |
| `pageChange`        | Emitted whenever the current page changes.  | `CustomEvent<number>` |
| `rowsPerPageChange` | Emitted whenever the rows-per-page changes. | `CustomEvent<number>` |


## Dependencies

### Depends on

- [xpl-select](../xpl-select)
- [xpl-icon](../xpl-icon)

### Graph
```mermaid
graph TD;
  xpl-pagination --> xpl-select
  xpl-pagination --> xpl-icon
  xpl-select --> xpl-tag
  xpl-select --> xpl-icon
  xpl-select --> xpl-dropdown
  xpl-tag --> xpl-icon
  xpl-dropdown --> xpl-dropdown-group
  xpl-dropdown --> xpl-dropdown-option
  xpl-dropdown-group --> xpl-dropdown-group
  xpl-dropdown-group --> xpl-dropdown-option
  xpl-dropdown-group --> xpl-dropdown-heading
  xpl-dropdown-option --> xpl-icon
  style xpl-pagination fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*