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.
Permalink
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
README.md Update README.md 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

README.md

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