README
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
Installation
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
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: `<th v-bind:class="[activeClass]" v-on:click="toggle"><slot></slot></th>`,
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: `
<table>
<thead>
<tr>
<th is="sortable-header" :smart-table="smartTable" st-sort="surname">Surname</th>
<th is="sortable-header" :smart-table="smartTable" st-sort="name">Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in displayed">
<td>{{item.value.surname}}</td>
<td>{{item.value.name}}</td>
</tr>
</tbody>
</table>
`
});
const persons = table({
data: [
{ surname: "Renard", name: "Laurent" },
{ surname: "Leponge", name: "Bob" }
]
});
//your app
new Vue({
el: "#container",
data: {
smartTable: persons
},
template: `<Person-table :smart-table="smartTable"/>`
});
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