Table
Overview
Table は編集可能なテーブルを表示します。
Specification
Property
使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| actionButtonPosition | string | "right" | 行追加/削除ボタン列の固定位置 | 利用できるオプション "right" : ウィンドウの右端 "left" : ウィンドウの左端 |
| className | string | "" | コンポーネントの class 名 | |
| id | string | "" | コンポーネントの id 名 | |
| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
| actionButton | boolean/ActionButton | true | 行追加/削除ボタンの表示/非表示設定 | true/false を設定した場合、行追加/削除ボタンは同時に表示/非表示される ActionButton Object を設定した場合、行追加/削除ボタンはそれぞれ個別に表示/非表示される |
| headerVisible | boolean | true | ヘッダーの表示/非表示設定 | |
| visible | boolean | true | コンポーネントの表示/非表示設定 | |
| columns | Array<Column> | [] | コンポーネントの列データ | columns が配列以外の場合、エラーを出力する |
| data | Array<object> | [] | コンポーネントの行データ | data が配列以外の場合、エラーを出力する |
ActionButton
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| add | boolean | true | 行追加ボタンの表示/非表示設定 | |
| remove | boolean | true | 行削除ボタンの表示/非表示設定 |
Column
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| field | string | null | 列のキー項目 ※必須かつ一意の値 | data オブジェクトのキー項目になる そのキーに関連づけられた値が列に表示される field が columns 内で重複もしくは未指定の場合、エラーを出力する |
| title *1 | string/HTMLElement | "" | 列のヘッダー名 | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
| visible | boolean | true | 列の表示/非表示設定 | |
| render *1 | functionfunction(cellData, rowData, rowIndex) {} | null | セルの描画関数 | DOM を戻り値にする 以下の3つのパラメーターを使って関数に情報を加えることができる
render 関数が未指定の場合、セルはデフォルトのテキストで表示される |
注意
*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
Event
指定できるイベントの一覧です。
| Name | Type | Description | Remark |
|---|---|---|---|
| change | function | テーブルの値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる event.detail で以下の値を受け取ることができる
|
Constructor
Table(options)
使用できるコンストラクタの一覧です。
Parameter
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| options | object | {} | コンポーネントのプロパティを含むオブジェクト |
Custom CSS
ヒント
Custom CSS をご確認ください。
コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
Property
| Name | Description |
|---|---|
| --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-width |
|
| --kuc-table-action-button-background-color | |
| --kuc-table-action-button-left |
|
| --kuc-table-action-button-right |
|
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,
actionButtonPosition: 'right'
});
space.appendChild(table);
table.addEventListener('change', event => {
console.log(event);
});