ReadOnlyTable
Overview
ReadOnlyTable は読み取り専用のテーブルを表示します。
Specification
Property
使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| className | string | "" | コンポーネントの class 名 | |
| id | string | "" | コンポーネントの id 名 | |
| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
| rowsPerPage | number | 5 | ページごとの行数 | 小数点以下を指定した場合は、最も近い整数に丸められる rowsPerPage が正の整数以外の場合、エラーを出力する |
| pagination | boolean | true | ページネーションの表示/非表示設定 | false を指定した場合、ページネーションは非表示になり全ての行が表示される true を指定した場合、ページネーションは表示され rowsPerPage に指定された行数のみがページごとに表示される |
| visible | boolean | true | コンポーネントの表示/非表示設定 | |
| columns | Array<Column> | [] | コンポーネントの列データ | columns が配列以外の場合、エラーを出力する |
| data | Array<object> | [] | コンポーネントの行データ | data が配列以外の場合、エラーを出力する |
Column
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| field | string | "" | 列のキー項目 | data オブジェクトのキー項目になる そのキーに関連づけられた値が列に表示される |
| title | string | "" | 列のヘッダー名 | |
| visible | boolean | true | 列の表示/非表示設定 |
Constructor
ReadOnlyTable(options)
使用できるコンストラクタの一覧です。
Parameter
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| options | object | {} | コンポーネントのプロパティを含むオブジェクト |
Sample Code
ヒント
導入と実装方法 をご確認ください。
全てのパラメータを指定した場合のサンプルコードです。
const Kuc = Kucs['1.x.x'];
const space = kintone.app.record.getSpaceElement('space');
const readOnlyTable = new Kuc.ReadOnlyTable({
label: 'ReadOnlyTable',
columns: [
{
title: 'Number',
field: 'index'
},
{
title: 'City',
field: 'name'
},
{
title: 'Country',
field: 'country'
},
{
title: 'Population',
field: 'population'
},
{
title: 'Coordinates',
field: 'coordinates'
}
],
data: [
{
index: '1',
name: 'HoChiMinh',
country: 'Vietnam',
population: '8,371,000',
coordinates: '10.762622, 106.660172'
},
{
index: '2',
name: 'Tokyo',
country: 'Japan',
population: '14,000,000',
coordinates: '35.689487, 139.691711'
},
{
index: '3',
name: 'New York',
country: 'USA',
population: '8,400,000',
coordinates: '40.712776, -74.005974'
}
],
className: 'sample-class',
id: 'sample-id',
visible: true,
pagination: true,
rowsPerPage: 3
});
space.appendChild(readOnlyTable);