JavaScriptkintone

kintone UI Component（JavaScript）でテーブルを作る

kintoneプラグインを作成する際に使うkintone UI Componentを勉強中です。 今回試したのは、テーブルの作成です。 環境情報 kintone UI Component : v0.9.2 テーブルの作り […]

広告ここから
広告ここまで

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: "",
      },
    },
  });

参考

ブックマークや限定記事（予定）など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

アカウントを作成する
広告ここから
広告ここまで

Related Category posts