VueTables Client-Side Demo

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

by Evert Ramos

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">
<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">
<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>
  <v-client-table :data="tableData" :options="options"></v-client-table>
</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;
}

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",
  methods: {
    deleteMe: function(id) {
      alert("Delete " + id);
    },
    alphabetFilter: function(letter) {
      this.selectedLetter = letter;
      this.$broadcast('vue-tables.filter::alphabet', letter);
    },
  },
  data: {
    options: {
      columns: ['name', 'birth_date'],
      dateColumns: ['birth_date'],
      headings: {
        name: 'Name',
        birth_date: 'Birth Date',
        age: 'Age',
        edit: 'Edit',
        delete: 'Delete'
      },
      templates: {
        age: function(row) {
          return row.birth_date.fromNow(' ');
        },
        edit: "<a href='#!/{id}/edit'><i class='glyphicon glyphicon-edit'></i></a>",
        delete: "<a href='javascript:void(0);' @click='$parent.deleteMe({id})'><i class='glyphicon glyphicon-erase'></i></a>"
      },
      customFilters: [{
          name: 'alphabet',
          callback: function(row, query) {
            return row.name[0] == query;
          }
        }]
        //  orderBy: {
        //        column:'age',
        //        ascending:false
        //    }
    },
    letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
    selectedLetter: '',
    tableData: [{
      id: "1",
      name: "Sidney Brakus",

      birth_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1))

    }, {
      id: "2",
      name: "Jovan Koepp",

      birth_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1))

    }, {
      id: "3",
      name: "Shanie McCullough PhD",

      birth_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1))

    }, {
      id: "4",
      name: "Miss Laury Farrell",

 ...