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 behaviorVue.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 behaviorVue.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 appnew 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