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

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

Vue3.2+TypeScript , Tabulator5系

データの更新とダウンロード機能について
（rowクリックの考察も）

データの更新　※データ更新時の画面再描画

公式さん曰く 初期化時のプロパティreactiveDataをtrueにすればOKらしいのですが

  tabulator.value = new Tabulator(tableElm.value, {
    ...option,
    data: state.list,
    reactiveData: true,
  });

微妙に更新を検知せず表を再描画しないケースが・・・

困ったらとりあえず [redraw]

tabulator.value.redraw(true);

再描画を手動でしてやれば解決。
これ Headerの表示などにも効果があります（ヘッダー行の言語切り替えなど）

ちなみにデータを差し替える際に使える関数が別にあるのはありますが・・・

tabulator.value.replaceData(差し替えたいlist);

redrawをする場合しない場合の挙動比較

サンプルページの上から２個目のテーブルにそれぞれredrawを入れているセルと入れていないセルを用意しました。

const columns: any[] = [
 //省略
  {
    field: 'update',
    formatter: (cell: any, formatterParams: any, onRendered: any) => {
      return `クリック？リストの更新挙動不安定？`;
    },
    cellClick: (e: any, cell: any) => {
      const row: TableDataRow = cell.getRow().getData();
      row.value = row.value + 1;
      row.update = dayjs().format('x');
    },
  },
  {
    headerSort: false,
    download: false,
    field: 'update',
    formatter: (cell: any, formatterParams: any, onRendered: any) => {
      return `クリック！リストも更新！`;
    },
    cellClick: (e: any, cell: any) => {
      const row: TableDataRow = cell.getRow().getData();
      row.value = row.value + 1;
      row.update = dayjs().format('x');
      tabulator.value.redraw(true);
    },
  },
];

• 個人的な使い分け
  • redraw
    • リストの中身のレコードを編集してテーブルを再描画したい場合
    • 言語設定の切り替えの反映など
    • headerに並び替え機能を独自実装している時のアイコンの種類変更など
  • replaceData
    • 再検索などでテーブル用リストが差し替わる場合

ダウンロード機能

よく使用しているExcelファイルのダウンロード機能

tabulator.value.download('xlsx', 'filename.xlsx', {});

↓これを入れるのをよく忘れる

<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

超簡単にExcelでダウンロード可能＼(^o^)／

※詳しくは以下ドキュメントを確認。

rowクリックについて

Tabulatorには、もちろんrowClickイベントがあります。

 tabulator.value.on('rowClick', (e: any, row: any) => {
    console.log(`tabulator.value.on('rowClick'`);
    e.stopPropagation();
  });

ですが・・・・・
↓CellクリックイベントとRowクリックイベントが

const columns: any[] = [
    //省略
    {
        //省略
        //Cell側のクリックイベント
        cellClick: (e: any, cell: any) => {
            console.log('cellClick');
        },
    }
]

//rowClick側のクリックイベント
tabulator.value.on('rowClick', (e: any, row: any) => {
    console.log(`tabulator.value.on('rowClick'`);
    e.stopPropagation();
});

↓Console出力

Rowが先!?
詳しく調べていないのですが、rowClickイベントが先に発火するんです・・・
なのでRowにページ遷移処理を入れてたいけどセルにもボタンが欲しいって要件などはrowClick使わずcellClick使ってます。

関連記事

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

GitHubにサンプル上げてます

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