Table

You can use a table element to customize how you present a table from a data node (let’s call this a data table).
See Create a table for a detailed tutorial
Properties
​
​
Data source: Select a data node to display its data.
Columns: Columns to display in the table.
Header and data background color: Background color for the header row and data rows.
Header and data color: Color for the header row and data rows.
Hover background color: Color for when user hovers over row.
Border color: Color of the table border.
Border width: Width of the table border in pixels.
Empty text: Text that will be shown when the table has no data to display.
​
​
Header Spacing and Cell Spacing: Set padding for header and data cells.
See Tooltip for tooltip configurations.
Populating the table
When you select a data node for the table element, the entire data table will be displayed by default. You can use the blue template area to set configurations that will apply to all columns.
You can further modify your table by customizing the structure of each individual column under Config -> Property
Customize or hide a column
To customize a column, click on 
under Columns.
​
​
Click on the new column, which will open up its configuration.
​
​
Title: Display name of the column.
Key: Name of the column in your data. Each column (key) can only be customized once.
Width: Width of the column in pixels.
Fixed: Set whether the column will be fixed to the left, right, or not fixed.
Hide: To hide a column, click on the 
 symbol.
To re-order the columns, click and drag on the 6 dots on the left of the column.
When a new column is added, a new field will appear in your table element for you to configure the column.
Use ${$value} to access values for that column’s key. Use ${$row.column} to access values for that row from other columns in your data.
In the above example, the Product column will display both the id and name of the product, while the Stock column will contain the stock number.
Supported Events
Row Click: Triggered when user clicks on a row.
You’ll be able to use the values in the clicked row. They’re stored in an object called rowData in the event payload. To access a value, use ${event.rowData.column}. See Event payload for more.
Supported Actions
Set Table Data: Set data for the table with an array of JSONs.
Set Data: Change element data. See Data Store.
Set Loading: Set loading animation. See Set loading animations.
Visit Interactions for more on events and actions.
Table & Chart
Chart
Last modified 18h ago