📊

TabulatorをNuxt3で使ってみる

2024/01/20に公開

tabulator

tech

はじめに

Excelライクな表をNuxtプロジェクトで使ってみたかったので、今回Tabulatorを試してみます。

開発環境

nuxt: 3.8.2
tabulator-tables: 5.5.2
vuetify: 3.4.7

Tabulatorの導入

公式ページ
https://tabulator.info/

以下のコマンドでtabulatorの最新バージョンをインストールします。

npm install --save-dev tabulator-tables

公式にVue３でのサンプルが用意されていたので、こちらを参考にします。

※サンプルのままだとデータがうまく表示されないため、issueにもあった下記のコードを試しました。

pages/tabulator-sample.vue

<script setup>
import { ref, reactive, onMounted } from "vue";
import { TabulatorFull as Tabulator } from "tabulator-tables"; //import Tabulator library

const table = ref(null); //reference to your table element
const tabulator = ref(null); //variable to hold your table
const tableData = reactive([
  {
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    col: "red",
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    col: "blue",
  },
  {
    id: 3,
    name: "Christine Lobowski",
    age: "42",
    col: "green",
  },
]); //data for table to display

onMounted(() => {
  //instantiate Tabulator when element is mounted
  tabulator.value = new Tabulator(table.value, {
    data: tableData, //link data to table
    reactiveData: true, //enable data reactivity
    columns: [
      { title: "Name", field: "name", width: 150 },
      { title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
      { title: "Favourite Color", field: "col" },
      {
        title: "Rating",
        field: "rating",
        hozAlign: "center",
        formatter: "star",
      },
    ], //define table columns
  });
});
</script>

<template>
  <div ref="table"></div>
</template>

↓実行結果
tabulatorサンプル

表示することはできたので、この後はフォームの編集や行の追加などExcelぽい動きを試してみます。

フォームを編集できるようにする

今のままだとフォームの中身を編集できないので、編集できるように実装してみます。

対象のカラムオブジェクトにeditorプロパティを指定するだけで出来そうです。
試しにNameカラムにeditor: "input"を追加してみます。

{ title: "Name", field: "name", width: 150, editor: "input" }

キャプチャのようにフォームを編集できるようになりました。

さいごに

今回はフォームの編集のみ試しましたが、他にもフィルター機能の実装などExcelライクな機能があるみたいなので、今後触ってみたいです。

はじめに

開発環境

Tabulatorの導入

フォームを編集できるようにする

さいごに

Discussion