> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/pagination/code.md).

# Code

{% hint style="info" %}
This is not a compound component.
{% endhint %}

### Pagination API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

| Props                  | Type                                                                 | Required |
| ---------------------- | -------------------------------------------------------------------- | -------- |
| `resultsPerPageRanges` | `number`                                                             | ✅        |
| `hasPadding`           | `boolean`                                                            | ❌        |
| `defaultActivePage`    | `number`                                                             | ❌        |
| `activePage`           | `number`                                                             | ❌        |
| `defaultActiveRange`   | `number`                                                             | ❌        |
| `activeRange`          | `number`                                                             | ❌        |
| `resultsTotal`         | `number`                                                             | ❌        |
| `disableMovingForward` | `boolean`                                                            | ❌        |
| `onPageChange`         | `({ page }: PaginationOnPageChangeEvent) => void;`                   | ❌        |
| `onRangeChange`        | `({ range }: PaginationOnPageChangeEvent) => void;`                  | ❌        |
| `onMoveForward`        | `({ page }: PaginationOnPageChangeEvent) => void;`                   | ❌        |
| `onMoveBackward`       | `({ page }: PaginationOnPageChangeEvent) => void;`                   | ❌        |
| `customText`           | `{ resultsPerPageRanges?: string; of?: string; results?: string; };` | ❌        |

<details>

<summary>resultsPerPageRanges</summary>

A prop used in pagination components to provide users with options for selecting the number of results displayed per page.

</details>

<details>

<summary>defaultActivePage</summary>

This prop controls the default active page that is shown when the component mounts.

</details>

<details>

<summary>activePage</summary>

Prop used when taking a controlled approach of the active page. Normally handled by a state,

</details>

<details>

<summary>defaultActiveRange</summary>

Used to pass a default active range. Note that, it should be a value contained in the `resultsPerPageRanges`array.&#x20;

</details>

<details>

<summary>activeRange</summary>

Used to pass a controlled active range. Note that, it should be a value contained in the `resultsPerPageRanges`array.&#x20;

</details>

<details>

<summary>resultsTotal</summary>

The amount of total results, most of the cases this will be equal to the array length of your API response/ JSON.

</details>

<details>

<summary>disableMovingForward</summary>

By default, when there are no more pages available, this is set to true, but you can control it anyways.

</details>

<details>

<summary>onPageChange, onRangeChange, onMoveForward, onMoveBackward</summary>

**onPageChange**: Handles page selection, updating component state or triggering data retrieval for the chosen page.

**onRangeChange:** Manages the change in displayed results per page, updating component state or adjusting displayed results.

**onMoveForward:** Executes when the user moves to the next page, updating pagination state and potentially fetching data for the subsequent page.

**onMoveBackward:** Triggers when the user moves to the previous page, updating pagination state and potentially fetching data for the previous page.

All of them receive the current page as an argument, except the `onRangeChange`function, that receives the current range.

</details>

<details>

<summary>customText</summary>

An object passed to customize each passed text.

resultsPerPageRanges: Customizes text before a dropdown menu showing result display options. EG: 'Ranges: '&#x20;

of: Allows customization of the text between current and total page numbers: EG: 'of'

results: Customizes text indicating the total number of search results. EG: 'results found'

</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/pagination-wp5tjf">Code Sandbox</a></td><td></td></tr></tbody></table>