Vue Tables 2 Demo

Vue Tables 2 live demo

by DenysKor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h3 class="vue-title">Vue Tables 2 Demo - Client Component</h3>

<div id="app">
  <v-client-table :columns="columns" :data="data" :options="options">
    <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>

    <div slot="child_row" slot-scope="props">
      The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
    </div>

  </v-client-table>
</div>

<p class="vue-pagination-ad">
  Like the pagination component and want to use it independently? Try <a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">vue-pagination-2</a>
</p>

CSS

#app {
  width: 95%;
  margin: 0 auto;
}

.VuePagination {
  text-align: center;
}

.vue-title {
  text-align: center;
  margin-bottom: 10px;
}

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.VueTables__child-row-toggler {
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}

JavaScript

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'uri'],
    data: getData(),
    options: {
    	filterByColumn: true,
      headings: {
        name: 'Country Name',
        code: 'Country Code',
        uri: 'View Record'
      },
      sortable: ['name', 'code'],
      filterable: ['name', 'code']
    }
  }
});

function getData() {
  return [{
    code: "ZW",
    name: "Zimbabwe",
    created_at: "2015-04-24T01:46:50.459583",
    updated_at: "2015-04-24T01:46:50.459593",
    uri: "http://api.lobbyfacts.eu/api/1/country/245",
    id: 245
  }, {
    code: "ZM",
    name: "Zambia",
    created_at: "2015-04-24T01:46:50.457459",
    updated_at: "2015-04-24T01:46:50.457468",
    uri: "http://api.lobbyfacts.eu/api/1/country/244",
    id: 244
  }, {
    code: "YE",
    name: "Yemen",
    created_at: "2015-04-24T01:46:50.454731",
    updated_at: "2015-04-24T01:46:50.454741",
    uri: "http://api.lobbyfacts.eu/api/1/country/243",
    id: 243
  }, {
    code: "EH",
    name: "Western Sahara",
    created_at: "2015-04-24T01:46:50.452002",
    updated_at: "2015-04-24T01:46:50.452011",
    uri: "http://api.lobbyfacts.eu/api/1/country/242",
    id: 242
  }, {
    code: "WF",
    name: "Wallis & Futuna",
    created_at: "2015-04-24T01:46:50.449346",
    updated_at: "2015-04-24T01:46:50.449355",
    uri: "http://api.lobbyfacts.eu/api/1/country/241",
    id: 241
  }, {
    code: "VN",
    name: "Vietnam",
    created_at: "2015-04-24T01:46:50.446644",
    updated_at: "2015-04-24T01:46:50.446652",
    uri: "http://api.lobbyfacts.eu/api/1/country/240",
    id: 240
  }, {
    code: "VE",
    name: "Venezuela",
    created_at: "2015-04-24T01:46:50.444031",
    updated_at: "2015-04-24T01:46:50.444040",
    uri: "http://api.lobbyfacts.eu/api/1/country/239",
    id: 239
  }, {
    code: "VU",
    name: "Vanuatu",
    created_at: "2015-04-24T01:46:50.441423",
    updated_at: "2015-04-24T01:46:50.441433",
    uri:...