Vue tables2 Simple

Vue tables2 Simple

by kimulla

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">Simple</h3>

<div id="app">
  <v-client-table :columns="columns" :data="data" :options="options">
    <a slot="email" slot-scope="props" :href="`mailto:${props.row.email}`">
    {{props.row.email}}
    </a>
  </v-client-table>
</div>

JavaScript

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: [
      'id',
      'name',
      'email'
    ],
    data: getData(),
    options: {
      groupBy: 'group_name',
      toggleGroups : true,
      headings: {
        id: 'id',
        name: '名前',
        email: 'メールアドレス'
      },
      sortable: [
        'id', 'name'
      ],
      texts: {
        filterPlaceholder: '検索する'
      }
    }
  }
});

function getData() {
  return [{
      'id': 1,
      'name': 'sample1',
      'email': 'sample1@example.com',
      'group_name': '人事部'
    },
    {
      'id': 2,
      'name': 'sample2',
      'email': 'sample2@example.com',
      'group_name': '経理部'
    },

    {
      'id': 3,
      'name': 'sample3',
      'email': 'sample3@example.com',
      'group_name': '人事部'
    },
    {
      'id': 4,
      'name': 'sample4',
      'email': 'sample4@example.com',
      'group_name': '総務部'
    }
  ];
}