テーブルカラム

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

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

カラムタイプ	データタイプ	値 (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

ノート

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

ダイアログプロパティ

項目	入力値	オプション	デフォルト値
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

ノート

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

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

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

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

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

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

イベント

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