Vuejs binding for smart-table
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist first commit May 2, 2017
example better packaging for npm May 3, 2017
lib first commit May 2, 2017
.gitignore Initial commit Mar 6, 2017
.npmignore first commit May 2, 2017
LICENSE Initial commit Mar 6, 2017 Update May 5, 2017
index.js first commit May 2, 2017
package.json bump version May 4, 2017
rollup.config.js first commit May 2, 2017
yarn.lock better packaging for npm May 3, 2017


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


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

yarn add smart-table-vue


npm install --save smart-table-vue


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: `
            <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 v-for="item in displayed">

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


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