Table

You can use a table element to customize how you present a table from a data source (Table, Metric or Query).

See Create a table for a detailed tutorial

Properties

Data source: Select a data source to display its data.

Columns: Columns to display in the table.

Populating 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

Hide a column

To customize a column, click on under Columns.

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.

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.

Element Styles

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.

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.

Sort Change:

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.