vue-js-datatables

A fork of vuejs-datatable VueJS plugin to manage data tables

This fork allows to sort rows by numeric types without converting the data to a string type, so, your numeric columns (e.g.: IDs, currencies, amounts) won't be sorted like a string anymore!

Attributions

• Patrick Stephan: Original author
• Alexandre Germain: Current maintainer
• Damián Bouzo: Fork author

Getting started

Install the package

To install this package, simply install @neuquen8300/vue-js-datatables with your favorite package manager:

# Using npm
npm install @neuquen8300/vue-js-datatables
# Using yarn
yarn add @neuquen8300/vue-js-datatables

Import the package

Use the ESM build

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

Import & register the DatatableFactory in Vue:

import Vue from 'vue';
import { VuejsDatatableFactory } from '@neuquen8300/vue-js-datatables';

Vue.use( VuejsDatatableFactory );

Check out how to customize table types to see some usage of the DatatableFactory and the possible reasons not to use the default instance exported as VuejsDatatableFactory.

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.firstName'},
            {label: 'Last Name', field: 'user.lastName'},
            {label: 'Email', field: 'user.email'},
            {label: 'Address', representedAs: ({address, city, state}) => `${address}<br />${city}, ${state}`, interpolate: true}
        ],
        rows: [
            //...
            {
                id: 1,
                user: {
                    username: "dprice0",
                    firstName: "Daniel",
                    lastName: "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/.

# First, clone the repo
# replace `my-branch` with the name of the branch you want to use
git clone https://github.com/GerkinDev/vuejs-datatable.git#my-branch
# Go to the repo directory
cd vuejs-datatable
# Install dependencies
npm install
# Run tests
npm run test
# Build the package
npm run build

Optionaly, link your local modules so you can use it in other modules.

You may need to run the following command as sudo

npm link