メインコンテンツまでスキップ
バージョン: 1.17.1

Table

Overview

Table は編集可能なテーブルを表示します。


Specification

Property

使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。

NameTypeDefaultDescriptionRemark
classNamestring""コンポーネントの class 名
idstring""コンポーネントの id 名
labelstring""コンポーネントの説明ラベル未指定、あるいは空文字の場合、label は表示されない
actionButtonboolean/ActionButtontrue行追加/削除ボタンの表示/非表示設定true/false を設定した場合、行追加/削除ボタンは同時に表示/非表示される
ActionButton Object を設定した場合、行追加/削除ボタンはそれぞれ個別に表示/非表示される
headerVisiblebooleantrueヘッダーの表示/非表示設定
visiblebooleantrueコンポーネントの表示/非表示設定
columnsArray<Column>[]コンポーネントの列データcolumns が配列以外の場合、エラーを出力する
dataArray<object>[]コンポーネントの行データdata が配列以外の場合、エラーを出力する

ActionButton

NameTypeDefaultDescriptionRemark
addbooleantrue行追加ボタンの表示/非表示設定
removebooleantrue行削除ボタンの表示/非表示設定

Column

NameTypeDefaultDescriptionRemark
fieldstringnull列のキー項目
※必須かつ一意の値
data オブジェクトのキー項目になる
そのキーに関連づけられた値が列に表示される
field が columns 内で重複もしくは未指定の場合、エラーを出力する
title *1string/HTMLElement""列のヘッダー名HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される
requiredIconbooleanfalseコンポーネントの必須アイコン表示/非表示設定
visiblebooleantrue列の表示/非表示設定
render *1function
function(cellData, rowData, rowIndex) {}
nullセルの描画関数DOM を戻り値にする
以下の3つのパラメーターを使って関数に情報を加えることができる
  • cellData は現在表示されているセルの値
  • rowData は現在表示されている行の値
  • rowIndex は現在表示されている行番号

render 関数が未指定の場合、セルはデフォルトのテキストで表示される
注意

*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。

Event

指定できるイベントの一覧です。

NameTypeDescriptionRemark
changefunctionテーブルの値が変更された時のイベントハンドラ引数には Event の event オブジェクトをとる
event.detail で以下の値を受け取ることができる
  • change-cell(セルの値が変更された時にトリガーされる)
    • event.detail.type: "change-cell"
    • event.detail.rowIndex: 変更された行番号
    • event.detail.data: 変更後の data の値
    • event.detail.oldData: 変更前の data の値
    • event.detail.field: 変更された列の field の値
  • add-row(行追加ボタンがクリックされた時にトリガーされる)
    • event.detail.type: "add-row"
    • event.detail.rowIndex: 追加された行番号
    • event.detail.data: 変更後の data の値
    • event.detail.oldData: 変更前の data の値
  • remove-row(行削除ボタンがクリックされた時にトリガーされる)
    • event.detail.type: "remove-row"
    • event.detail.rowIndex: 削除された行番号
    • event.detail.data: 変更後の data の値
    • event.detail.oldData: 変更前の data の値

Constructor

Table(options)
使用できるコンストラクタの一覧です。

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}コンポーネントのプロパティを含むオブジェクト

Custom CSS

ヒント

Custom CSS をご確認ください。

コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。

Property

NameDescription
--kuc-table-header-background-color
--kuc-table-header-color
--kuc-table-header-font-size
--kuc-table-header-height
--kuc-table-header-{index}-width
  • このプロパティを使用すると、インデックス値に基づいて特定のテーブル列の幅を設定できる
  • 例えば、--kuc-table-header-0-width を使用して、最初のカラムの幅を設定できる
  • インデックス値は 0 から始まることに注意
  • --kuc-table-header-width
  • このプロパティを使用すると、テーブル内のすべての列の幅を設定できる
  • 単一のカラムに対して特定の幅を設定する必要がある場合は、--kuc-table-header-{index}-width プロパティを利用する
  • 伸縮する要素を子コンポーネントとして追加したい場合は、--kuc-table-header-width: auto を設定することで、この動作を維持できる場合がある

  • Sample Code

    ヒント

    導入と実装方法 をご確認ください。

    全てのパラメータを指定した場合のサンプルコードです。

    const Kuc = Kucs['1.x.x'];

    const space = kintone.app.record.getSpaceElement('space');

    const renderAge = dataCell => {
    const spanElement = document.createElement('span');
    spanElement.innerText = `The age is ${dataCell}`;
    return spanElement;
    };

    const renderName = cellData => {
    const dropdown = new Kuc.Dropdown({
    items: [
    { label: 'John Brown', value: 'john' },
    { label: 'Steven Gerrard', value: 'steven' }
    ],
    value: cellData
    });
    return dropdown;
    };

    const table = new Kuc.Table({
    label: 'Table',
    columns: [
    {
    title: new Kuc.Tooltip({
    title: 'Please select a user',
    container: 'Name'
    }),
    field: 'name',
    render: renderName
    },
    {
    title: 'Address',
    field: 'address'
    },
    {
    title: 'Age',
    field: 'age',
    render: renderAge
    }
    ],
    data: [
    {
    name: 'john',
    age: 32,
    address: 'New York No. 1 Lake Park'
    },
    {
    name: 'steven',
    age: 22,
    address: 'New York No. 2 Lake Park'
    }
    ],
    className: 'options-class',
    id: 'options-id',
    actionButton: true,
    headerVisible: true,
    visible: true
    });

    space.appendChild(table);

    table.addEventListener('change', event => {
    console.log(event);
    });