GerkinDev / Vuejs Datatable
Programming Languages
Projects that are alternatives of or similar to Vuejs Datatable
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
👉 Browse the documentation 📚 👉 Check out the tutorials 📚
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 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 '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 </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 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.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/.
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.
# 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
Attributions
- Patrick Stephan: Original author
- Alexandre Germain: Current maintainer