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

vue-scrolling-tableとは

vue-scrolling-tableは、theadやtfootを固定して、中のデータだけをスクロールすることができるテーブルコンポーネントライブラリです。

いわゆるDate Tableと違って、普通のTableタグ（コンポーネント）を使っているので、既存のTableタグからの切り替えが容易に行えます。

【動画サイズ：225KB】

環境

インストール

以下のUMDを使ってインストールします。

UMD

<script src="https://cdn.jsdelivr.net/npm/vue-scrolling-table@0.2.2/dist/vue-scrolling-table.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/richardtallent/vue-scrolling-table

導入手順

1. ライブラリの取り込み

const VueScrollingTable = window['VueScrollingTable'].default;

2.メソッドを設定

上記で取得したVueScrollingTableをVue.useに取り込みます。

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: 'hoge@hoge.com',
        tel: '000-000-0000'
      },
      {
        id: 2,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: 'hoge@hoge.com',
        tel: '000-000-0000'
      },
      {
        id: 3,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: 'hoge@hoge.com',
        tel: '000-000-0000'
      },
      {
        id: 4,
        firastName: 'Howard',
        lastName: 'Ramirez',
        mail: 'hoge@hoge.com',
        tel: '000-000-0000'
      }
    ] 
  }
});
 

3. テンプレートを準備

<vue-scrolling-table> を設置します。

[注意] サンプルはケバブケースで記載しています。

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

サンプル

>>専用ページで確認する

さいごに

theadやtfootを固定して、中のデータだけをスクロールすることができるテーブルコンポーネントライブラリでした。

珍しくUMDのファイルだけが用意されているライブラリです。

今日はこの辺でー