Vue.js向けの高機能・高性能なテーブルコンポーネントvxe-tableを紹介したい

# 何に関する記事か？

:white_check_mark: **[vxe-table](https://github.com/x-extends/vxe-table/blob/HEAD/README.en.md) というVue.js向けのテーブルUIコンポーネントを紹介**する記事です。
かなり高機能・高性能なライブラリなのですが、中国発ということもあり日本語の情報が見当たらなかったので記事にしてみました。

:warning: この記事ではコンポーネントの提供する機能のほんの一部しか紹介していません。より詳細な情報は以下のリンクから参照してください。

## :link: Link

* [GitHub - vxe-table](https://github.com/x-extends/vxe-table/blob/HEAD/README.en.md)
  * コンポーネントの概要やインストール手順、サンプルコードなど
* [vxe-table 公式ガイド(英語・中国語)](https://x-extends.github.io/vxe-table/#/table/base/basic)
  * **コンポーネントの提供する機能・サンプルコードやAPIリファレンス**など
  * かなりたくさんの機能が提供されているので、是非一度チェックしてみてください！

# 誰にとってオススメか？

[Element](https://element.eleme.io/#/en-US), [Vuetify](https://vuetifyjs.com/ja/) などのコンポーネントライブラリを使っていて、**テーブル(グリッド)コンポーネントで実現に手間のかかる機能がある場合や性能的な問題を抱えている場合にオススメ**です。
とくに**テーブルコンポーネントに多様な機能・性能を求められる業務系のアプリなどで良さを発揮しやすい**と思っています。

以下では、`vxe-table` の基本的な書き方を押さえた後、
Element / Vuetify との簡単な性能比較を行うサンプルを作成しています。

# `vxe-table` の基本的な書き方

## install

以下のリンクに沿って、CDNかnpmでインストールしましょう。
https://github.com/x-extends/vxe-table/blob/HEAD/README.en.md#installing

日本語化にも対応されています。
https://x-extends.github.io/vxe-table/#/table/start/i18n

## シンプルなテーブルの例

まずは [GitHub - Example](https://github.com/x-extends/vxe-table/blob/HEAD/README.en.md#example) のシンプルな例から見てみます。
※コメントを追記しています。

```vue
<template>
  <div>
    <!-- vxe-tableコンポーネントにtableDataをバインドする -->
    <vxe-table :data="tableData">
      <!-- 各カラムをvxe-table-columnで定義する -->
      <!-- type="seq"で行番号を表示する -->
      <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
      <!-- tableDataのkey名をfieldとして指定する -->
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // vxe-tableにバインドされるデータ
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>
```

これまでに他のテーブルコンポーネントを利用したことのある方はすぐに理解できると思います。
実装ではこれを基本形として、`<vxe-table>`や`<vxe-table-column>`タグにPropsを追加していく形になります。

## JSからのテーブル操作

JSからテーブルを操作したい場合は `vxe-table` タグに `ref` を付けて、`this.$refs` から取得したテーブルコンポーネントからAPIを利用します。
例えば、2行目のチェックボックスをtoggleさせたい場合は以下のようなソースになります。

```vue
<template>
  <div>
    <button @click="toggleSecondRow">2行目のチェックボックスを操作</button>

    <!-- テーブルにrefで名前を付ける -->
    <vxe-table ref="myTable" :data="tableData">
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  },

  methods: {
    toggleSecondRow() {
      // vxe-tableのAPIを利用してチェックボックスの2行目をtoggleさせる
      this.$refs.myTable.toggleCheckboxRow(this.tableData[1]);
    }
  }
}
</script>
```

:tada: これで **`vxe-table` のガイドを読むのに最低限必要な準備は完了**です。
後は **[vxe-table 公式ガイド](https://x-extends.github.io/vxe-table/#/table/base/basic) を読めば実現したい機能を実装していける**はずです！

# `vxe-table` と他のコンポーネントライブラリとの性能比較

`vxe-table` では `virtual scroller` が標準で組み込まれているため、大量データでも高い性能を発揮します。
個人的にこのライブラリで一番感動したポイントなので、**大量データのテーブル実装を行ってみて、簡易的な性能比較をしてみたい**と思います。

具体的には、Element / Vuetify / vxe-table でそれぞれ10列×1000行のテーブルデータと行選択できるチェックボックスを実装します。

## 1. Element

https://jsfiddle.net/Nag729/f3j2txnm/20/

スクロールからすでに遅く、チェックボックスの選択はスムーズとは言い難いですね:cry:
ソートも同様に時間がかかっています。

## 2. Vuetify

https://jsfiddle.net/Nag729/u5jgqvr4/2/

Element と比較すると優秀で、スクロールにストレスはありません
ただ、全データの選択やカラムソートになると結構待たされます:expressionless:

## 3. vxe-table

https://jsfiddle.net/Nag729/o13xmpn0/6/

スクロール・チェックボックス選択・ソートの全てがスムーズに動いています:blush:
自前でライブラリや設定を追加しなくてもこれだけの大量データに対応してくれるのは嬉しいですね！

# 終わりに

以上、[vxe-table](https://github.com/x-extends/vxe-table/blob/HEAD/README.en.md) の紹介でした。
現状でもかなりの機能が用意されている上に、これから先もバージョンアップが予定されているようなので、是非一度使ってみてください。