Vue Tables 2 Demo - Server

Vue Tables 2 Server Component Live Demo

by surftribe paolo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<div id="app">
  <h3>
    Vue Tables 2 - Server Side Demo
  </h3>
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://api.github.com/users/matfish2/repos" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

CSS

h3 {
  text-align: center;
}

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  methods: {
    formatDate(date) {
      return moment(date).format('DD-MM-YYYY HH:mm:ss');
    }
  },
  data: {
    columns: ['name', 'created_at', 'updated_at', 'pushed_at'],
    tableData: [],
    options: {
      perPage: 25,
      perPageValues: [25],
      requestAdapter(data) {
        return {
          sort: data.orderBy ? data.orderBy : 'name',
          direction: data.ascending ? 'asc' : 'desc'

        }
      },
      responseAdapter({
        data
      }) {
        return {
          data,
          count: data.length
        }
      },
      filterable: false,
      templates: {
        created_at(h, row) {
          return this.formatDate(row.created_at);
        },
        updated_at(h, row) {
          return this.formatDate(row.updated_at);
        },
        pushed_at(h, row) {
          return this.formatDate(row.pushed_at);
        }
      }
    }
  }
});