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

# Vue.jsでTabulator（5系）を使う②（備忘録）
> Vue3.2+TypeScript , Tabulator5系

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



## データの更新　※データ更新時の画面再描画
公式さん曰く 初期化時のプロパティreactiveDataをtrueにすればOKらしいのですが

```typescript
  tabulator.value = new Tabulator(tableElm.value, {
    ...option,
    data: state.list,
    reactiveData: true,
  });
```
微妙に更新を検知せず表を再描画しないケースが・・・


### 困ったらとりあえず [redraw]
```typescript
tabulator.value.redraw(true);
```
再描画を手動でしてやれば解決。
これ Headerの表示などにも効果があります（ヘッダー行の言語切り替えなど）

ちなみにデータを差し替える際に使える関数が別にあるのはありますが・・・
```typescript
tabulator.value.replaceData(差し替えたいlist);
```


### redrawをする場合しない場合の挙動比較
[サンプルページ](https://harenokuni.github.io/vue-tabulator-sample-1/)の上から２個目のテーブルにそれぞれredrawを入れているセルと入れていないセルを用意しました。
```typescript
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);
    },
  },
];
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3270885/7a990cef-e77f-080d-5f18-c473b7880b26.png)

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




## ダウンロード機能
よく使用しているExcelファイルのダウンロード機能
```typescript
tabulator.value.download('xlsx', 'filename.xlsx', {});
```

↓これを入れるのをよく忘れる
```html
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
```
超簡単にExcelでダウンロード可能＼(^o^)／

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

https://tabulator.info/docs/5.4/download



## rowクリックについて
Tabulatorには、もちろんrowClickイベントがあります。

```typescript
 tabulator.value.on('rowClick', (e: any, row: any) => {
    console.log(`tabulator.value.on('rowClick'`);
    e.stopPropagation();
  });
```
ですが・・・・・
↓CellクリックイベントとRowクリックイベントが

```typescript
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出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3270885/e38094e6-5c8f-44c1-d1b8-622f39fed11c.png)


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


# 関連記事
* [Vue.jsでTabulator（5系）を使う①](https://qiita.com/harenokuni/items/273cd9a11ac4949e512c)
* Vue.jsでTabulator（5系）を使う② ※このページ
* [Vue.jsでTabulator（5系）を使う③](https://qiita.com/harenokuni/items/35851fa1565ed9fa4b41)
   


# GitHubにサンプル上げてます

https://github.com/hare-systems-ryo/vue-tabulator-sample-1


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

https://hare-systems-ryo.github.io/vue-tabulator-sample-1/