SIer だけど技術やりたいブログ

Vuejs vue-tables-2 でテーブル表示

vuejs javascript

vue-tables-2とは

vue-tables-2は、Vuejsでテーブルを表示するためのライブラリ。

  • 良い点

    • ソート/検索/ページングをクライアント側だけで実施することができる
    • サーバ側の実装はデータを全件返すだけのシンプルなAPIで済む

  • 注意点

    • 全データをクライアント側で保持する必要がある(データ量がクライアント側で保持できるサイズかどうかを事前に確認して適用すべき)

サンプルコードについて

サンプルコードはすべてJSFiddleに書いています。ソースコードはリンク先を参照してください。2018/5/9時点のmasterを直接参照しているので、急に動かなくなる可能性があります。

表示してみる

まずは、単純にデータを表示してみる。

https://jsfiddle.net/kimulla/9LLqhxut/19/

実装のポイント

  • :columnsで、表示するデータのフィールド名を指定する
  • :dataで、テーブルに表示する実データ(jsonの配列)を指定する
  • :optionsのheadingsで、テーブルヘッダ名を指定する
  • :optionsのtextsで、表示される文字列をデフォルトから変更する
  • :optionsのsortableで、ソート可能なカラムを指定する

リンクを作る

https://jsfiddle.net/kimulla/9LLqhxut/21

実装のポイント

  • slotを利用する
  • 別ライブラリが提供するコンポーネント(router-linkとか)も利用できる
  • 詳細はリファレンスを参照

カラムが多いとき

  • 横幅固定でスクロールバーが出る

https://jsfiddle.net/kimulla/9LLqhxut/25

データが多いとき

  • ページネーションされる
  • 表示領域のみDOMを作成するため、表示がめちゃくちゃ早い

https://jsfiddle.net/kimulla/9LLqhxut/28

カラムごとにフィルタを用意する

https://jsfiddle.net/kimulla/9LLqhxut/24/

実装のポイント

  • filterByColumnオプションをtrueにする
  • listColumnsはテキストボックス形式でフィルタさせたいときに使う
  • listColumnsのidはカラムの値と対応していて、textの文字列に置き換わる。これはいまいち使い道がわからない…

カラムごとに表示/非表示を切り替える

https://jsfiddle.net/kimulla/9LLqhxut/23

実装のポイント

  • columnsDropdownオプションをtrueにする

グルーピングする

https://jsfiddle.net/kimulla/9LLqhxut/26/

実装のポイント

  • groupByにグルーピングするカラム名を指定する

注意点

groupBy指定した状態でソートしても、グループ内でソートされない。 ソートはあくまでカラム単位で行われ、以下のようにグループが複数表示される。

https://jsfiddle.net/kimulla/9LLqhxut/26/

グループごとに表示/非表示を切り替える

https://jsfiddle.net/kimulla/9LLqhxut/27

実装のポイント

  • toggleGroupsオプションをtrueにする

その他のテーブルライブラリ

めちゃくちゃ似た名前でgithubスター数も多いライブラリとしてvuetable-2がある。 vuetable-2 はソート/検索/ページングをサーバAPIが実装する点がvue-tables-2と大きく違う。

一応、クライアントだけでテーブル表示することも可能だが、vuetable-2は、ソート/検索/ページングをサーバ側でやることを強く推奨している。
https://github.com/ratiw/vuetable-2/wiki/API-vs-Data

以下、どっちがいいんだろうかという自分の意見。

ソート/検索/ページングをクライアント側で実装するかサーバ側で実装するか

クライアント側は見た目に関する処理を、サーバ側は業務ロジックに関する処理をそれぞれ実装するのがよくあるWEBアプリケーションの考え方です。

画面上に現れない属性や関連性で検索するようなリッチな検索ならともかく、上記の機能ぐらいであれば、ソート/検索/ページングが業務ロジックだとは思いませんし、クライアント側で実装してもいいんじゃないかと思いました。

ただクライアント側はスペックが貧弱な場合も多いですし、最終的にはデータ量に依存すると思います。数十万件のデータで数百MBレベルだと、一括でレスポンスを返すときのネットワークコストが高く、また、クライアント側サーバ側ともにメモリ不足になる可能性があるため、サーバ側でソート/検索/ページングせざるをえないでしょう。

ただ、サーバ側でソート/検索/ページングを実装しようとすると、Spring Data系の自動生成ライブラリ活用しないと、だいぶ実装量が増えるので出来ればやりたくない… まずサーバ側の検索機能で一覧表示データを（カテゴリ別とかで）数千件まで絞っておいて、それ以降は上記ライブラリで細かく絞っていくのがちょうどいいかもしれない。違うかもしれない。