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

Note

• 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.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by actions.
2	Label	String		label	string		Column label
3	Column Type	Selection 1. Text 2. Number 3. Date 4. DateTime 5. Time 6. Checkbox 7. Rating 8. Avatar 9. Image 10. Icon Button 11. Push Button 12. Link	Text				Column type
4	Width	Number	100	width	number	100	Column width
5	Color	String Color Picker		color	string		Column color
6	Input Adornment Position [Text/Number]	Selection 1. None 2. Start 3. End	None	inputAdornmentsPosition	string		Symbol and unit display position
7	Input Adorment [Text/Number]	String		inputAdornments	string		Symbol and unit text
8	Halign	Selection 1. Left 2. Center 3. Right	[Detail 1]	halign	string	[Detail 1]	Horizontal alignment
9	Format [Number]	Selection 1. None 2. #,#.## 3. #,#.00	None	format	string	none	Number format
10	Format [Date]	Selection 1. yyyy/MM/dd 2. MM/dd/yyyy 3. dd/MM/yyyy	yyyy/MM/dd	format	string	yyyy/MM/dd	Date format
11	Format [DateTime]	Selection 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	DateTime format
12	Max [Rating]	Number	5	max	number	5	Rating maximum value
13	Precision [Rating]	Number	1	precision	number	1	Rating minimum unit
14	Image Width [Image]	Number	40	imageWidth	number	40	Image width
15	Image Height [Image]	Number	40	imageHeight	number	40	Image height
16	Object Fit [Image]	Selection 1. Cover 2. Contain 3. None	Cover	objectFit	string	cover	Image display method
17	Variant [Avatar]	Selection 1. Circular 2. Rounded 3. Square	Circular	variant	string	circular	Avatar style
18	Variant [Push Button]	Selection 1. Contained 2. Outlined 3. Text	Contained	variant	string	contained	Push button style
19	Underline [Link]	Selection 1. Always 2. Hover 3. None	Always	underline	string	always	Link underline setting
20	Start Icon [Push Button]	Selection	None	startIcon	string		Push button start icon
21	End Icon [Push Button]	Selection	None	endIcon	string		Push button end icon
22	Visibility	Boolean	ON	visibility	boolean	true	Column show/hide
23	Disabled [Push Button/Icon Button]	Boolean	OFF	disabled	boolean	false	Disabled state
24	Click Event [Image/Link]	Selection 1. None 2. Action	Action				Click event
25	Click Event [Push Button/Icon Button]	Selection 1. None 2. Upload 3. Action	Action				Click event

Note

• 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.