Table

The table component displays data in a tabular format.This article introduces the detailed configuration method of the table component.

Private Properties

Parameters	Description	Default value
data source	Configurable data sources	—
BG Color		#ffffff

List Data

After the data source is configured, the column name of the acquired data is displayed. The display name can be customized

Parameters	Description	Default value
The column name of the data	Data Key	—

Title

Not displayed by default

Parameters	Description	Default value
Text		Table header
Size	Optional value: 12~72	16
Color		#333333
Thickness	Optional values: Standard, Bold	Standard
Position	Optional values: Right, Center, Left	Left
BG Color		#ffffff

Header

Default Display

Parameters	Description	Default value
Font Size	Optional value: 12~72	16
Color		#333333
Thickness	Optional values: standard, bold	Standard
Position	Optional values: Left, Center, Right	Left
BG Color		#f0f2f5
Line Height		36

Content

Parameters	Description	Default value
Size	Optional value: 12~72	16
Color		#333333
Thickness	Optional values: Standard, Bold	Standard
Position	Optional values: Right, Center, Left	Left
BG Color		#ffffff
Height		36

Row Style

Parameters	Description	Default value
Hover Color	Background color of the row when moving in	#f2f2f2

Pager

Default Display

Parameters	Description	Default value
Show Rows	The amount of data displayed on one page	10
Font Color		#ffffff
Position	Optional values: Right, Center, Left	Center

Active Page

Follow the paginator display

Parameters	Description	Default value
Font Color		#0070cc
BG Color		#ffffff
Border Color		#0070cc

Normal page

Follow the paginator display

Parameters	Description	Default value
Font Color		#333333
BG Color		#ffffff
Border Color		#dedede

Export

Not displayed by default

Parameters	Description	Default value
Data Scope	The number of exported data. Optional values: All, Current Page.	current Page
BG Color		#0066ff
Align	Optional values: Right, Center, Left	Right
Name		Export
Size	Optional value: 12~72	12
Color		#ffffff
Thickness	Optional values: Standard, Bold	Standard

Border

Follow Export Display

Parameters	Description	Default value
Thickness		1
Color		#ffffff
Line Style	Optional values: straight line, dashed line, dotted line	straight line

Aggregate

Not displayed by default

Parameters	Description	Default value
Aggregate functions	You can customize multiple filter conditions to aggregate data Statistical method：Sum, Average, Count

Inside Border

Default Display

Parameters	Description	Default value
Thickness		1
Color		#dcdfe6
Line Style	Optional values: straight line, dashed line, dotted line	straight line

Outside Border

Default Display

Parameters	Description	Default value
Thickness		1
Color		#dcdfe6
Line Style	Optional values: straight line, dashed line, dotted line	straight line

Node

Parameters	Description	Default value
Width	Overall width	300
Height	Overall height	200
X	Horizontal coordinate	—
Y	Vertical coordinate	—

Application Examples

Displays the temperature data reported by a sensor device every day in the past 30 days in a table.

---

FAQ

1. Which data source is referenced in this case?

Please refer to (Statistics of the average temperature, maximum temperature, and minimum temperature of each day in the past month)

2. How does a component configure a data source?

Please refer to (Component Configuration Data Source)

3. How to set the background of the table dragged onto the canvas to be transparent?

Please set the background transparency of the following parts to 0 and the color to ffffff：

• Private properties
• Header
• content
• Normal page

For specific operation methods, please refer to：

4. How to set different colors for the data in the table to distinguish the display according to specific conditions?

The following are configuration examples of text color and cell background for reference.