「Vue-good-table」で高機能なテーブルを実装する

vue-good-tableとは

vue-good-tableは、vuejs用の使いやすい強力なデータテーブルです。
並べ替え、列フィルタリング、ページネーション、グループ化などの高度なカスタマイズが可能です。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install --save vue-good-table

<link href="https://cdn.jsdelivr.net/npm/vue-good-table@2.16.3/dist/vue-good-table.css" rel='stylesheet'>

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

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

導入手順

基本の使い方は以下になります。

1. Vue-good-tableプラグインを取り込む

webpack等

import VueGoodTablePlugin from 'vue-good-table';

// import the styles 
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);

WEBページ

Vue.use(window.vueGoodTable.default);

2. テーブルのデータを準備

列用のデータとしてcolumnsを用意します。
行用のデータとしてrowsを用意します。

var app = new Vue({
  el: '#app',
  data:{
    columns: [
      {
        label: 'id',
        field: 'id',
        type: 'number',
      },
      {
        label: 'Name',
      　field: 'name',
      },
      {
        label: 'Age',
        field: 'age',
        type: 'number',
      },
      {
        label: 'Created On',
        field: 'createdAt',
        type: 'date',
        dateInputFormat: 'YYYY-MM-DD',
        dateOutputFormat: 'MMM Do YY',
      },
      {
        label: 'Percent',
        field: 'score',
        type: 'percentage',
      },
    ],
    rows: [
      { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
      { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
      { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
      { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
      { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
      { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
    ]
  }
});

3.テンプレート設置する

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

:columns プロパティで列の型付けを行います。
配列形式のオブジェクトでlabel、fieldを必須項目として設定します。
labelは列名、field は :rows のオブジェクトkey を設定します。

:rows プロパティに行のデータを設定します。
配列形式のオブジェクトで、:columns で設定したfield値をkeyに設定して値を紐付けます。

<div id="app">
  <vue-good-table :columns="columns" :rows="rows"/>
</div>

サンプル

table オプション

tableのオプションは以下になります。

設定例

<vue-good-table> にプロパティを設定します。

<vue-good-table
  :columns="columns"
  :rows="rows"
  max-height="300px">
</vue-good-table>

オプション 一覧

詳しくは下記ドキュメント参照

https://xaksis.github.io/vue-good-table/guide/configuration/

サンプル

table イベント

tableのイベントは以下になります。

設定例

@on-row-clickのような形式でカスタムイベントを設定します。

<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-click="onRowClick">

イベント 一覧

詳しくは下記ドキュメント参照

https://xaksis.github.io/vue-good-table/guide/configuration/table-events.html#on-row-click

サンプル

Search オプション

Vue-good-tableはテーブルをフィルタリングする2つの方法をサポートしています。

1. テーブル内のすべてのレコードを検索するグローバル検索
2. 特定の列に基づいてフィルタリングする列フィルタ

設定例

search-options プロパティにオブジェクト形式で設定します。

<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    trigger: 'enter',
    skipDiacritics: true,
    searchFn: mySearchFn,
    placeholder: 'Search this table',
    externalQuery: searchQuery
  }">
</vue-good-table>

オプション 一覧

詳しくは下記ドキュメント参照

https://xaksis.github.io/vue-good-table/guide/configuration/search-options.html#searchfn

サンプル

Sort オプション

テーブルの並べ替えに関連する一連のオプションです。

設定例

sort-options プロパティにオブジェクト形式で設定します。

<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'name', type: 'asc'}
  }">
</vue-good-table>

オプション 一覧

詳しくは下記ドキュメント参照

https://xaksis.github.io/vue-good-table/guide/configuration/sort-options.html#enabled

サンプル

Pagination オプション

テーブルのページ区切りに関連する一連のオプション。 これらはそれぞれオプションであり、プロパティを省略した場合は妥当なデフォルト値が使用されます。

設定例

pagination-options プロパティにオブジェクト形式で設定します。

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    mode: 'records',
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    pageLabel: 'page', // for 'pages' mode
    allLabel: 'All',
  }">
</vue-good-table>

オプション 一覧

詳しくは下記ドキュメント参照

https://xaksis.github.io/vue-good-table/guide/configuration/pagination-options.html#mode

サンプル

recodesモード

<vue-good-table
　・
　・
  :pagination-options="{
    mode: 'records',
   ・
　 ・
　 ・
}"></vue-good-table>

pagesモード

<vue-good-table
　・
　・
  :pagination-options="{
    mode: 'pages',
   ・
　 ・
　 ・
}"></vue-good-table>

高度な構成

Checkbox Table

select-options プロパティで enabled: true を設定する。

<vue-good-table
  :columns="columns"
  :rows="rows"
  :select-options="{ enabled: true }">
</vue-good-table>

Grouped Table

group-options プロパティで enabled: true を設定する。

<vue-good-table
  :columns="columns"
  :rows="rows"
  :group-options="{ enabled: true }">
</vue-good-table>

行データrowsへグループごとのオブジェクトを設定する。

data:{
  rows: [
    {
      mode: "span", 
      label: "Mammal", 
      html: false,
      children: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
      ]
    },
    {
      mode: "span",
      label: "Reptiles", 
      html: false,
      children: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
      ]
    },
  ],
}

まとめ

Searchのみならずsort、pagenation等々、ものすごくボリューミーなデータテーブルライブラリでした。

Qiitaのメルマガを見ていたら「Vue.js おすすめライブラリ 21選（おまけ+1）」という投稿で見かけて、チョロっと記事にしようと思いましたが、想像以上に高カロリーな機能が揃っていました。

今日はこの辺でー