BootstrapVueで、さらっと表を作る

はじめに

Vue.jsというと、RouterやVuexを併用してSPAを作るものと思う方もいるかもしれませんが、
PHPなどでの同期処理やちょっとした非同期通信だけでも、いろいろな事ができます。
例えば、ユーザーのアクション（クリックやタップ婦）で動的に切り替わるUIなどです。

Vue単体でもいろいろ作れますが、BootstrapVueのようなフレームワークを追加すると、より簡単に色々なUIが作成できます。

今回は、バックエンドから割と好評だった表のサンプルを、備忘を兼ねて掲載します。

使用するもの

Vue.js (https://jp.vuejs.org/)
BootstrapVue (https://bootstrap-vue.js.org/)

＊より簡単にやるために、BootstrapVue を使用しています。
また、元はBootstrapなので、デザイナーさんがstyleを設定しやすいという事もあります。

作り方

Buildの環境をつくる

自分でwebpackで設定したり、VueCLI などで簡単に作っても良いです。
https://cli.vuejs.org/

ブラウザで読み込む（script要素利用）

とりあえずこのサンプルでは、ブラウザで読み込んでしまいます。
（一番手っ取り早い方法でもあります）

参考はこちら。
https://bootstrap-vue.js.org/docs#browser
上記のサンプルだとIntersectionObserverのpollyfillをloadしていますが、大抵は無くても大丈夫です。

表を作る

表のコンポーネント

表を作るコンポーネントはこちらになります。
BootstrapVueのコンポーネントになります。

b-table
https://bootstrap-vue.js.org/docs/components/table/

b-tableのプロパティ

プロパティはいろいろありますが、まずはこの２つです。
データを表示する表であれば、これだけで十分です。

• items

表に表示するのデータ本体です。
このプロパティにデータをArrayで渡します。
またデータのArrayは、Key:ValueのObjectになります。

// sample
[
  { 
    age: 40,
    name: 'admin1',
    email: '[e-mail]'
  },
  ...
]

• fields

fieldsは「見出し」になります。HTMLでのthです。
これもArrayで渡します。

// sample
[
  {
    key: 'name',
    label: 'Name'
  },
]

keyはitemsのObjectのKeyになります。
labelは見出しとして表示するデータになります。
fieldsのkeyの値と、items内のObjectのkeyがマッチすると見出しとして表示されます。

サンプル

＊「表サンプル」を見てください

See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.

---

ちょっとした応用

特定のデータを非表示にしたい。でもitemsを変更したくない

こんな時は、fieldsから表示したくないkey:valueを削除する事で対応できます。

サンプル

＊「年齢非表示サンプル」を見てください

See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.

ソートつけたい、一部にHTMLを追加したい

まずソートの場合は、fieldsにsortableの追加で対応できます。
sortableを追加した列がソート対象になります。

一部のセルにHTMLを入れたい、例えばリンクしたい場合などはもう少しコードの追加が必要になります。
下記のコードで、セルを指定して表示したいデータとHTMLを設定します。
下記では、emailのセルにmailtoのリンクを設置しています。

        <template v-slot:cell(email)="data">
          <a :href="`mailto:${data.item.email}`">{{ data.item.email}}</a>
        </template>

サンプル

＊「リンクとソート機能付き」を見てください

See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.

参考

Tables
https://bootstrap-vue.js.org/docs/components/table/

Sorting
https://bootstrap-vue.js.org/docs/components/table/#sorting

Custom data rendering
https://bootstrap-vue.js.org/docs/components/table/#custom-data-rendering

---

普通にtableを書くと、table要素からtr、ht、tdを記述して、そこにloop設定してとなりますが、結構簡単に作れると思います。
他にもいろいろなプロパティがありますので、何かのプロジェクト等で利用してみてください。

閲覧ありがとうございました。