テーブルカラム

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

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

カラムタイプ	データタイプ	値 (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
• テーブルカラムのタブをドラッグし、移動先にドロップすることでテーブルカラムの並び順を変更することができます。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	ラベル	文字列		label	string		カラムのラベル
3	カラムタイプ	選択 1. テキスト 2. 数値 3. 日付 4. 日時 5. 時刻 6. チェックボックス 7. レーティング 8. アバター 9. イメージ 10. アイコンボタン 11. プッシュボタン 12. リンク	テキスト				カラムのタイプ
4	幅	数値	100	width	number	100	カラムの幅
5	色	文字列 カラーピッカー		color	string		カラムの色
6	記号と単位の位置 [テキスト/数値]	選択 1. なし 2. 先頭 3. 末尾	なし	inputAdornmentsPosition	string		記号と単位の表示位置
7	記号と単位 [テキスト/数値]	文字列		inputAdornments	string		記号と単位のテキスト
8	水平位置	選択 1. 左 2. 中央 3. 右	[詳細1]	halign	string	[詳細1]	水平位置の配置
9	フォーマット[数値]	選択 1. None 2. #,#.## 3. #,#.00	None	format	string	none	数値のフォーマット
10	フォーマット[日付]	選択 1. yyyy/MM/dd 2. MM/dd/yyyy 3. dd/MM/yyyy	yyyy/MM/dd	format	string	yyyy/MM/dd	日付のフォーマット
11	フォーマット[日時]	選択 1. yyyy/MM/dd hh:mm aa 2. MM/dd/yyyy hh:mm aa 3. dd/MM/yyyy hh:mm aa	yyyy/MM/dd hh:mm aa	format	string	yyyy/MM/dd hh:mm aa	日時のフォーマット
12	最大値 [レーティング]	数値	5	max	number	5	レーティングの最大値
13	最小単位 [レーティング]	number	1	precision	number	1	レーティングの最小単位
14	イメージ幅 [イメージ]	数値	40	imageWidth	number	40	イメージの幅
15	イメージ高さ [イメージ]	数値	40	imageHeight	number	40	イメージの高さ
16	イメージ表示方法 [イメージ]	選択 1. 全体埋め 2. 全体表示 3. 拡大縮小なし	全体埋め	objectFit	string	cover	イメージの表示方法
17	スタイル [アバター]	選択 1. 円 2. 角丸 3. 正方形	円	variant	string	circular	アバターのスタイル
18	スタイル [プッシュボタン]	選択 1. 塗りつぶし 2. アウトライン 3. テキスト	塗りつぶし	variant	string	contained	プッシュボタンのスタイル
19	下線 [リンク]	選択 1. 常に 2. ホバー時 3. なし	常に	underline	string	always	リンクの下線設定
20	前アイコン [プッシュボタン]	選択	なし	startIcon	string		プッシュボタンの前アイコン
21	後アイコン [プッシュボタン]	選択	なし	endtIcon	string		プッシュボタンの後アイコン
22	表示	真偽	ON	visibility	boolean	true	カラムの表示/非表示
23	非アクティブ [プッシュボタン/ アイコンボタン]	真偽	ON	disabled	boolean	false	非アクティブ状態
24	クリックイベント [イメージ/リンク]	選択 1. なし 2. アクション	アクション				クリック時のイベント
25	クリックイベント [プッシュボタン/アイコンボタン]	選択 1. なし 2. アップロード 3. アクション	アクション				クリック時のイベント

ノート

• 設定可能なプロパティとカラムタイプの関係は次の通りです。

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

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

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

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

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

イベント

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