テーブルカラム

テーブルカラムはテーブルを構成する各カラムコンポーネントです。コンポーネントとして独立しておらずテーブルの子要素として存在します。テーブルのプロパティ右上にある[追加]ボタンからカラム追加できます。ここで追加されるカラムがテーブルカラムです。テーブルカラムはテーブルのプロパティにタブ形式で並びます。タブ要素をクリックすると該当のテーブルカラムのプロパティにアクセスできます。

テーブルカラムは次のようにカラムタイプが分かれます。

カラムタイプ	データタイプ	値 (value)の設定	値 (value)の設定例
テキスト	string	表示文字列	apple
数値	number	表示数値	12345
日付	string	表示文字列	2023-01-01
日時	string	表示文字列	2023-01-01 10:00Z
時刻	string	表示文字列	10:00Z
チェックボックス	boolean	true: on, false: off	true
レーティング	number	スターの数	5
アバター	number	• 表示アバターパスまたはURL • 2文字以下のテキスト	/avatar.jpg
イメージ	string	イメージパスまたはURL	/image.jpg
アイコンボタン	string	アイコン指定文字列	AddCircle
プッシュボタン	string	ボタンのラベル	Edit
リンク	string	リンクラベル	Link

Tips

Tips

• テーブルカラムのカラムタイプ[アバター]の場合には、パスまたはURLを設定するとアバター表示します。2文字以下のテキストを設定した場合はレター表示します。
• テーブルカラムのカラムタイプ[イメージ]、[アイコンボタン]、[プッシュボタン]、[リンク]の場合には、アクションを設定することができます。イベントは[onclick]となります。アクションエディタへのアクセスはテーブルのコンテキストメニューから[アクション] - [テーブルカラム] の順に選択します。アクションエディタにおけるテーブルカラムへのアクセスは次のように直接テーブルカラムのIDを指定します。例) $ui.table_column_id.label
• テーブルカラムのタブをドラッグし、移動先にドロップすることでテーブルカラムの並び順を変更することができます。

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ラベル	文字列
カラムタイプ	選択	- テキスト - 数値 - 日付 - 日時 - 時刻 - チェックボックス - レーティング - アバター - イメージ - アイコンボタン - プッシュボタン - リンク	テキスト
幅	数値		100
色	文字列 カラーピッカー
記号と単位の位置 [テキスト/数値]	選択	- なし - 先頭 - 末尾	なし
記号と単位 [テキスト/数値]	文字列
水平位置	選択	- 左 - 中央 - 右	[詳細1]
フォーマット[数値]	選択	- None - #,#.## - #,#.00	None
フォーマット[日付]	選択	- yyyy/MM/dd - MM/dd/yyyy - dd/MM/yyyy	yyyy/MM/dd
フォーマット[日時]	選択	- yyyy/MM/dd hh:mm aa - MM/dd/yyyy hh:mm aa - dd/MM/yyyy hh:mm aa	yyyy/MM/dd hh:mm aa
最大値 [レーティング]	数値		5
最小単位 [レーティング]	number		1
イメージ幅 [イメージ]	数値		40
イメージ高さ [イメージ]	数値		40
イメージ表示方法 [イメージ]	選択	- 全体埋め - 全体表示 - 拡大縮小なし	全体埋め
スタイル [アバター]	選択	- 円 - 角丸 - 正方形	円
スタイル [プッシュボタン]	選択	- 塗りつぶし - アウトライン - テキスト	塗りつぶし
下線 [リンク]	選択	- 常に - ホバー時 - なし	常に
前アイコン [プッシュボタン]	選択		なし
後アイコン [プッシュボタン]	選択		なし
表示	真偽	- オン - オフ	オン
非アクティブ [プッシュボタン/ アイコンボタン]	真偽	- オン - オフ	オン
クリックイベント [イメージ/リンク]	選択	- なし - アクション	アクション
クリックイベント [プッシュボタン/アイコンボタン]	選択	- なし - アップロード - アクション	アクション

アクション

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ラベル	label	string
幅	width	number		100
色	color	string
記号と単位の位置 [テキスト/数値]	inputAdornmentsPosition	string
記号と単位 [テキスト/数値]	inputAdornments	string
水平位置	halign	string	- left - center - right	[詳細1]
フォーマット[数値]	format	string	- none - #,#.## - #,#.00	none
フォーマット[日付]	format	string	- yyyy/MM/dd - MM/dd/yyyy - dd/MM/yyyy	yyyy/MM/dd
フォーマット[日時]	format	string	- yyyy/MM/dd hh:mm aa - MM/dd/yyyy hh:mm aa - dd/MM/yyyy hh:mm aa	yyyy/MM/dd hh:mm aa
最大値 [レーティング]	max	number		5
最小単位 [レーティング]	precision	number		1
イメージ幅 [イメージ]	imageWidth	number		40
イメージ高さ [イメージ]	imageHeight	number		40
イメージ表示方法 [イメージ]	objectFit	string	- cover - contain - none	cover
スタイル [アバター]	variant	string	- circular - rounded - square	circular
スタイル [プッシュボタン]	variant	string	- contained - outlined - text	contained
下線 [リンク]	underline	string	- always - hover - none	always
前アイコン [プッシュボタン]	startIcon	string
後アイコン [プッシュボタン]	endtIcon	string
表示	visibility	boolean	- true - false	true
非アクティブ [プッシュボタン/ アイコンボタン]	disabled	boolean		false

Tips

Tips

• [id]プロパティはアクションで設定はできません。
• 設定可能なプロパティとカラムタイプの関係は次の通りです。

プロパティ	カラムタイプ
記号と単位の位置	• テキスト • 数値
記号と単位	• テキスト • 数値
数値フォーマット	• 数値
日付フォーマット	• 日付
日時フォーマット	• 日時
最大値	• レーティング
最小単位	• レーティング
イメージ幅	• イメージ
イメージ高さ	• イメージ
イメージ表示方法	• イメージ
スタイル	• アバター • プッシュボタン
下線	• リンク
前アイコン	• プッシュボタン
後アイコン	• プッシュボタン
非アクティブ	• プッシュボタン • アイコンボタン
クリックイベント	• イメージ • アイコンボタン • プッシュボタン • リンク

• [クリックイベント]に「アップロード」を選択した場合は、アイコンボタンをクリックするとOSのファイル選択ダイアログの起動します。
• [クリックイベント]に「アップロード」を選択した場合は、ビルトイン関数によりアップロードファイルをオブジェクト配列として取得できます。

[詳細1] 水平位置 (halign)

水平位置(halign)のデフォルト値は、カラムタイプによって異なります。

カラムタイプ	デフォルト値
テキスト	左 (left)
数値	右 (right)
日付	右 (right)
日時	右 (right)
時刻	右 (right)
チェックボックス	中央 (center)
レーティング	左 (left)
アバター	中央 (center)
イメージ	左 (left)
リンク	左 (left)
プッシュボタン	中央 (center)
アイコンボタン	中央 (center)

イベント

イベント名	説明
onclick	クリックイベント「アクション」の場合： セル内のコンポーネントがクリックされた時に発生します。 クリックイベント「アップロード」の場合： ファイル選択後、[開く (O)」ボタンをクリックした時にアクションを実行します。