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>

  <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;
}

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);
    }
  },
  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>"
      },
      //  orderBy: {
      //        column:'age',
      //        ascending:false
      //    }
    },
    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",

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


    }, {
      id: "5",
      name: "Adrien Von",

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

    }, {
      id: "6",
      name: "Vaughn Kertzmann",

      birth_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1))
    }, {
      id: "7",
      name: "Effie Gottlieb V",

      birth_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1))
    }, {
      id:...