npm package: @highlight-ui/pagination
Description: Pagination component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 3.3.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/pagination)](https://www.npmjs.com/package/@highlight-ui/pagination)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/4252c2-pagination/b/61d4aa)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/navigation-pagination--basic-pagination)

# @highlight-ui/pagination

Using npm:

```bash
npm install @highlight-ui/pagination
```

Using yarn:

```bash
yarn add @highlight-ui/pagination
```

Using pnpm:

```bash
pnpm install @highlight-ui/pagination
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/pagination');
```

Once the package is installed, you can import the library:

```ts
import { Pagination } from '@highlight-ui/pagination';
```

## Usage

```tsx
import React from 'react';
import { Pagination } from '@highlight-ui/pagination';

export default function PaginationExample() {
  return (
    <Pagination
      offset={0}
      total={100}
      limit={10}
      maxItems={5}
      onChange={handleChange}
    />
  );
}
```

## Props 📜

| Prop                | Type                       | Required | Default              | Description                                                                           |
| :------------------ | :------------------------- | :------- | :------------------- | :------------------------------------------------------------------------------------ |
| `limit`             | `number`                   | Yes      |                      | How many items are shown on the page                                                  |
| `offset`            | `number`                   | Yes      |                      | Used to calculate current page                                                        |
| `total`             | `number`                   | Yes      |                      | Total number of items                                                                 |
| `onChange`          | `(offset: number) => void` | Yes      |                      | Callback that is invoked when the page is selected or navigation buttons are clicked. |
| `firstPageIconName` | `string`                   | No       | `angle-double-left`  | Icon for "go to the first page" button                                                |
| `lastPageIconName`  | `string`                   | No       | `angle-double-right` | Icon for "go to the last page" button                                                 |
| `maxItems`          | `number`                   | No       | `0`                  | How many page buttons are shown                                                       |
| `nextPageIconName`  | `string`                   | No       | `angle-right`        | Icon for "go to the next page" button                                                 |
| `prevPageIconName`  | `string`                   | No       | `angle-left`         | Icon for "go to the previous page" button                                             |
| `className`         | `string`                   | No       |                      | Allows providing a custom class name                                                  |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/4252c2-pagination/b/61d4aa) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).