Skip to content

Documentation - Vuejs binding

Following the project philosophy the binding for Vuejs tries to be as declarative as possible and use mixins to add programmatic behavior to your component so you can focus on the template part only.

See the example CodePen. A more complete example should be available on the project repository.

Usage

The mixins will be built around the directives shown in the documentation part of this website with the following conventions:

Table mixin

This mixin should help you to create the root component. It will expose the currently displayed collection as the displayed property.

The only (and mandatory) configuration attribute will be the instance of your smart table

import {table} from 'smart-table-core';
import {table as tableMixin} from 'smart-table-vue'

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

// your table component (using the table component)
Vue.component("PersonTable", {
  mixins: [tableMixin],
  template: `
    <table>
      <thead>
          <tr>
            <th>Surname</th>
            <th>Name</th>
          </tr>
      </thead>
      <tbody>
      <tr v-for="item in displayed">
        <td>{{item.value.surname}}</td>
        <td>{{item.value.name}}</td>
      </tr>
      </tbody>
    </table>
    `
});

//your app: the table component is mounted and ready to be used (ie the displayed collection will react on any table state change)
new Vue({
  el: "#container",
  data: {
    smartTable: persons
  },
  template: `<Person-table :smart-table="smartTable"/>`
});

Sort mixin

This mixin will help you to use the sort directive.

Configurations attributes

smart-table
The instance of smart table
st-sort
The pointer to the sorted property
st-sort-cycle
Whether the toggle will cycle through the 3 sort states or simply pass from ascending sort to descending sort only (default to false)

Example

Here is an example of sortable header which will toggle the sort state when clicked and will change its class name based on the current sort state

import {sort} from 'smart-table-vue';

//use "sort" mixin to add a sortable behavior to an header
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 = "";
      }
    }
  }
});

//you can then use this component in other component template passing the relevant configuration
/*
 `
 <table>
   <thead>
   <tr>
   <th is="sortable-header" st-sort-cycle="true" :smart-table="smartTable" st-sort="name.last">Surname</th>
   <th is="sortable-header" :smart-table="smartTable" st-sort="name.first">Name</th>
   </tr>
   </thead>
 ...
 </table>
 `
 */

Search mixin

This mixin will help you to use the search directive.

Configuration attributes

smart-table
The instance of smart table
st-search-scope
An array of pointers which will define the search scope

Example

An example of a search input which will trigger a search whenever the input value changes

import {search} from 'smart-table-vue';

Vue.component('SearchInput', {
  template: `
<label>
    Search:
    <input type="search" v-model="searchText" placeholder="Case sensitive search"/>
</label>`,
  mixins: [search],
  data: function () {
    return {searchText: ''}
  },
  created(){
    this.commit = (val) => this.search(val); //this.search is the directive method
  },
  watch: {
    searchText: function (val) {
      this.commit(val);
    }
  }
});

//you can then use this component in other component template passing the relevant configuration
/*
 `
 <table>
 <thead>
 <tr>
   <th>
   <search-input :smart-table="smartTable" :st-search-scope="searchScopeArray"/>
   </th
 </tr>
 </thead>
 ...
 </table>
 `
 */

Filter mixin

This mixin will help you to use the filter directive

Configuration attributes

smart-table
The instance of smart-table
st-filter
The pointer to the filtered property
st-filter-type
The type of the property (defaults to string)
st-filter-operator
The operator of the filter clause (defaults to "includes")

Example

An example of a filter input component which will trigger a filter query whenever the input value changes

import {filter} from 'smart-table-vue';

Vue.component('FilterInput', {
  template: `
<label>
    {{label}}
    <input v-model="filterText"/>
</label>`,
  mixins: [filter],
  props:['label'],
  data: function () {
    return {filterText: ''}
  },
  created(){
    this.commit = (val) => this.filter(val)
  },
  watch: {
    filterText: function (val) {
      this.commit(val);
    }
  }
});

//you can then use this component in other component template passing the relevant configuration
/*
 `
 <table>
 <thead>
 <tr>
 <th>
 <filter-input :smart-table="smartTable" st-filter="name.first" label="filter first name"/>
 </th
 </tr>
 </thead>
 ...
 </table>
 `
 */

Pagination mixin

This mixin will help you to use the slice directive

Configuration attributes

smart-table
The instance of smart-table

Example

This example provides a basic pagination component displaying the current page and which allows to go the previous or the next page

import {pagination} from 'smart-table-vue';

Vue.component('Pagination', {
  mixins: [pagination],
  data: function () {
    return {
      isPreviousDisabled: true,
      isNextDisabled: false,
    }
  },
  template: `
  <td>
    <button :disabled="isPreviousDisabled" v-on:click="selectPreviousPage">Previous</button>
    <span> - Page {{stState.page}} - </span>
    <button :disabled="isNextDisabled" v-on:click="selectNextPage">Next</button>
  </td>
`,
  watch: {
    stState: function () {
      this.isPreviousDisabled = !this.stDirective.isPreviousPageEnabled();
      this.isNextDisabled = !this.stDirective.isNextPageEnabled();
    }
  }
});

// you can the use this component
/*
 <table>
...
 <tfoot>
   <tr>
   <td is="Pagination" :smart-table="smartTable"></td>
   </tr>
 </tfoot>
 </table>
 */

Loading indicator mixin

This mixin will help you tu use the loading indicator directive

Configuration attributes

smart-table
The instance of smart-table

Example

This example will change the class name of a loading indicator overlay depending on the current processing state of the component

import {loadingIndicator} from 'smart-table-vue';

Vue.component('LoadingIndicator', {
  mixins: [loadingIndicator],
  template: `
    <div id="overlay" v-bind:class="{ 'st-working':stState.working}">
      Processing ...
    </div>`
});

//you can then use this component in other component template passing the relevant configuration
/*
 `
<div>
  <loading-indicator :smart-table="smartTable"/>
  <table>
  ...
  </table>
</div>
 `
 */