はじめに

Qiitaのメルマガを見ていたら「Vue.js おすすめライブラリ 21選(おまけ+1)」という投稿がありました。

そこで紹介されていた「Vue-good-table」が気になったので調べてみました。

 

環境

vue.js: 2.6.10
Vue-good-table: 2.16.3

 

インストール

導入には、npmCDNを利用します。

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>

 

導入手順

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

 

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

■npm版

import VueGoodTablePlugin from 'vue-good-table';

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

Vue.use(VueGoodTablePlugin);

 

■CDN版

Vue.use(window.vueGoodTable.default);

 

2 – Vueにテーブルデータをもたせる

var app = new Vue({
  el: '#app',
  data:{
    columns: [
        {
          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 – テンプレート設置する

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

 

サンプル

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

 

 

table オプション

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

 

 

table イベント

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

 

イベント 一覧

説明
@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.0

 

 

Search オプション

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

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

 

オプション 一覧

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

 

 

Sort オプション

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

 

オプション 一覧

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

 

 

Pagination オプション

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

 

オプション 一覧

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モード

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

 

 

■pagesモード

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

 

まとめ

Searchのみならずsortpagenation等々ものすごくボリューミーなライブラリです。

チョロっと記事にしようと思いましたが、想像以上に高カロリーな機能が揃っていました。

なので、今回の記事以外の機能は別の記事にしようと思います。

また後ほど

今日はこの辺でー

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください