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:
:point_right: Check out the tutorials :books:

---

Getting started

$3

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

``sh


Using npm

npm install vuejs-datatable

Using yarn

yarn add vuejs-datatable
`

$3

#### 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:

`js
import Vue from 'vue';
import { VuejsDatatableFactory } from 'vuejs-datatable';

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 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 tag. You must make sure that the loading order is preserved, like below.

`html






`

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

$3

Use the component in your HTML or template:

`html



`

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

`js
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}
${city}, ${state}, interpolate: true}
],
rows: [
//...
{
id: 1,
user: {
username: "dprice0",
firstName: "Daniel",
lastName: "Price",
email: "dprice0@blogs.com"
},
address: "3 Toban Park",
city: "Pocatello",
state: "Idaho"
}
//...
]
}
});
`

$3

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

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

Documentation

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

Use a development version

Sometimes, you'll need to use a development version of the module. This allow you to modify source code, run tests, and build custom versions of the module.

Always existing branches are:

* develop: Latest changes, not yet validated.
* staging: Changes considered as stable and planned for next release.
* master: Releases, stable versions.

You may use other branches (for features, hotfixes, etc etc). Check out the list of branches.

`sh


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

`sh
npm link
``

Attributions

* Patrick Stephan: Original author
* Alexandre Germain: Current maintainer