Table

Tables are components that display tabular data. A table consists of a body, the table, and column components, the table columns. Table columns can be added/removed at will from the table properties.

Note

• Data cannot be entered or updated from the table.
• When handling large numbers of records, payload limitations and client load can be significant. The system may become unstable if the number of records displayed at one time exceeds 10,000.

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	Width	Number	565	width	number	565	Component width
3	Height	Number	230	height	number	230	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		Y coordinate position
6	Color	String Color Picker		color	string		Component color
7	Background Color	String Color Picker		backgroundColor	string		Background color
8	Pagination	Boolean	OFF	pagination	boolean	false	Enable/disable pagination function
9	Selecting	Boolean	OFF	selecting	boolean	false	Enable/disable row selection function
10	Sticky Header	Boolean	ON	stickyHeader	boolean	true	Fixed header display
11	Visibility	Boolean	ON	visibility	boolean	true	Component show/hide
12	Label Color	String Color Picker		labelColor	string		Label text color
13	Header Color	String Color Picker		headerColor	string		Header background color
14	Header Row Height	Number	56	headerRowHeight	number	56	Header row height
15	Header Font Size	Number	14	headerFontSize	number	14	Header font size
16	Header Word Wrap	Selection 1. Normal 2. OFF	OFF	headerWordWrap	string	off	Header text wrapping setting
17	Row Word Wrap	Selection 1. Normal 2. OFF	OFF	rowWordWrap	string	off	Row text wrapping setting
18	Even Background Color	String Color Picker		evenBackgroundColor	string		Even row background color Added in "v3.3.0"
19	Odd Background Color	String Color Picker		oddBackgroundColor	string		Odd row background color Added in "v3.3.0"
20	Row Style	JSON [Detail 4]	[]	rowStyle	array of object	[]	Style specification for each row Added in "v3.3.0"
21	Cell Style	JSON [Detail 4]	[]	cellStyle	array of object	[]	Style specification for each cell Added in "v3.3.0"
22	Page Size	Number	100	pageSize	number	100	Number of rows displayed per page
23	Value	Table [Detail 1]		value	array of object		Table value
24	Selected			selected	object, or array of object		Data of selected rows

Note

• The "id" and "selected" properties cannot be set in the action.
• Pagination allows you to set the number of items displayed per page.
• The [rowStyle] and [cellStyle] properties cannot be retrieved via actions.

[Details 1] Value (value)

Gets or sets the value of the entire table. The format of the value is an array of objects representing rows.
The default status is registered as follows.
Register each row from the [Add Row] button.
To delete, select the check box and click the “Delete” button.

month	company A	company B	company C	company D
02	20	52	72	34
03	5	33	90	55
04	55	30	81	66
05	30	11	62	22

When handling data in an action, data can be displayed in a table by setting the value (value) in the form of an array of objects, as in the following example. Similarly, the value (value) contains the current state of the displayed data in the table in the form of an array of objects.

[
  {"month":"02","companyA":20,"companyB":52,"companyC":72,"companyD":34},
  {"month":"03","companyA":5,"companyB":33,"companyC":90,"companyD":55},
  {"month":"04","companyA":55,"companyB":30,"companyC":81,"companyD":66},
  {"month":"05","companyA":30,"companyB":11,"companyC":62,"companyD":22}
]

Note

• The value to be set for the value (value) varies depending on the column type. For more information, see the Table Columns page.
• When the order of table columns is changed, there is the following difference in the value (value) displayed on the properties screen between the data registered before the change and the data registered after the change. However, the data displayed in the table is not affected, only the order of the keys of the objects is different.
  • For data that was registered before the change, the order of the object’s keys will be in the order they were in before the change.
  • For newly added data after the change, the order of the object’s keys will be in the order after the change.

[Details 2] To get the clicked rows from the table column action

In table column actions, the row where the event occurs can be retrieved by the selected property. The selected value (selected) is a property that allows you to retrieve the row data selected in the table. On the click event (onclick) of a table column, a row object array with 1 element can be obtained using the selected property.

[Details 3] To get the selected rows from an action outside the table

If the "selecting" property is set to ON, the left-most column will have a selection checkbox. Row data with the row selection checkbox turned on can be retrieved from an action outside the table by means of the selected value (selected) property. The acquisition data format is an array of objects.

[Detail 4] Table Style

By using the following properties, you can apply styles to even rows, odd rows, and each row and cell.
Additionally, by combining with actions, you can implement behaviors such as changing styles only under specific conditions.

• "Even Background Color"
• "Odd Background Color"
• "Row Style"
• "Cell Style"

How to set Even Background Color/Odd Background Color

For even row background color/odd row background color, specify the background color using a string or color picker.
When setting with an action, set the background color as a string to the "evenBackgroundColor"/"oddBackgroundColor" action properties.

$ui.<TableID>.evenBackgroundColor = "red";
$ui.<TableID>.oddBackgroundColor = "#039BE5";

Note

The first row is treated as row 0 and is an even row.

How to set Row Style/Cell Style

For row style/cell style, set the style in JSON format as follows.

Row Style:

[
  {"row": "0", "backgroundColor": "blue"},
  {"row": "1", "backgroundColor": "#ffffffff"}
]

Cell Style:

[
  {"row": "0", "column": "month", "backgroundColor": "blue", "color": "white"},
  {"row": "1", "column": "companyA", "backgroundColor": "#ffffff", "color": "#039BE5"}
]

When setting with an action, set the style as an object array to the "rowStyle"/"cellStyle" action properties.

$ui.<TableID>.rowStyle = [
  {row: 0, backgroundColor: "blue"},
  {row: 1, backgroundColor: "#ffffffff"}
];

$ui.<TableID>.cellStyle = [
  { row: 0, column: "month", backgroundColor: "blue", color: "white"},
  { row: 1, column: "companyA", backgroundColor: "#ffffff", color: "#039BE5"}
];

The object properties are as follows:

Target	Object Property	Description
rowStyle	row	1. Specify the row to set the style as a number or string 2. The first row is treated as row 0
	backgroundColor	1. Table row background color 2. Specify by color name or 6-digit (8-digit) code
cellStyle	row	1. Specify the row of the cell to set the style as a number or string 2. The first row is treated as row 0
	column	1. Specify the column of the cell to set the style by column ID
	color	1. Table cell text color 2. Specify by color name or 6-digit (8-digit) code
	backgroundColor	1. Table cell background color 2. Specify by color name or 6-digit (8-digit) code

Note

• The display priority of each style is as follows:
  1. Cell Style
  2. Row Style
  3. Even/Odd Row Background Color
• Styles other than color and backgroundColor are not supported.

How to clear the set styles

Target	Value to Set	Result
evenBackgroundColor and oddBackgroundColor	One of the following values: 1. null 2. ""	evenBackgroundColor and oddBackgroundColor are cleared, and the even and odd row background colors set in the table disappear.
rowStyle and cellStyle	One of the following values: 1. [] 2. null 3. ""	rowStyle and cellStyle are cleared, and the row styles and cell styles set in the table disappear.

Event

None