Table Column

Table columns are the individual column components that make up a table. They are not independent as components, but exist as children of the table. Columns can be added by clicking the "Add" button in the upper right corner of the table properties.

The columns added here are table columns. Table columns are arranged in a tabular format in the table properties. Click on a tab element to access the properties of the corresponding table column.

Table columns are divided into the following column types:

Column Type	Data type	Value setting	Example of value setting
Text	string	display string	apple
Number	number	display value	12345
Date	string	display string	2023-01-01
Date Time	string	display string	2023-01-01 10:00Z
Time	string	display string	10:00Z
Checkbox	boolean	true: on, false: off	true
Rating	number	number of stars	5
Avatar	number	- display avatar path or URL - text of 2 characters or less	/avatar.jpg
Image	string	Image path or URL	/image.jpg
Icon Button	string	icon specification string	AddCircle
Button	string	button label	Edit
Link	string	link label	Link

Tips

Tips

• For table column column type "avatar", set the path or URL to display the avatar. If text of 2 characters or less is set, it will be displayed as a letter.
• For table columns of column type "Image","Icon Button", "Button", or "link", an action can be set. The event will be "onclick". The Action Editor is accessed from the table’s context menu by selecting "Actions" - "Table Columns". To access a table column in the Action Editor, specify the ID of the table column directly as follows. Example) $ui.table_column_id.label
• The order of table columns can be changed by dragging the tabs of a table column and dropping it on the destination.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Label	string
Column Type	select	- Text - Number - Date - Date Time - Time - Checkbox - Rating - Avatar - Image - Icon Button - Button - Link	Text
Width	number		100
Color	string color picker
Input Adornments Position [Text/Number]	select	- NONE - START - END	NONE
Input Adornments [Text/Number]	string
Haling	select	- LEFT - CENTER - RIGHT	[details 1]
Format[Number]	select	- None - #,#.## - #,#.00	None
Format[Date]	select	- yyyy/MM/dd - MM/dd/yyyy - dd/MM/yyyy	yyyy/MM/dd
Format[Date Time]	select	- yyyy/MM/dd hh:mm aa - MM/dd/yyyy hh:mm aa - dd/MM/yyyy hh:mm aa	yyyy/MM/dd hh:mm aa
Maximum [Rating]	number		5
Precision [Rating]	number		1
Image Width [Image]	number		40
Image Height [Image]	number		40
Object Fit [Image]	select	- Cover - Contain - None	Cover
variant [Avatar]	select	- CIRCULAR - ROUNDED - SQUARE	CIRCULAR
variant [Button]	select	- CONTAINED - OUTLINED - TEXT	CONTAINED
Underline [Link]	select	- Always - Hover - None	Always
Start Icon [Button]	select		None
End Icon [Button]	select		None
Visibility	boolean	- on - off	on
Disabled [Button/Icon button]	boolean	- on - off	off
Click Event [Image/Link]	select	- NONE - ACTION	ACTION
Click Event [Button/Icon Button]	select	- NONE - UPLOAD - ACTION	ACTION

Action

item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Label	label	string
Column Type	-
Width	width	number		100
Color	color	string
Input Adornments Position [Text/Number]	inputAdornmentsPosition	string
Input Adornments [Text/Number]	inputAdornments	string
Haling	halign	string	- left - center - right	[details 1]
Format[Number]	format	string	- none - #,#.## - #,#.00	none
Format[Date]	format	string	- yyyy/MM/dd - MM/dd/yyyy - dd/MM/yyyy	yyyy/MM/dd
Format[Date Time]	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
Maximum [Rating]	max	number		5
Precision [Rating]	precision	number		1
Image Width [Image]	imageWidth	number		40
Image Height [Image]	imageHeight	number		40
Object Fit [Image]	objectFit	string	- cover - contain - none	cover
variant [Avatar]	variant	string	- circular - rounded - square	circular
variant [Button]	variant	string	- contained - outlined - text	contained
Underline [Link]	underline	string	- always - hover - none	always
Start Icon [Button]	startIcon	string
End Icon [Button]	endtIcon	string
Visibility	visibility	boolean	- true - false	true
Disabled [Button/Icon button]	disabled	boolean		false
Click Event [Image/Link]	-
Click Event [Button/Icon Button]	-

Tips

Tips

• The "id" property cannot be set by an action.
• The relationship between settable properties and column types is as follows:

Property	Column Type
Input Adornments Position	- text - number
Input Adornments	- text - number
Number Format	- number
Date Format	- date
Date Time Format	- date time
Maximum Value	- rating
Minimum Value	- rating
Image Width	- image
Image Height	- image
Object Fit	- image
Style	- avatar - button
Underline	- link
Previous Icon	- button
Next Icon	- button
Inactive	- button - icon button
Click Event	- image - icon button - button - link

• If "Upload" is selected for "Click Event", clicking the icon button will launch the OS file selection dialog.
• If "Upload" is selected for the "Click Event", the uploaded file can be obtained as an object array using the built-in function.

[Details 1] Halign (halign)

Halign (halign) default value depends on the column type.

Column Type	Default Value
Text	Left (left)
Number	Right (right)
Date	Right (right)
Date Time	Right (right)
Time	Right (right)
Checkbox	Center (center)
Rating	Left (left)
Avatar	Center (center)
Image	Left (left)
Link	Left (left)
Button	Center (center)
Icon Button	Center (center)

Event

Event Name	Description
onclick	For click event "Action": Occurs when a component in a cell is clicked. For click event "Upload": The action is executed when the "Open (O)" button is clicked after the file is selected.