Vue-Tables2とScrollBoosterを組み合わせてみる

概要

Vue.jsを使って、テーブルタグからデータ明細を見せるようなWebアプリケーションをサクッと実装。
ダッシュボード的なアプリなどでデータを見せる際に便利ではないでしょうか。
タイトルにあるライブラリを使う際の注意点やノウハウを展開します。

ライブラリの紹介

• ScrollBooster
• https://ilyashubin.github.io/scrollbooster/
• 【Github】 https://github.com/ilyashubin/scrollbooster
• マウスのドラッグスクロールを実現するライブラリ
• スマホのような、任意スクロールが簡単にできる。どんな動きなのかはリンク先を参照
• Vue-Tables2
• https://github.com/matfish2/vue-tables-2
• テーブルにソート・ページネーション・フィルタなどの機能を簡単に足せるライブラリ
• データ部はjsonで扱える。
• 動きのイメージはこちらの記事が詳しい https://www.kimullaa.com/entry/2018/05/08/171340

ポイント

• ScrollBoosterに渡すviewportとcontent
• $refsから取得するのが楽
• サンプルコードでは、Vue-Tables2が自動付与するtable-responsiveのclass名を使ってみた
• updateMetrics()の呼び出し
• Vue-Tables2にデータが入るとテーブルの幅部分のwidthが変わってしまうので、更新する必要がある
• その際に使用するのがScrollBooster.updateMetrics()
• Vue-Tables2が提供するイベント関数を使って、幅の更新をする
• 設定したのは「ソート(sorted)」「ページネーション(pagenation)」「件数変更(limit)」
• 「フィルタリング(filter)」でも幅変更があり得るが、幅が伸びる事は無いと思ったので設定してない
• $nextTickの使用
• 幅を更新する際、実DOMの更新がされてからでないと幅計算が正しくならないと思われるので、Vueの提供する$nextTickを使っている

サンプルコード

html

<div ref="table">
  <v-client-table :columns="vueTables.columns" :data="vueTables.data" :options="vueTables.options"
    @sorted="updateScrollBooster" @pagination="updateScrollBooster"
    @limit="updateScrollBooster">
  </v-client-table>
</div>

script

// 一部、ここに書いてない定数があるのでそのままは使えない。注意
    new Vue({
      el: '#app',
      data: {
        // vue-tables-2用定義
        vueTables: {
          columns: [
            'acceptDate',
            'validStartDate',
            'validEndDate',
            'productName',
          ],
          data: [],
          options: {
            headings: VUE_TABLES_HEADINGS,
            sortable: [
              'acceptDate', 'validStartDate', 'validEndDate', 'productName',
            ],
            orderBy: { column: 'acceptDate' },
            skin: 'table-striped table-bordered table-hover table-sm',
            texts: VUE_TABLES_TEXTS,
            perPage: 50,
            perPageValues: [50, 100, 500, 1000],
            sortIcon: VUE_TABLES_SORTICON
          },
        },
        scrollBoosterNormal: null,
      },
      mounted() {
        // ScrollBoosterを設定
        let viewport = this.$refs.table.querySelector('.table-responsive');
        let content = viewport.querySelector('table');
        this.scrollBooster = setScrollBooster(viewport, content);
      },
      methods: {
        updateScrollBooster() {
          // ScrollBoosterのviewport幅を更新する(検索結果に合わせて)
          this.$nextTick(function () {
            // nextTickでDOMの幅が確定した状態でupdateMetricsを実行する
            this.scrollBooster.updateMetrics();
          });
        },
      },
    })

補足

Vue-Tables2で横スクロールを有効にするために、実際にはCSS定義も行ってある(overflow-x: scroll)