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	string	• 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. 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	Top	Number	16 8 [Icon Button] 7 [Checkbox]	paddingTop	number	16 8 [Icon Button] 7 [Checkbox]	Top margin of each cell in the column Added in v3.4.0
7	Right	Number	16 7 [Checkbox]	paddingRight	number	16 7 [Checkbox]	Right margin of each cell in the column Added in v3.4.0
8	Bottom	Number	16 8 [Icon Button] 7 [Checkbox]	paddingBottom	number	16 8 [Icon Button] 7 [Checkbox]	Bottom margin of each cell in the column Added in v3.4.0
9	Left	Number	16 7 [Checkbox]	paddingLeft	number	16 7 [Checkbox]	Left margin of each cell in the column Added in v3.4.0
10	Input Adornment Position [Text/Number]	Selection 1. None 2. Start 3. End	None	inputAdornmentsPosition	string		Symbol and unit display position
11	Input Adornment [Text/Number]	String		inputAdornments	string		Symbol and unit text
12	Halign	Selection 1. Left 2. Center 3. Right	[Detail 1]	halign	string	[Detail 1]	Horizontal alignment
13	Format [Number]	Selection 1. None 2. #,#.## 3. #,#.00	None	format	string	none	Number format
14	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
15	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
16	Max [Rating]	Number	5	max	number	5	Rating maximum value
17	Precision [Rating]	Number	1	precision	number	1	Rating minimum unit
18	Image Width [Image]	Number	40	imageWidth	number	40	Image width
19	Image Height [Image]	Number	40	imageHeight	number	40	Image height
20	Object Fit [Image]	Selection 1. Cover 2. Contain 3. None	Cover	objectFit	string	cover	Image display method
21	Variant [Avatar]	Selection 1. Circular 2. Rounded 3. Square	Circular	variant	string	circular	Avatar style
22	Variant [Button]	Selection 1. Contained 2. Outlined 3. Text	Contained	variant	string	contained	Button style
23	Underline [Link]	Selection 1. Always 2. Hover 3. None	Always	underline	string	always	Link underline setting
24	Start Icon [Button]	Selection	None	startIcon	string		Button start icon
25	End Icon [Button]	Selection	None	endIcon	string		Button end icon
26	Visibility	Boolean	ON	visibility	boolean	true	Column show/hide
27	Disabled [Button/Icon Button]	Boolean	OFF	disabled	boolean	false	Disabled state
28	Click Event [Image/Link]	Selection 1. None 2. Action	Action				Click event
29	Click Event [Button/Icon Button]	Selection 1. None 2. Upload 3. Action	Action				Click event

Note

• The "id" property cannot be set by an action.
• 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.
• 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

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