Vue.js Component For Filterable And Paginated Tables – Datatable

The Vue.js data table component allows for quick and easy setup of filterable, sortable, and paginated tables.

vuejs-datatable

A VueJS plugin to manage data tables

Allows for quick and easy setup of filterable, sortable, and paginated tables. Currently supports Vue.js ^2.4.

E2E testing over Travis realized using

:point_right: Browse the documentation :books:

Getting started

Install the package

To install this package, simply install vuejs-datatable with your favorite package manager:

# Using npm
npm install vuejs-datatable
# Using yarn
yarn add vuejs-datatable

Import the package

Use the ESM build

The ESM build (EcmaScript Module) implies that you target browsers that support ESM OR you use a bundler, like webpack, rollup.js or Parcel.

Import & register the DatatableFactory in Vue:

import Vue from 'vue';
import DatatableFactory from 'vuejs-datatable';

Vue.use(DatatableFactory);

Check out how to customize table types to see some usage of the DatatableFactory.

Use the IIFE build

The IIFE build (Immediately Invoked Function Expression) should be prefered only for small applications without bundlers, or if you privilegiate the use of a CDN

In your HTML, load the IIFE build directly, if possible right before the closing </body> tag. You must make sure that the loading order is preserved, like below.

<body>
    <!-- All your page content... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js" defer></script>
    <script src="/dist/vuejs-datatable.js" defer></script>
    <script src="/myscript.js" defer></script>
</body>

The IIFE build exposes the DatatableFactory as the global VuejsDatatable. Check out how to customize table types to see some usage of the DatatableFactory.

Use the component

Use the component in your HTML or template:

<div id="vue-root">
    <datatable :columns="columns" :data="rows"></datatable>
</div>

Then pass in the columns and the data to your Vue instance:

new Vue({
    el: '#vue-root',
    data: {
        columns: [
            {label: 'id', field: 'id'},
            {label: 'Username', field: 'user.username', headerClass: 'class-in-header second-class'},
            {label: 'First Name', field: 'user.first_name'},
            {label: 'Last Name', field: 'user.last_name'},
            {label: 'Email', field: 'user.email'},
            {label: 'address', representedAs: ({address, city, state}) => `${address}<br />${city}, ${row.state}`, interpolate: true}
        ],
        rows: [
            //...
            {
                "id": 1,
                "user": {
                    "username": "dprice0",
                    "first_name": "Daniel",
                    "last_name": "Price",
                    "email": "[email protected]"
                },
                "address": "3 Toban Park",
                "city": "Pocatello",
                "state": "Idaho"
            }
            //...
        ]
    }
});

Customize the datatable

The DatatableFactory exposes several methods to allow you to add or modify other datatable-like components, with custom styles or behavior.

VuejsDatatable
    .registerTableType( 'my-awesome-table', tableType => {
        tableType
            .mergeSettings( /* ... */ )
            .setFilterHandler( /* ... */ )
            .setSortHandler( /* ... */ );
    } );

Documentation

Browse the full documentation at https://gerkindev.github.io/vuejs-datatable/.

Attributions

Patrick Stephan: Original author
Alexandre Germain: Current maintainer

Github Repository

Tags: #VueJs