TabulatorをNuxtで使う


ご覧のスポンサーで提供します。
[Tabulator](http://tabulator.info/examples/4.4)
[TabulatorをVueで使う](https://qiita.com/yoh_zzzz/items/a5e72c0d5996500ba03f)
（参考にさせていただいただけです、念の為、、）

## tabulatorをインストール

最新バージョンのインストールは以下で良いのですが、今回は4.6.3で実装しました。

```
npm install tabulator-tables --save
```

バージョン指定

```
npm install  tabulator-tables@4.6.3 --save  
```

tabulatorのバージョンはpackage.jsonで確認できます ... "tabulator-tables": "^4.6.3",

環境

```javascript:package.json
{
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.6",
    "axios": "^0.21.4",
    "core-js": "^3.17.3",
    "dayjs": "^1.10.6",
    "eslint-plugin-lodash": "^7.3.0",
    "flatpickr": "^4.6.9",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "lodash.debounce": "^4.0.8",
    "nuxt": "^2.15.8",
    "nuxt-dayjs-module": "^1.1.2",
    "nuxt-flatpickr": "^0.0.2",
    "tabulator-tables": "^4.6.3",
    "vue-currency-filter": "^5.2.0",
    "vue-flatpickr-component": "^9.0.5",
    "vue-lodash": "^2.1.2",
    "vuetify": "^2.5.8"
  },
}

```

#### 余談
本当はtabulator5が出てた＆既に5をインストールしていたのですが、プロジェクトに合わせる必要があったためアンインストールから始めました。

```
npm uninstall tabulator-tables --save 
```

package-lock.jsonのtabulator関連が全て消せる

```
npm install  tabulator-tables@4.6.3 --save  
```

これでpackage-lock.jsonのtabulator関連が全て4.6.3に。


## moment.jsの読み込み

tabulatorを使うにはmoment.jsが必要です。nuxt.config.js内、CDNで読み込み

```javascript:nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js',
      },
    ],
  },
}
```

## デザイン

```components/Tabulator.vue
<style>
/** 大まかなデザインはテーマで設定 */
@import '~/node_modules/tabulator-tables/dist/css/tabulator_simple.min.css';

/** 細かいデザインは公式で公開されているクラスに付加 */
.tabulator-header .tabulator-col {
  background-color: #1a9386 !important;
  color: #ffffff;
}
</style>
```



## テーブルデータを定義

公式では、
1. Create your DOM element
2. Define some data for the table
3. Turn element into a Tabulator by passing a constructor object to the tabulator jQuery widget

の順で書かれているのですが、個人的に、データの定義を別のｊｓファイルに入れるような仕様が好まれるNuxtでは先にデータを定義しておいた方がやりやすいと思ったので、そのようにしています。

私は、テーブルデータをconstants/define.jsに定義しました。
TABLE_COLUMNがtable header,TABLE_DATAがtable bodyです。


```constants/define.js
export const TABLE_COLUMN = [
  { title: 'Name', field: 'name' },
  { title: 'Progress', field: 'progress', sorter: 'number' },
  { title: 'Gender', field: 'gender' },
  { title: 'Rating', field: 'rating' },
  { title: 'Date Of Birth', field: 'dob', align: 'center' },
]

export const TABLE_DATA = [
  {
    id: 1,
    name: 'Stephania Auer',
    progress: 64,
    gender: 'male',
    rating: 4,
    dob: '03/08/1989',
  },
  {
    id: 2,
    name: 'Mrs. Sebastian Thiel',
    progress: 31,
    gender: 'male',
    rating: 1,
    dob: '08/10/1989',
  },
  {
    id: 3,
    name: 'Treva Schuster',
    progress: 88,
    gender: 'male',
    rating: 3,
    dob: '19/09/1993',
  },
  {
    id: 4,
    name: 'Travis Jaskolski',
    progress: 46,
    gender: 'male',
    rating: 3,
    dob: '19/09/1990',
  },
  {
    id: 5,
    name: 'Melvina Tremblay',
    progress: 84,
    gender: 'female',
    rating: 5,
    dob: '19/09/1987',
  },
]

```


## DOMを作成

テーブルを表示するDOMを子コンポーネントに作成します。
サイトで、同じテーブルスタイルを使い回すような想定です。

```vuejs:molecules/tabulator.vue
<template>
  <div>
    <div ref="table"></div>
  </div>
</template>
```

## コンストラクタ関数からTabulator jQueryウィジェットを通し、要素をTabulatorに変換

直訳ｗｗｗ
公式のこの部分ですね↓
3. Turn element into a Tabulator by passing a constructor object to the tabulator jQuery widget

```vuejs:molecules/tabulator.vue
<script>
const Tabulator = require('tabulator-tables')

export default {
  data() {
    return {
      tabulator: null,
    }
  },
  mounted() {
    console.log(Tabulator)
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.tableData,
      columns: this.tableColumn,
      height: 205,
      layout: 'fitColumns',
    })
    this.tabulator.setLocale('ja')
  },
}
</script>

```

## 親子間でのデータ受け渡し

constants/define.jsで定義したデータを親(pages/tabulator/index.vue)で受け取って、
子(components/molecules/tabulator.vue)に渡します。

```vuejs:pages/tabulator/index.vue
<template>
  <div>
    <Header />
    <v-container>
      <h2>Tabulator test</h2>

      <tabulator
        :table-column="tableColumn"
        :table-data="tableData"
      ></tabulator>
    </v-container>
  </div>
</template>

<script>
import { TABLE_COLUMN, TABLE_DATA } from '~/constants/define'

export default {
  data() {
    return {
      tableColumn: TABLE_COLUMN,
      tableData: TABLE_DATA,
    }
  },
}
</script>

```


```vuejs:molecules/tabulator.vue
<template>
  <div>
    <div ref="table"></div>
  </div>
</template>

<script>
const Tabulator = require('tabulator-tables')

export default {
  props: {
    tableColumn: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tabulator: null,
    }
  },
  mounted() {
    console.log(Tabulator)
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.tableData,
      columns: this.tableColumn,
      height: 205,
      layout: 'fitColumns',
    })
    this.tabulator.setLocale('ja')
  },
}
</script>

<style>
@import '~/node_modules/tabulator-tables/dist/css/tabulator_simple.min.css';
</style>
```

できました◎◎◎

![スクリーンショット 2021-12-23 15.35.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97385/f5e0105a-b15d-2213-9b36-c04a145556e1.png)



### 追記

Tabulator5の実装はほぼ同じです。
importの書き方だけ変わるため、その点注意です。


```vuejs:Tabulator5.vue
<script>
// const Tabulator = require('tabulator-tables')
import { TabulatorFull as Tabulator } from 'tabulator-tables'
</script>
```

ｂｙ 公式
http://tabulator.info/docs/5.0/upgrade