TabulatorをVueで使う

TabulatorをVueで使う:

TabulatorはリッチなHTMLテーブルを実装できる素敵なJavascriptプラグインです。

React、Vue、Angularといった主要フレームワークがサポートされているのも嬉しいですね。

ライセンスはMITです。

Vueで使ってみたので実装方法を備忘録としてまとめておきます。

Tabulator

http://tabulator.info/

こんなテーブルが実装できます。

画像は公式より

さっそく実装

環境作成

まずはvue-cli(3.2.1)でプロジェクト作成します。

適当なディレクトリでvue createします。

vue create tabulator-test 
cd tabulator-test

普段templateはpugで書いているのでvue-cli-plugin-pugもインストールしておきます。

vue add pug

Tabulatorをインストールします。

npm install tabulator-tables --save

Tabulator.vueを新規作成してApp.vueに登録します。

tabulator.vue

<template lang="pug"> 
  .vm-tabulator 
    h1 tabulatorテスト 
</template>

App.vue

<template> 
  <div id="app"> 
    <Tabulator/> 
  </div> 
</template> 
 
<script> 
import Tabulator from './components/Tabulator.vue' 
 
export default { 
  name: 'app', 
  components: { 
    Tabulator 
  } 
} 
</script> 
 
<style> 
#app { 
  font-family: 'Avenir', Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-align: center; 
  color: #2c3e50; 
  margin-top: 60px; 
} 
</style>

コンポーネントにTabulatorを実装

Tabulatorが表示されるdivを用意します。ref属性値は任意のものでOKです。

Tabulator.vue.diff

<template lang="pug"> 
  .vm-tabulator 
    h1 tabulatorテスト 
+   div(ref="table") 
</template>

プラグインのcssをimportしておきます。

Tabulator.vue

<style> 
@import '~tabulator-tables/dist/css/tabulator.min.css' 
</style>

scriptでTabulatorをrequireして、

Tabulator.vue

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

dataに、テーブルに表示するデータを用意しておきます。
tableColumnに指定したfieldと、
tableDataのkeyが紐づくようです。

export default { 
  data() { 
    return { 
      //mountedでインスタンスを格納するために用意しておく 
      tabulator: null, 
      //テーブル1行目の見出しにあたる部分 
      tableColumn: [ 
        {title:"部位", field:"name", width:150}, 
        {title:"痒みだした時期", field:"from", align:"center", width:150}, 
        {title:"痒み具合", field:"kayumi", align:"left", formatter:"star", formatterParams:{ 
            stars: 10 
        }}, 
      ], 
      //テーブルデータ 
      tableData: [ 
        {id:1, name:"肩", from:"12/15", kayumi:4}, 
        {id:2, name:"肘", from:"12/15", kayumi:6}, 
        {id:3, name:"背中", from:"12/11", kayumi:3}, 
        {id:4, name:"腰", from:"", kayumi:0}, 
        {id:5, name:"腹", from:"12/18", kayumi:1}, 
        {id:6, name:"腿", from:"12/10", kayumi:10}, 
      ] 
    } 
  },

mountedのタイミングでインスタンスを生成します。
this.$refs.tableの部分をtemplateで指定したref属性値にしてください。

mounted(){ 
    //dataに用意したtabulaorにインスタンスを生成する 
    this.tabulator = new Tabulator(this.$refs.table, { 
      data: this.tableData, 
      columns: this.tableColumn, 
      // この辺はオプション 
      height:205, 
      layout:"fitColumns", 
    }); 
  } 
}

お肌が乾燥するこの時期に、自分が今どこが痒いか管理できる無意味なテーブルができました。

この時点で時期や痒み具合でソートができる代物となっています。

せっかくなのでVueらしく行を追加できるようにしてみます。

イメージ的には、

1. 入力したデータをObjectとして保管
2. 追加ボタンを押したら、tableDataにpush
3. tableDataをwatchして変更があればtabulator.replaceDataメソッドで更新

もちろん、methods内でtabulator.replaceDataでもよいのですが、公式のドキュメントがwatch使ってたので合わせてみました。

こんな感じにしました。

Tabulator.vue

<template lang="pug"> 
  .vm-tabulator 
    h1 tabulatorテスト 
    div(ref="table") 
    .vm-tabulator__input 
      label 部位 
        input(type="text" v-model="addData.name") 
    .vm-tabulator__input 
      label 痒みだした時期 
        input(type="text" v-model="addData.from") 
    .vm-tabulator__input 
      label 痒み具合 
        input(type="text" v-model="addData.kayumi") 
    .vm-tabulator__submit 
      a(href="#", @click.prevent="addTabulator") 
        |追加する 
</template> 
 
<script> 
const Tabulator = require("tabulator-tables"); 
export default { 
  data() { 
    return { 
      //mountedでインスタンスを作成する 
      tabulator: null, 
      //テーブル1行目の見出しにあたる部分 
      tableColumn: [ 
        {title:"部位", field:"name", width:150}, 
        {title:"痒みだした時期", field:"from", align:"center", width:150}, 
        {title:"痒み具合", field:"kayumi", align:"left", formatter:"star", formatterParams:{ 
            stars: 10 
        }}, 
      ], 
      //テーブルデータ 
      tableData: [ 
        {id:1, name:"肩", from:"12/15", kayumi:4}, 
        {id:2, name:"肘", from:"12/15", kayumi:6}, 
        {id:3, name:"背中", from:"12/11", kayumi:3}, 
        {id:4, name:"腰", from:"", kayumi:0}, 
        {id:5, name:"腹", from:"12/18", kayumi:1}, 
        {id:6, name:"腿", from:"12/10", kayumi:10}, 
      ], 
      addData: {id:null,name:null,from:null,kayumi:null} 
    } 
  }, 
  mounted(){ 
    //dataに用意したtabulaorにインスタンスを生成する 
    this.tabulator = new Tabulator(this.$refs.table, { 
      data: this.tableData, 
      columns: this.tableColumn, 
      // この辺はオプション 
      height:205, 
      layout:"fitColumns", 
    }); 
  }, 
  methods: { 
    addTabulator(){ 
      const obj = Object.assign({},this.addData) 
      obj.id = this.tableData.length 
      this.tableData.push(obj) 
      Object.keys(this.addData).forEach(key => { 
        this.addData[key] = null 
      }) 
    } 
  }, 
  watch: { 
    //update table if data changes 
    tableData:{ 
      handler: function (newData) { 
        this.tabulator.replaceData(newData); 
      }, 
      deep: true, 
    } 
  } 
} 
</script> 
 
<style> 
@import '~tabulator-tables/dist/css/tabulator.min.css' 
</style>

watchの部分は公式のドキュメントから引用したのですが、
watch(){ => watch: {に修正しています。

これで今年の冬はいくらでも乾燥できますね。

感想

今回は実用性皆無なものを作りましたが、

他にも列と行を入れ替えたり、エディタブルなテーブルを作れたりするオプションもあるので、

色々と可能性は広がりますね。

なにかプロジェクトで使えたら便利なオプションとかカスタマイズとかもまとめてみようかと思います。

このブログを検索

IT音痴オーバーフォーティーおやじのストック記事倉庫