Table
Last updated
Was this helpful?
Last updated
Was this helpful?
You can use a table element to customize how you present a table from a data source (Table, Metric or Query).
Data source: Select a data source to display its data.
Columns: Columns to display in the table.
When you select a data source 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
Click on the new column, which will open up its configuration.
Name: Display name of the column.
Key: Name of the column in your data.
Width: Width of the column in pixels.
Pinned: Set whether the column will be fixed to the left, right, or not fixed.
Fixed Height: Toggle off to allow automated height that fit the cell content
Sort: Add a sort button on the column header. When user click sort buttons, event 'Sort Changed' will be triggered. Add interaction on the table to enable the event triggers data source sort.
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.
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.
Stripe: Toggle on to display a stripe table
Vertical Border: Toggle on to display vertical grid borders
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.
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.
Sort Change:
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.
To customize a column, click on under Columns.
Hide: To hide a column, click on the symbol.
