テーブルカラム

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

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

カラムタイプ	データタイプ	値 (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
アバター	string	• 表示アバターパスまたは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	上	数値	16 8 [アイコンボタン] 7 [チェックボックス]	paddingTop	number	16 8 [アイコンボタン] 7 [チェックボックス]	カラムの各セルの上余白 v3.4.0で追加されたプロパティ
7	右	数値	16 7 [チェックボックス]	paddingRight	number	16 7 [チェックボックス]	カラムの各セルの右余白 v3.4.0で追加されたプロパティ
8	下	数値	16 8 [アイコンボタン] 7 [チェックボックス]	paddingBottom	number	16 8 [アイコンボタン] 7 [チェックボックス]	カラムの各セルの下余白 v3.4.0で追加されたプロパティ
9	左	数値	16 7 [チェックボックス]	paddingLeft	number	16 7 [チェックボックス]	カラムの各セルの左余白 v3.4.0で追加されたプロパティ
10	記号と単位の位置 [テキスト/数値]	選択 1. なし 2. 先頭 3. 末尾	なし	inputAdornmentsPosition	string		記号と単位の表示位置
11	記号と単位 [テキスト/数値]	文字列		inputAdornments	string		記号と単位のテキスト
12	水平位置	選択 1. 左 2. 中央 3. 右	[詳細1]	halign	string	[詳細1]	水平位置の配置
13	フォーマット[数値]	選択 1. None 2. #,# 3. #,#.00	None	format	string	none	数値のフォーマット
14	フォーマット[日付]	選択 1. yyyy/MM/dd 2. MM/dd/yyyy 3. dd/MM/yyyy	yyyy/MM/dd	format	string	yyyy/MM/dd	日付のフォーマット
15	フォーマット[日時]	選択 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	日時のフォーマット
16	最大値 [レーティング]	数値	5	max	number	5	レーティングの最大値
17	最小単位 [レーティング]	number	1	precision	number	1	レーティングの最小単位
18	イメージ幅 [イメージ]	数値	40	imageWidth	number	40	イメージの幅
19	イメージ高さ [イメージ]	数値	40	imageHeight	number	40	イメージの高さ
20	イメージ表示方法 [イメージ]	選択 1. 全体埋め 2. 全体表示 3. 拡大縮小なし	全体埋め	objectFit	string	cover	イメージの表示方法
21	スタイル [アバター]	選択 1. 円 2. 角丸 3. 正方形	円	variant	string	circular	アバターのスタイル
22	スタイル [ボタン]	選択 1. 塗りつぶし 2. アウトライン 3. テキスト	塗りつぶし	variant	string	contained	ボタンのスタイル
23	サイズ [チェックボックス]	選択 1. 小 2. 中 3. 指定なし	中	size	string	medium	チェックボックスのサイズ。指定なしの場合はフォントサイズが有効になります。 v4.2.0で追加されたプロパティ
24	サイズ [レーティング]	選択 1. 小 2. 中 3. 大 4. 指定なし	中	size	string	medium	レーティングのサイズ。指定なしの場合はフォントサイズが有効になります。 v4.2.0で追加されたプロパティ
25	サイズ [アバター]	選択 1. 小 2. 中 3. 大 4. 指定なし	中	size	string	medium	アバターのサイズ。指定なしの場合はアバター幅/アバター高さが有効になります。 v4.2.0で追加されたプロパティ
26	サイズ [ボタン]	選択 1. 小 2. 中 3. 大 4. 指定なし	小	size	string	small	ボタンのサイズ。指定なしの場合はボタン幅/ボタン高さが有効になります。 v4.2.0で追加されたプロパティ
27	サイズ [アイコンボタン]	選択 1. 小 2. 中 3. 大 4. 指定なし	小	size	string	small	アイコンボタンのサイズ。指定なしの場合はアイコンボタン幅/アイコンボタン高さが有効になります。 v4.2.0で追加されたプロパティ
28	ボタン幅 [ボタン]	文字列		buttonWidth	number/string		ボタンの幅。サイズが指定なしの場合のみ有効です。未指定時はMUIデフォルトサイズ。 v4.2.0で追加されたプロパティ
29	ボタン高さ [ボタン]	文字列		buttonHeight	number/string		ボタンの高さ。サイズが指定なしの場合のみ有効です。未指定時はMUIデフォルトサイズ。 v4.2.0で追加されたプロパティ
30	アイコンボタン幅 [アイコンボタン]	数値	40	iconButtonWidth	number	40	アイコンボタンの幅(px)。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
31	アイコンボタン高さ [アイコンボタン]	数値	40	iconButtonHeight	number	40	アイコンボタンの高さ(px)。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
32	アバター幅 [アバター]	数値	40	avatarWidth	number	40	アバターの幅(px)。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
33	アバター高さ [アバター]	数値	40	avatarHeight	number	40	アバターの高さ(px)。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
34	フォントサイズ [チェックボックス]	数値	24	fontSize	number	24	チェックボックスのフォントサイズ。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
35	フォントサイズ [レーティング]	数値	24	fontSize	number	24	レーティングのフォントサイズ。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
36	フォントサイズ [ボタン]	数値	14	fontSize	number	14	ボタンラベルのフォントサイズ。サイズが指定なしの場合のみ有効です。 v4.2.0で追加されたプロパティ
37	下線 [リンク]	選択 1. 常に 2. ホバー時 3. なし	常に	underline	string	always	リンクの下線設定
38	前アイコン [ボタン]	選択	なし	startIcon	string		ボタンの前アイコン
39	後アイコン [ボタン]	選択	なし	endIcon	string		ボタンの後アイコン
40	キャッシュ無効 [イメージ/アバター]	真偽	OFF	cacheDisabled	boolean	false	イメージに対してのキャッシュ利用状態 v4.1.0で追加されました。
41	表示	真偽	ON	visibility	boolean	true	カラムの表示/非表示
42	非アクティブ [ボタン/ アイコンボタン]	真偽	OFF	disabled	boolean	false	非アクティブ状態
43	クリックイベント [イメージ/リンク]	選択 1. なし 2. アクション	アクション				クリック時のイベント
44	クリックイベント [ボタン/アイコンボタン]	選択 1. なし 2. アップロード 3. アクション	アクション				クリック時のイベント

ノート

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

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

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

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

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

イベント

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