> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Paginator

> Paginator.vue Component Documentation

The `Paginator.vue` component is a reusable Vue.js component designed for paginating data fetched from a Laravel backend. It works seamlessly with the Laravel pagination structure, displaying pagination links in a visually appealing way. The component uses the `@inertiajs/vue3` `Link` component to navigate between pages while preserving the SPA behavior.

***

## Features

<CardGroup cols={2}>
  <Card title="Laravel Pagination Support" icon="square-1">
    Seamlessly handles the data structure returned by Laravel's model pagination.
  </Card>

  <Card title="Dynamic Links" icon="square-2">
    Automatically generates pagination links using the <code>links</code> prop.
  </Card>

  <Card title="Customizable Navigation" icon="square-3">
    Includes options to preserve scroll state during navigation.
  </Card>

  <Card title="Responsive Design" icon="square-4">
    Features full-width layout with height managed via CSS classes.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```vue theme={null}
<template>
  <Paginator :links="paginator" />
</template>

<script setup>
import { Paginator } from '@robojuice/velure-ui';

const paginator = [
  {"url":null,"label":"&laquo;","active":false},
  {"url":"/","label":"1","active":true},
  {"url":"/?page=2","label":"2","active":false},
  {"url":"/?page=3","label":"3","active":false},
  {"url":"/?page=4","label":"4","active":false},
  {"url":"/?page=5","label":"5","active":false},
  {"url":null,"label":"...","active":false},
  {"url":"/?page=15","label":"15","active":false},
  {"url":"/?page=16","label":"16","active":false},
  {"url":"/?page=2","label":"&raquo;","active":false}
];
</script>
```

***

## Props

<ParamField path="links" type="array | object" default="[]">
  The array of pagination links, typically from Laravel's pagination data.
</ParamField>

<ParamField path="preserveScroll" type="boolean" default="false">
  Whether to preserve the scroll position when navigating via links.
</ParamField>

<ParamField path="emitClickedLink" type="boolean" default="false">
  Whether to emit a click even vs allowing the link URL.
</ParamField>

***

## Events

<ParamField path="click" type="event" payload="string (link)">
  Triggered when the user clicks a link and `emitClickedLink` is `true`.
</ParamField>

## Example with Laravel Data Structure

In your Laravel controller:

```php theme={null}
use App\Models\Post;

public function index() {
    $posts = Post::paginate(10); // Laravel's pagination
    return Inertia::render('Posts/Index', [
        'posts' => $posts,
    ]);
}
```

The data structure returned by Laravel pagination:

```json theme={null}
{
  "current_page": 1,
  "data": [...],
  "first_page_url": "http://example.com?page=1",
  "from": 1,
  "last_page": 16,
  "last_page_url": "http://example.com?page=16",
  "links": [
    {"url":null,"label":"&laquo; Previous","active":false},
    {"url":"http://example.com?page=1","label":"1","active":true},
    {"url":"http://example.com?page=2","label":"2","active":false},
    {"url":"http://example.com?page=3","label":"3","active":false},
    {"url":null,"label":"...","active":false},
    {"url":"http://example.com?page=16","label":"16","active":false},
    {"url":"http://example.com?page=2","label":"Next &raquo;","active":false}
  ],
  "next_page_url": "http://example.com?page=2",
  "path": "http://example.com",
  "per_page": 10,
  "prev_page_url": null,
  "to": 10,
  "total": 150
}
```

Pass the `links` field from the Laravel response to the `Paginator` component. From Inertia form the Laravel model:

```vue theme={null}
<template>
  <Paginator :links="$page.props.posts.links" />
</template>
```

### Advanced Example with Scroll Preservation

```vue theme={null}
<Paginator :links="$page.props.posts.links" :preserve-scroll="true" />
```

### Advanced Example with Emit Link Click

```vue theme={null}
<Paginator emit-clicked-link @click="(link) => console.log(link)" :links="$page.props.posts.links" />
```

***

## Notes

* **Responsive Design**: The height of the paginator can be customized using CSS classes, while the width is set to 100%.
* **Preserve Scroll**: The `preserveScroll` prop ensures the scroll position is maintained when navigating between pages.
* **Dynamic Rendering**: The `Paginator` component automatically maps the `links` prop to clickable navigation buttons.

For further customization, refer to the component's source code.