VueTables Client-Side Demo

A live demo of the most up-to-date version of vue-tables

by Brent Coder

HTML

<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.17/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.17/daterangepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="people" class="container">
  <h2>VueTables Client-Side Demo</h2>
  <div class="alphabet-filter">
    <p>Custom Filter Example:</p>
    <button class="btn btn-default" :class="{active:letter==selectedLetter}" v-for="letter in letters" @click="alphabetFilter(letter)">{{letter}}</button>
    <button class="btn btn-default" @click="alphabetFilter('')">Clear</button>
  </div>
  <p>Average Age: {{averageAge}}</p>
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
  <h4>Want to use the pagination component independently? Use <a target="_blank" href="https://www.npmjs.com/package/v-pagination">v-pagination</a></h4>
</div>

CSS

#people {
  text-align: center;
  width: 95%;
  margin: 0 auto;
}

h2 {
  margin-bottom: 30px;
}

th,
td {
  text-align: left;
}

th:nth-child(n+2),
td:nth-child(n+2) {
  text-align: center;
}

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

.VueTables__sort-icon {
  margin-left: 10px;
}

.VueTables__dropdown-pagination {
  margin-left: 10px;
}

.VueTables__highlight {
  background: yellow;
  font-weight: normal;
}

.VueTables__sortable {
  cursor: pointer;
}

.VueTables__date-filter {
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

.VueTables__filter-placeholder {
  color: #aaa;
}

.VueTables__list-filter {
  width: 120px;
}

JavaScript

Vue.use(VueTables.client, {
  compileTemplates: true,
  //highlightMatches: true,
  //pagination: {
  // dropdown:true
  // chunk:5
  // },
  filterByColumn: true,
  texts: {
    filter: "Search:"
  },
  datepickerOptions: {
    showDropdowns: true
  }
  //skin:''
});

new Vue({
  el: "#people",
  ready: function() {
    this.$on('vue-tables.row-click', function(row) {
      console.log(row);
    });

    this.setAverageAge(this.tableData);

    this.$on('vue-tables.filtered', function(data) {
      this.setAverageAge(data);
    }.bind(this));
  },
  methods: {
    calcAge: function(birthDate) {
    	return birthDate.fromNow('years')
    },
    setAverageAge: function(data) {

      if (!data.length) {
        this.averageAge = 0;
        return;
      }

      var total = data.reduce(function(curValue, prevValue) {

        return parseInt(prevValue.birth_date.fromNow(' ')) + curValue;
      }, 0)

      this.averageAge = (total / data.length).toFixed(2);
    },
    deleteMe: function(id) {
      alert("Delete " + id);
    },
    alphabetFilter: function(letter) {
      this.selectedLetter = letter;
      this.$broadcast('vue-tables.filter::alphabet', letter);
    },
  },
  data: {
    columns: ['name', 'pet', 'birth_date'],
    options: {
      dateColumns: ['birth_date'],
      headings: {
        name: 'Name',
        birth_date: 'Birth Date',
        age: 'Age',
        edit: 'Edit',
        delete: 'Delete'
      },
      templates: {
        age: function(row) {
          return this.calcAge(row.birth_date);
        },
        edit: function(row) {
          return `<a href='#!/${row.id}/edit'><i class='glyphicon glyphicon-edit'></i></a>`
        },
        delete: function(row) {
          return `<a href='javascript:void(0);' @click='$parent.deleteMe(${row.id})'><i class='glyphicon glyphicon-erase'></i></a>`

        }
      },
      listColumns: {
        pet: [{
          id: '0',
          text: 'Guinea Pig'
        }, {
          id: '1',
         ...