テーブル

テーブルは表データの表示をするコンポーネントです。
テーブルは本体であるテーブルおよびカラム構成部品であるテーブルカラムによって構成されます。
テーブルカラムはテーブルのプロパティから任意に追加/削除できます。

Tips

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
幅	数値		565
高さ	数値		230
X	数値
Y	数値
ヘッダー色	文字列カラーピッカー		#FFFFFF
ページネーション	真偽	オンオフ	オフ
固定ヘッダ	真偽	オンオフ	オン
表示	真偽	オンオフ	オン
行ワードラップ	選択	Off 通常	Off
選択	真偽	オンオフ	オフ
ヘッダーフォントサイズ	数値		14
ヘッダー高さ	数値		56
ヘッダーラップ	選択	通常 OFF	OFF
ページサイズ	数値		100
値	表形式 [詳細1]
選択値

アクション

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
幅	width	number		565
高さ	height	number		230
X	x	number
Y	y	number
ヘッダー色	headerColor	string		#FFFFFF
ページネーション	pagination	boolean	true false	false
固定ヘッダ	stickyHeader	boolean	true false	true
表示	visibility	boolean	true false	true
行ワードラップ	rowWordWrap	string	off normal	off
選択	selecting	boolean	true false	false
ページサイズ	pageSize	number		100
値	value	array of object
選択値	selected	object、またはarray of object [詳細2][詳細3]

Tips

[詳細1] 値 (value)

テーブルの表全体の値を取得・設定します。値の形式は行を示すオブジェクトの配列です。
デフォルトの状態は以下のように登録されています。[行追加]ボタンから各行を登録します。
削除する場合は、チェックボックスを選択して、[削除]ボタンをクリックします

month	company A	company B	company C	company D
02	20	52	72	34
03	5	33	90	55
04	55	30	81	66
05	30	11	62	22

アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値 (value) に設定するとテーブルにデータ表示できます。同様に値 (value) にはテーブルの現在の表示データの状態がオブジェクトの配列形式で入っています。

[
  {"month":"02","companyA":20,"companyB":52,"companyC":72,"companyD":34},
  {"month":"03","companyA":5,"companyB":33,"companyC":90,"companyD":55},
  {"month":"04","companyA":55,"companyB":30,"companyC":81,"companyD":66},
  {"month":"05","companyA":30,"companyB":11,"companyC":62,"companyD":22}
]

Tips

[詳細2]テーブルカラムのアクションからクリック行を取得する場合

テーブルカラムのアクションではイベント発生行を選択値(selected)プロパティによって取得できます。選択値(selected)は、テーブル内で選択した行データを取得することができるプロパティとなります。テーブルカラムのクリックイベント (onclick)で、選択値(selected)プロパティにより要素数1の行オブジェクト配列が取得できます。

[詳細3] テーブル外部のアクションから選択行を取得する場合

選択(selecting)プロパティをオンに設定した場合は、一番左カラムに選択チェックボックスを付与します。行選択チェックボックスをONにした行データを、テーブル外部のアクションから選択値(selected)プロパティによって取得できます。取得データ形式は、オブジェクトの配列形式です。

イベント

なし