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

• Boris Lepikhin
• All Contributors

License

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