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になります。

```javascript
// sample
[
  { 
    age: 40,
    name: 'admin1',
    email: 'hoge@for.jp'
  },
  ...
]
```

- `fields`

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

```javascript
// sample
[
  {
    key: 'name',
    label: 'Name'
  },
]
```
`key`は`items`のObjectのKeyになります。
`label`は見出しとして表示するデータになります。
`fields`のkeyの値と、`items`内のObjectのkeyがマッチすると見出しとして表示されます。

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="H_Naito" data-slug-hash="RwPaKxJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bootstrap-vue b-table sample">
  <span>See the Pen <a href="https://codepen.io/H_Naito/pen/RwPaKxJ">
  bootstrap-vue b-table sample</a> by H.N (<a href="https://codepen.io/H_Naito">@H_Naito</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
---

# ちょっとした応用

##特定のデータを非表示にしたい。でもitemsを変更したくない
こんな時は、`fields`から表示したくない`key:value`を削除する事で対応できます。

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="H_Naito" data-slug-hash="RwPaKxJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bootstrap-vue b-table sample">
  <span>See the Pen <a href="https://codepen.io/H_Naito/pen/RwPaKxJ">
  bootstrap-vue b-table sample</a> by H.N (<a href="https://codepen.io/H_Naito">@H_Naito</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##ソートつけたい、一部にHTMLを追加したい
まずソートの場合は、fieldsに`sortable`の追加で対応できます。
`sortable`を追加した列がソート対象になります。

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

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="H_Naito" data-slug-hash="RwPaKxJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bootstrap-vue b-table sample">
  <span>See the Pen <a href="https://codepen.io/H_Naito/pen/RwPaKxJ">
  bootstrap-vue b-table sample</a> by H.N (<a href="https://codepen.io/H_Naito">@H_Naito</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#参考

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設定してとなりますが、結構簡単に作れると思います。
他にもいろいろなプロパティがありますので、何かのプロジェクト等で利用してみてください。

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