kintoneプラグインを作成する際に使うkintone UI Componentを勉強中です。

今回試したのは、テーブルの作成です。

環境情報

• kintone UI Component : v0.9.2

テーブルの作り方

Table要素を作る場合、Tableクラスを利用します。

import { Table, createTableCell } from "@kintone/kintone-ui-component/esm/js";

カラム定義・データ・デフォルト値の3つをパラメータとして渡しましょう。

  const table = new Table({
    columns: [
      {
        header: "テキスト",
        cell: () => createTableCell("label", "textBuiltIn"),
      },
    ],
    data: [{
        textBuiltIn: {
          text: "Built in",
        },
    }],
    defaultRowData: {
      textBuiltIn: {
        text: "",
      },
    },
  });

各セルでどんな要素を描画するかについては、createTableCell関数を利用します。

dataで作る配列のデータ構造は、createTableCellで指定した要素のパラメータに合わせる必要があるので注意しましょう。

labelの場合はtextですが、textを指定した場合はvalueを渡します。

  const table = new Table({
    columns: [
      {
        header: "請求書番号",
        cell: () => createTableCell("label", "invoice_no"),
      },
      {
        header: "請求金額",
        cell: () => createTableCell("text", "amount"),
      },
    ],
    data: [{
        invoice_no: {
          text: invoice.number,
        },
        amount: {
          value: invoice.amount,
        },
    }],
    defaultRowData: {
      invoice_no: {
        text: "",
      },
      amount: {
        value: "",
      },
    },
  });

参考

• https://kintone-labs.github.io/kintone-ui-component/latest/Reference/Table
• https://kintone-labs.github.io/kintone-ui-component/latest/Reference/Table/#createtablecelltype-datafieldname-props