VueTables options API

VueTables options API

by Mantaya Fishaimer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables/master/dist/vue-tables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="vue-tables-options" class="container">
  <h2>VueTables Options API (for Vue.js v1)</h2>
  <v-client-table :data="data" :columns="columns" :options="options"></v-client-table>
</div>

CSS

#vue-tables-options {
  text-align: center;
}

table {
  text-align: left;
}

h2 {
  margin-bottom: 10px;
}

thead tr:nth-child(2) th {
  font-weight: normal;
}

.VueTables__sortable {
  cursor: pointer;
}

JavaScript

Vue.use(VueTables.client, {
  perPage: 25
})

new Vue({
  el: "#vue-tables-options",
  data: {
    columns: ['option', 'type', 'description', 'default'],
    data: [{
      option: 'headings',
      type: 'Object',
      description: 'table headings',
      default: 'gleaned from the first row properties. underscores become spaces. First letter captialized'
    }, {
      option: 'sortable',
      type: 'Array',
      description: 'sortable columns',
      default: 'all columns except for custom ones'
    }, {
      option: 'perPage',
      type: 'number',
      description: 'initial records per page',
      default: "<code>10</code>"
    }, {
      option: 'perPageValues',
      type: 'Array',
      description: 'records per page options',
      default: '<code>[10,25,50,100]</code>'
    }, {
      option: 'templates',
      type: 'Object',
      description: 'wrap your cell content with a template. You can also create new custom columns. e.g:<pre><code>templates: {<br>  edit: function(row) {<br>return `&lta href="#/${row.id}/edit">&lti class=\'fa fa-edit\'>&lt/i>&lt/a>`<br>},<br>age:function(row) {<br> return this.calcAge(row.birth_date);<br>  } <br>}</code></pre> The <code>this</code> keyword in the function will refer to the root vue instance',
      default: '<code>{}</code>'
    }, {
      option: 'compileTemplates',
      type: 'boolean',
      description: 'compile vue.js logic on templates.<br>The logic is attached to <i>the component\'s instance</i>, so don\'t forget to factor in the scope. e.g: <pre><code>function(row) {<br> return `&lt;span @click="$parent.doSomething(${row.id})">Click me&lt;/span>`</code><br>}</pre>If you are using a component it must be registered globally using <code>Vue.component</code>',
      default: '<code>false</code>'
    }, {
      option: 'texts',
      type: 'Object',
      description: 'Table texts',
      default: "<pre><code>texts:{<br>count:'{count} Records',<br>filter:'Filter Results:',<br>filterPlaceholder:'Search...