ご覧のスポンサーで提供します。
Tabulator
TabulatorをVueで使う
（参考にさせていただいただけです、念の為、、）
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",
環境
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で読み込み
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>
テーブルデータを定義
公式では、
- Create your DOM element
- Define some data for the table
- 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を子コンポーネントに作成します。
サイトで、同じテーブルスタイルを使い回すような想定です。
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
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)に渡します。
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>
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>
できました◎◎◎
追記
Tabulator5の実装はほぼ同じです。
importの書き方だけ変わるため、その点注意です。
Tabulator5.vue
<script>
// const Tabulator = require('tabulator-tables')
import { TabulatorFull as Tabulator } from 'tabulator-tables'
</script>