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.

Tips

Tips

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

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Width	number		565
Height	number		230
X	number
Y	number
Header Color	string color picker		#FFFFFF
Pagination	boolean	on off	off
Sticky Header	boolean	on off	on
Visibility	boolean	on off	on
Selecting	boolean	true false	off
Row Word Wrap	select	Off Normal	Off
Header Font Size	number		14
Header Height	number		56
Header Wrap	select	Normal OFF	OFF
Page Size	number		100
Value	table [details1]

Action

Item	Properties	Data Type	Options	Default value
id	string		automatic
width	number		565
height	number		230
x	number
y	number
headerColor	string		#FFFFFF
pagination	boolean	true false	false
stickyHeader	boolean	true false	true
visibility	boolean	true false	true
Row Word Wrap	rowWordWrap	string	off normal	off
selecting	boolean	true false	false
pageSize	number		100
value	array of object
selected	Object or array of object [details 2][details 3]

Tips

Tips

• The "id" and "selected" properties cannot be set in the action.
• Pagination allows you to set the number of items displayed per page.

[Details 1] Value (value)

Gets or sets the value of the entire table of tables. 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}
]

Tips

Tips

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

Event

None