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

2019年4月25日

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

vue-good-tableとは

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

 

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

 

環境

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

vue.js 2.6.10
Vue-good-table 2.16.3

 

ライブラリの取得

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

npm

npm install --save vue-good-table

CDN


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-good-table.css" rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 プロパティで列の型付けを行います。
配列形式のオブジェクトでlabelfieldを必須項目として設定します。
labelは列名、field:rowsオブジェクトkey を設定します。

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

 

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

 

サンプル

See the Pen vueGoodTable CDN base by カバの樹 (@kabanoki) on CodePen.dark

 

table オプション

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

設定例

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

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

 

オプション 一覧

type 説明

columns

Array テーブル列を記述するオブジェクトを含む配列。 列オブジェクト自体には、構成可能な多くのプロパティを含めることができます。
rows Array 行オブジェクトを含む配列。 各行オブジェクトには、テーブル行に表示されるデータが含まれています。
max-height String テーブル本体の最大高さを設定
fixed-header Boolean テーブルをスクロールしてもヘッダーが見えないように修正します。
line-numbers Boolean 各行の行番号を表示
row-style-class String or Function クラスを行に割り当てるためのプロパティ。 これは、CSSのクラス名または関数を表す文字列です。
rtl Boolean テーブルの右から左へのレイアウトを有効にする

Table Actions Slot

たとえば、印刷ボタンのようにテーブル固有のアクションを追加したい場合は、テーブルアクションスロットを使用できます。 グローバル検索が有効になっている場合は、その右側にアクションパネルが表示されます。
Table Actions Footer Slot ページ付けとテーブルの間にボタン用のスペースが必要な場合。 これはあなたが使うスロットです。
Empty state slot 空の状態スロットにもHTMLを指定できます。
mode String ソート/フィルタリングなどがクライアント側ではなくサーバー側で行われるようにするには、mode = remoteを設定します。
totalRecords Number 与えられたテーブル/フィルタに存在する行の総数。 詳細についてはリモートワークフローを参照してください。

 

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

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

 

サンプル

See the Pen vueGoodTable CDN Table Options by カバの樹 (@kabanoki) on CodePen.dark

 

table イベント

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

設定例

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

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

 

イベント 一覧

説明
@on-row-click テーブル行クリックで発生したイベント
@on-row-dblclick テーブル行クリックで発生したイベント
@on-cell-click テーブルセルクリックで発行されるイベント
@on-row-mouseenter 行mouseenterで発生したイベント
@on-row-mouseleave テーブル行で発生したイベント
@on-search グローバル検索時に発行されるイベント(グローバル検索が有効の場合)
@on-page-change ページネーションページの変更時に発行されるイベント(ページネーションが有効な場合)
@on-per-page-change ページごとのドロップダウンの変更時に発行されるイベント(ページネーションが有効な場合)
@on-sort-change ソート変更時に発行されるイベント。

@on-column-filter

列がフィルタリングされたときに発行されるイベント(リモートモードでのみ発行される)
@on-select-all allが選択されたときに発行されるイベント(チェックボックステーブルに対してのみ発行される)
@on-selected-rows-change 選択が変更されるたびに発行されるイベント(チェックボックステーブル上)

 

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

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

 

サンプル

See the Pen vueGoodTable CDN Table Options by カバの樹 (@kabanoki) on CodePen.dark

 

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>

 

オプション 一覧

type 説明
enabled Boolean テーブル全体に対する単一の検索入力を許可します
trigger String 入力の「入力」イベントで検索をトリガーするかどうかを指定できます。 デフォルトでは、テーブルはキー入力時に検索されます。
skipDiacritics boolean デフォルトでは、検索は発音区別符の比較を行うので、アクセント付きの文字を検索できます。 しかしこれは検索をある程度遅くします。 データにアクセント付きの文字が含まれていない場合は、このチェックを省略してパフォーマンスを向上させることができます。
searchFn Function グローバル検索用に独自の検索機能を指定できます。
placeholder String グローバル検索入力プレースホルダーのテキスト
externalQuery String テーブルの検索に独自の入力を使用したい場合は、このプロパティを使用できます。

 

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

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

 

サンプル

See the Pen vueGoodTable CDN search by カバの樹 (@kabanoki) on CodePen.dark

 

Sort オプション

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

 

設定例

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

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

 

オプション 一覧

type 説明
enabled Boolean テーブル全体の並べ替えを有効/無効にします。
initialSortBy Object or Array ウェイクアップ時にテーブルのデフォルトの並べ替えを指定できます

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

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

 

サンプル

See the Pen vueGoodTable CDN search by カバの樹 (@kabanoki) on CodePen.dark

 

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>

 

オプション 一覧

type 説明
enabled Boolean 表のページ区切りを有効にします。 デフォルトでは、ページ付け子はテーブルの一番下に作成されます。
mode String (default: 'records') ページ付けコントロールは、「レコード」と「ページ」という2つのモードでレンダリングできます。(records|pages)
position String (default: 'bottom') テーブルの「上」または「下」(上下)にページ区切りを追加します(デフォルトの位置は下)。(top|bottom)
perPage Integer (default: 10) 1ページに表示する行数
perPageDropdown Array (default:
[10,20,30,40,50])
ページあたりのアイテム数のドロップダウンオプションをカスタマイズする
dropdownAllowAll Boolean (default: true) ページごとのドロップダウンで[すべて]を有効または無効にします。
setCurrentPage Number 現在のページをプログラムで設定します。
pagination label/text options ページ区切りに表示される1つ以上のテキストを変更できます。
Replace Pagination Component ページネーションコンポーネントを自分のコンポーネントに置き換えることもできます。

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

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

 

サンプル

recodesモード

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

See the Pen vueGoodTable CDN Pagination records by カバの樹 (@kabanoki) on CodePen.dark

 

pagesモード

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

See the Pen vueGoodTable CDN Pagination pages by カバの樹 (@kabanoki) on CodePen.dark

 

高度な構成

Checkbox Table

 

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

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

See the Pen vueGoodTable CDN Checkbox Table by カバの樹 (@kabanoki) on CodePen.dark

 

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 },
      ]
    },
  ],
}

 

See the Pen vueGoodTable CDN Grouped by カバの樹 (@kabanoki) on CodePen.dark

 

まとめ

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

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

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , , ,