#Momentum Paginator

Momentum Paginator is a framework-agnostic headless wrapper around Laravel Pagination meta data. It supports all basic pagination, Laravel Resources and third-party solutions, such as laravel-data.

The package helps you build reusable pagination components with a simple API.

#Installation

You can install the package via npm or yarn:

npm i momentum-paginator
# or
yarn add momentum-paginator

#Usage

Import the package, and init the paginator by passing paginated data you receive from backend.

import { usePaginator } from "momentum-paginator";

const paginator = usePaginator(users);
// or
const { from, to, total, previous, next, pages } = usePaginator(users);

#Basic example

<template>
  <a v-for="page in items" :href="page.url">{{ page.label }}</a>
</template>

#Advanced example (Vue 3)

<script lang="ts" setup>
import { usePaginator } from "momentum-paginator";

const props = defineProps<{ users: Paginator<UserResource> }>();

const { from, to, total, previous, next, pages } = usePaginator(props.users);
</script>

<template>
  <div>
    <component
      :is="previous.isActive ? 'a' : 'span'"
      :href="previous.url"
      :class="{
        'text-gray-400 hover:text-gray-500': previous.isActive,
        'cursor-not-allowed text-gray-300': !previous.isActive,
      }"
    >
      &laquo;
    </component>

    <component
      v-for="page in pages"
      :is="page.isActive ? 'a' : 'span'"
      :href="page.url"
      :class="{
        'text-blue-600': page.isCurrent,
        'text-blue-400': page.isActive,
        'hover:text-blue-500': !page.isCurrent && page.isActive,
      }"
    >
      {{ page.label }}
    </component>

    <component
      :is="next.isActive ? 'a' : 'span'"
      :href="next.url"
      :class="{
        'text-gray-400 hover:text-gray-500': next.isActive,
        'cursor-not-allowed text-gray-300': !next.isActive,
      }"
    >
      &raquo;
    </component>
  </div>
</template>

#Types

#Properties

name	type	description
items	Page[]	All page items, including `previous` and `next`
pages	Page[]	Reduced list of pages, excluding `previous` and `next`
previous	Page	Previous page
next	Page	Next page
first	Page	First page
last	Page	Last page
total	number	Total amount of results available
from	number	Starting number of the current results
to	number	Ending number of the current results

#Page instance

name	type	description
url	string	URL of the page
label	string	Text label of the item (page number, separator, previous and next page markers)
isActive	boolean	Indicates if the page is available for navigation
isCurrent	boolean	Indicates if the page is the current one.
isSeparator	boolean	Indicates if the item is a separator

#Advanced Inertia

Take your Inertia.js skills to the next level with my book Advanced Inertia. Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.

#Momentum

Momentum is a set of packages designed to improve your experience building Inertia-powered apps.

Modal — Build dynamic modal dialogs for Inertia apps
Preflight — Realtime backend-driven validation for Inertia apps
Paginator — Headless wrapper around Laravel Pagination
Trail — Frontend package to use Laravel routes with Inertia
Lock — Frontend package to use Laravel permissions with Inertia
Layout — Persistent layouts for Vue 3 apps
Vite Plugin Watch — Vite plugin to run shell commands on file changes

#Credits

#License

The MIT License (MIT). Please see License File for more information.