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

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

Vue3.2+TypeScript , Tabulator5系

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

セル内に複数のボタン　

所謂こういったケース。

columnsのformatter設定

HTML形式でボタンを記述して・・・・

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イベントで

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で再現

↓完成イメージ

※ソースはこちら

column定義

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で上書きが必要

.tabulator-cell,
.tabulator-col-content {
    padding: 0 !important;
}

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

Tabulatorに取り込んだ配列のレコードの型を以下とすると

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

column定義オブジェクトのformatter関数

formatter: (cell: any, formatterParams: any, onRendered: any) => {
      const row: TableDataRow = cell.getRow().getData();

column定義オブジェクトのcellClick関数　※取り方はformatterと同じ

cellClick: (e: any, cell: any) => {
  const row: TableDataRow = cell.getRow().getData();

これでレコード内のすべてのデータにアクセスできる

ダウンロード機能

表示部分は基本ダウンロード禁止カラムとして、ダウンロード専用のカラム設定を採用したほうが幸せになれそうです。

• 表示用カラム
  • download=false
• ダウンロード
  • visible=false
  • download=true

↓例

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系）を使う①
• Vue.jsでTabulator（5系）を使う②
• Vue.jsでTabulator（5系）を使う③ ※このページ

GitHubにサンプル上げてます

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