Vue.jsでTabulator（5系）を使う①

Vue.jsでTabulator（5系）を使う①（備忘録）

Vue3.2+TypeScript , Tabulator（5系）

Tabulator とは？

業務系アプリケーションで多用される〇〇リストを扱うためのライブラリ。
これを使うと、たぶんみんな幸せになれる（あくまでも個人の感想）
詳しくは >> https://tabulator.info/

①最低限のコードで使ってみる

インストール

npm install tabulator-tables --save
npm install @types/tabulator-tables -D

リストに表示するデータの定義

interface State {
  list: TableDataRow[];
}
type TableDataRow = {
  id: number;
  value: number;
  update: string;
};
const state = reactive<State>({
  list: [
    { id: 1, value: 1, update: dayjs().format('x') },
    { id: 2, value: 2, update: dayjs().format('x') },
  ],
});

各カラム設定

const columns: any[] = [
  { field: 'id', title: 'id' },
  { field: 'value', title: 'value' },
  { field: 'update', title: 'update' },
];

Tabulatorを挿入するタグを用意

const tableElm = ref<HTMLElement | null>(null); 

<div ref="tableElm"></div>

Tabulatorの初期化

const columns: any[] = [
  { field: 'id', title: 'id' },
  { field: 'value', title: 'value' },
  { field: 'update', title: 'update' },
];
//htmlタグがマウントさたらTabulatorを生成してもらう
onMounted(() => {
  if (tableElm.value === null) return;
  new Tabulator(tableElm.value, {
    columns: columns,
    data: state.list,
    reactiveData: true,
  });
});

結果

ちなみにSFCファイル全体

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onMounted } from 'vue';
import { TabulatorFull as Tabulator } from 'tabulator-tables';
import dayjs from 'dayjs';
interface State {
  list: TableDataRow[];
}
type TableDataRow = {
  id: number;
  value: number;
  update: string;
};

const state = reactive<State>({
  list: [
    { id: 1, value: 1, update: dayjs().format('x') },
    { id: 2, value: 2, update: dayjs().format('x') },
  ],
});

const columns: any[] = [
  { field: 'id', title: 'id' },
  { field: 'value', title: 'value' },
  { field: 'update', title: 'update' },
];
//--[tabulator]
const tableElm = ref<HTMLElement | null>(null); 
onMounted(() => {
  if (tableElm.value === null) return;
  new Tabulator(tableElm.value, {
    columns: columns,
    data: state.list,
    reactiveData: true,
  });
});
</script>
<template>
  <div class="border border-danger p-2 rounded mb-2">
    ① 最低限のコードで使ってみる
    <div ref="tableElm"></div>
  </div>
</template>

Tabulator4系からは・・・

イベントの扱い、HeaderSortなどプロパティに変更が見られます。
ブラウザの初期化プロパティで使えないやつが含まれていると警告がConsole出力されると思う。多分。

関連記事

• Vue.jsでTabulator（5系）を使う① ※このページ
• Vue.jsでTabulator（5系）を使う②
• Vue.jsでTabulator（5系）を使う③

GitHubにサンプル上げてます

ついでにGitHubにデモページも・・・