Vue.jsでtheadを維持したままスクロール可能なテーブルを実装する「vue-scrolling-table」

by kabanoki

HTML

<div id="app">
  <vue-scrolling-table class="table" :include-footer="true">
    <template slot="thead">
      <tr>
        <th v-for="col in columns"
          :class="col.cssClasses"
          :key="col.id">{{ col.title }}</th>
      </tr>
    </template>
    <template slot="tbody">
      <tr v-for="item in items" :key="item.id">
      <td v-for="col in columns"
        :class="col.cssClasses"
        :key="col.id">{{ item[col.id] }}</td>
      </tr>
    </template>
    <template slot="tfoot">
      <tr>
        <th v-for="col in columns"
          :class="col.cssClasses"
          :key="col.id">{{ col.title }}</th>
      </tr>
    </template>
  </vue-scrolling-table>
</div>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-scrolling-table.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

table.scrolling.scrollx tbody {
  max-height: 200px;
}

Vue

const VueScrollingTable = window['VueScrollingTable'].default;
Vue.use(VueScrollingTable);  
new Vue({
  el: '#app',
  data: {
    columns: [
      {id:'id', title:'ID' },
      {id:'firastName', title:'First Name' },
      {id:'lastName', title:'Last Name' },
      {id:'mail', title:'MAIL' },
      {id:'tel', title:'TEL' }
    ],
    items: [
      {
        id: 1,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 2,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 3,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 4,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 5,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 6,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 7,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 8,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 9,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 10,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
      },
      {
        id: 11,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: '[email protected]',
        tel: '000-000-0000'
     ...