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

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

セル内に複数のボタン、各セルの中を自由に設計


## セル内に複数のボタン　
所謂こういったケース。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3270885/2335fc44-83ab-bf9b-9141-a713c308d693.png)


## columnsのformatter設定
HTML形式でボタンを記述して・・・・
```TypeScript
const columns: any[] = [
  //省略
  {
    //省略
    formatter: (cell: any, formatterParams: any, onRendered: any) => {
      return `
<button type="button" class="btn btn-success add">
  value++
</button>
<button type="button" class="btn btn-success substract">
  value--
</button>
`;
    //省略
    },
  },
];
```
クリックする要素のclassに目印を設置 ※今回は「add,substract」

## cellClickイベントで
```TypeScript
const columns: any[] = [
  //省略
  {
    //省略
    cellClick: (e: any, cell: any) => {
      const row: TableDataRow = cell.getRow().getData();
      if (e.target.classList.contains('add') === true) {
        row.value = row.value + 1;
      } else if (e.target.classList.contains('substract') === true) {
        row.value = row.value - 1;
      } else {
        return;
      }
      tabulator.value.redraw(true);
    },
  },
];
```
目印が含まれているか確認するだけ。（以上）



## 各セルの中を自由に設計

「一行の中に複数行を含める」業務系でよく見かけるレイアウトをTabulatorで再現
 
↓完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3270885/0a845ef5-0ad2-a9be-e4f6-79aaaec671dd.png)

※ソースはこちら

https://github.com/harenokuni/vue-tabulator-sample-1/blob/main/src/script/sample-custom-format1.vue



### column定義


```typescript
type TableDataRow = {
  id: number;
  groupName: string;
  userName: string;
  userLevel: 'A' | 'B' | 'C';
};


const columns: any[] = [
  //id列省略
  {
    headerSort: false,
    download: false,
    field: 'groupName',
    title: `
<div class="v-cell-container">
  <div class="v-cell-row border-bottom" data-h="10">
    <div class="v-cell w-100 ">
      groupName
    </div>
  </div>
  <div class="v-cell-row" data-h="10">
    <div class="v-cell border-right" style="width:calc(100% - 4em)">
      userName
    </div>
    <div class="v-cell" style="width: 4em">
      Level
    </div>
  </div>
</div> 
`,
    formatter: (cell: any, formatterParams: any, onRendered: any) => {
      const row: TableDataRow = cell.getRow().getData();
      return `
<div class="v-cell-container">
  <div class="v-cell-row border-bottom" data-h="10">
    <div class="v-cell w-100 ">
      ${row.groupName}
    </div>
  </div>
  <div class="v-cell-row" data-h="10">
    <div class="v-cell border-right" style="width:calc(100% - 4em)">
      ${row.userName}
    </div>
    <div class="v-cell" style="width: 4em">
      ${row.userLevel}
    </div>
  </div>
</div> 
`;
  },
```
### 方法？ 
「title」「formatter」もHTMLが記述できるからその中でコマ割りしてやればOK

ただし、Tabulator標準のスタイルで以下にpadding値が入っているのでそれを0で上書きが必要
```scss
.tabulator-cell,
.tabulator-col-content {
    padding: 0 !important;
}
```



### formatter関数やcellClick関数で配列の各レコードを触る

Tabulatorに取り込んだ配列のレコードの型を以下とすると
```typescript
type TableDataRow = {
  id: number;
  groupName: string;
  userName: string;
  userLevel: 'A' | 'B' | 'C';
};
```
column定義オブジェクトのformatter関数
```typescript
formatter: (cell: any, formatterParams: any, onRendered: any) => {
      const row: TableDataRow = cell.getRow().getData();
```

column定義オブジェクトのcellClick関数　※取り方はformatterと同じ
```typescript
cellClick: (e: any, cell: any) => {
  const row: TableDataRow = cell.getRow().getData();
```
これでレコード内のすべてのデータにアクセスできる


### ダウンロード機能
表示部分は基本ダウンロード禁止カラムとして、ダウンロード専用のカラム設定を採用したほうが幸せになれそうです。
* 表示用カラム
    * download=false
* ダウンロード
    * visible=false
    * download=true
    
↓例
```typescript
const columns: any[] = [
  //表示用カラム
  {
    headerSort: false,
    download: false,
    //省略
  },
  //省略
  //ダウンロード用 分けて管理したほうが便利と感じる
  {
    visible: false,
    download: true,
    field: 'id',
    title: 'あいでぃー',
  },
  {
    visible: false,
    download: true,
    field: 'groupName',
    title: 'グループ',
  },
  //省略
]
```


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


# GitHubにサンプル上げてます
https://github.com/hare-systems-ryo/vue-tabulator-sample-1


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

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