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