tailable-pagination

11,523 9
Install
npm install tailable-pagination
Latest Version:2.0.0
Vue:2
Last Updated:Jul 19, 2023
Links: GitHub  ·  npm
Maintainer: jamesdordoy

Vue Test Utils - Jest

Tailable Pagination

A Vue.js pagination component for Laravel thats built for Tailwind.

Requirements

Demo & Docs

See https://tailable.github.io/pagination/

Component Installation

npm install tailable-pagination

or

yarn add tailable-pagination

Register the Plugin

import TailablePagination from 'tailable-pagination';

Vue.use(TailablePagination);

Add the following variants to your tailwind.config.js

variants: {
    opacity: ['disabled'],
    cursor: ['disabled'],
},

Basic Example

Pagination.vue

<tailable-pagination
    :data="users"
    :showNumbers="true">
</tailable-pagination>
export default {
    data() {
        return {
            users: {},
        }
    },
    created() {
        axios.get("http://laravel.test/api/users")
        .then(response => {
            this.users = response.data;
        })
    }
}

API

Pagination Props
Name Type Default Description
data Object {} The data from paginated AJAX request
limit Number 1 The pagination limit each side of the middle button.
size String "default" (optional) Must be default or small or large
show-disabled Boolean true (optional) Pagination buttons next and previous, do you want them displayed if there is nothing to click?
show-numbers Boolean false (optional) Pagination show numbered buttons?
hide-when-empty Boolean false (optional) Hides the pagination buttons when there is no need to show them
translate Object { nextButton: 'Next' previousButton: 'Previous' } (optional) Translate button text
Pagination Events
Name Description
page-changed A button has been clicked

Development

To work on the package locally or to add to the documentation, run the following command:

npm run serve

To run the tests:

npm run test:unit

Related Packages

@iankibetsh/sh-tailwind

Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankib...

3,215 0
@elyracode/stack-vilt

Elyra stack profile for VILT (Vue 3, Inertia.js, Laravel, Tailwind CSS)

17,982
@vue-interface/middleware

An extensible Middleware component for VueRouter that closely mimic's Laravel's...

1,267 1
tailwind-config-viewer

View your Tailwind CSS config file...visually!

19,524,150 2,211
laravel-elixir-vue-2

'Laravel Elixir Vue 2.0 Integration'

28,012 107

Version History

Version Released License
2.0.0
1.0.0
0.1.22
0.1.21
0.1.20