Vue.jsでhandsontableを使う #Vue.js

はじめに

Vue.js導入のプロジェクトでhandsontableを使用する機会がありました。
handsontable自体の使用が初めてなのに加え日本語の情報が不足していることもあって
少々ハマったので情報をまとめます。

handsontableは公式がVue.js向けのラッパーをだしているのでそれを使用し、テーブルの作成からデータの取得/更新までをやってみます。

必要パッケージ導入

npmからhandsontableと公式ラッパーのvue-handsontable-officialをインストールします。
※ラッパーであるvue-handsontable-officialはhandsontable本体を含んでいません

npm install handsontable
npm install vue-handsontable-official

テーブルの作成

なにはともあれテーブルを作成して表示させてみましょう。
ざっくりとコードを示します。

vue-handsontable-officialをコンポーネントとして追加
テーブルの設定値はhotSettings.dataとして記述

sample.html

<style>
body {
    padding: 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
}

#test-hot-app {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
</style>
<div id="app">
    <hot-table :root="root" :settings="hotSettings"></hot-table>
</div>
<script>
import Vue from 'vue';
import HotTable from 'vue-handsontable-official';

const app = new Vue({
    el: "#app",

    components: {
        HotTable
    },

    data: function() {
        return {
            root: "testHot",
            hotSettings: {
                data: [
                    ['砂糖', '塩', '胡椒'],
                    ['ケチャップ', 'マヨネーズ', 'タルタル'],
                    ['みりん', 'しょうゆ', 'お酢'],
                ],
                colHeaders: true,
                rowHeaders: true
            },
        };
    },  
});
</script>

See the Pen vue-handsontable-official/sample-1 by hyaroy (@hyaroy) on CodePen.

テーブルデータの取得

次にテーブルからのデータ取得です。
handsontableのリファレンスにある通りにgetDataなりgetDataAtCellなりを利用すればいいわけですが、問題はVueの中でどのようにして呼び出すかです。
これは次のように対応します。

hot-tableタグに「ref="testHot"」を追加
this.$refs.testHot.table.API名のようにして呼び出す

次に示すコードでは、inputボックスに行番号と列番号を入力してupdateボタンを押すことで対象セルの値を取得し画面に表示するようにしています。

sample.html

<style>
body {
    padding: 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
}

#test-hot-app {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
</style>
<div id="app">
    <hot-table :root="root" :settings="hotSettings" ref="testHot"></hot-table> <!--ref="testHot"を追記-->
    <button @click="update()">update</button><br>
    rowNo:<input type="number" v-model="rowNo"><br>
    colNo:<input type="number" v-model="colNo"><br>
    {{result}}
</div>
<script>
import Vue from 'vue';
import HotTable from 'vue-handsontable-official';

const app = new Vue({
    el: "#app",

    components: {
        HotTable
    },

    data: function() {
        return {
            root: "testHot",
            hotSettings: {
                data: [
                    ['砂糖', '塩', '胡椒'],
                    ['ケチャップ', 'マヨネーズ', 'タルタル'],
                    ['みりん', 'しょうゆ', 'お酢'],
                ],
                colHeaders: true,
                rowHeaders: true
            },
            rowNo: 0, //取得したいセルの行番号
            colNo: 0, //取得したいセルの列番号
            result: '未選択'
        };
    },

    methods: {
        /**
         * 入力された行番号と列番号からセルの値を取得する
         */
        update: function() {
            this.result = this.$refs.testHot.table.getDataAtCell(this.rowNo, this.colNo);
        }
    },
});
</script>

See the Pen vue-handsontable-official/sample by hyaroy (@hyaroy) on CodePen.

テーブルデータの更新/削除など

特段難しいことはなにもなく、
this.$refs.testHot.table.API名で各種handsontableのAPIが利用可能になったので、
あとは値の変更も削除もそれを実現するメソッドを呼び出すだけです。
次の例では「deleteボタン」「replaceボタン」が追加され、対象セルの値の削除と置換ができるようになっています。

See the Pen vue-handsontable-official/sample-3 by hyaroy (@hyaroy) on CodePen.

おわりに

時勢はすっかりVue.js。仕事で使う機会も多いと思います。
handsontableが公式のラッパーでさくっと組み込めるのは非常に助かりますね。