smart-table-vue

Smart table binding for Vuejs. Refer to the documentation website for more details.

Checkout the online demo

Come as a set of convenient mixins so you can focus on your templates only.

Getting started

$3

Through a package manager you can install the smart-table-vue package

`yarn add smart-table-vue

or

npm install --save smart-table-vue

Usage

`Javascript
import {sort, table as tableMixin} from 'smart-table-vue';
import {table} from 'smart-table-core';

//use "sort" mixin to add a sortable behavior
Vue.component("SortableHeader", {
mixins: [sort],
template: ,
data: function() {
return { activeClass: "" };
},
watch: {
stState: function(val) {
const { pointer, direction } = val;
if (pointer === this.stSort) {
this.activeClass = direction === "asc"
? "st-sort-asc"
: direction === "desc" ? "st-sort-desc" : "";
} else {
this.activeClass = "";
}
}
}
});

//use "table" mixin to add a table behavior
Vue.component("PersonTable", {
mixins: [tableMixin],
template:

Surname	Name
{{item.value.surname}}	{{item.value.name}}

});

const persons = table({
data: [
{ surname: "Renard", name: "Laurent" },
{ surname: "Leponge", name: "Bob" }
]
});


//your app
new Vue({
el: "#container",
data: {
smartTable: persons
},
template:
});

`

see with CodePen

Example

In this repository, you will find a full example with pagination, sort, search and "advanced" filters.

run npm run build:example` and serve the index.html file