Create a table
Here, we'll walk you through an example for how to create and configure a table element. For information about the table element and more general instructions on how to add/hide columns, visit Table.
The table that we will be recreating in this tutorial is the table for our data validation app. We'll show you how to prepare your data and configure the table, including adding a column of checkboxes, displaying images, constructing columns with multiple pieces of information, adding currency symbols such as "$" or "%", and creating columns that only display values.

In this tutorial, we will use a sample Shopify products dataset to build the table, you can download the data here and add it to resource.

To add a table to your page, go to Create -> Elements -> Table and drag it onto the page.

Select the table and navigate to Property located at the right configuration panel. Select the Table Node of your data from the Data source dropdown menu.

If you'd like, there are additional styling options, including header and row sizes, you can change below. See Table for more on these options.
The next step is to build your columns. By default, the table will display all columns with no styling, similar to the data node preview we saw from step 1.

To configure each displayed column, we can build them individually by adding columns under Config -> Property. To add a column, click on the
under Columns. Then, we'll build our table column by column.

The key of a column setting will be the name of a column in your data node that will be replaced by your configuration. The title will be the displayed header on your table.
- 1.Hide and arrange columns: Drag the columns to rearrange them and clickto hide those columns that you don't want to present.
- 2.Rename Columns: Click on columns to rename the title of the column
- 3.Edit column elements If you want to display more than a text of the table value, click theicon on the table level to enterediting mode from preview. Then you will need to use accessors to access the value of the cell. For example, drag an image element in the product_image cell, and set its url to
${$value}
, the product_image column will display the images of the product.Drag an image element in the product_image cell - 4.Use multiple columns value in one cell Additionally, you can access values from other columns, such as 'product_name', by using
${$row.product_name}
.Similarly,${}
tells the system that you are using an accessor to access data.$row.product_name
means to extract the value of theproduct_name
key in each row.Use containers to arrange the elements. - 5.Price, Stock, Promotion: These columns have a simple configuration since they display their value without including data from other columns.Their values are accessed with
${$value}
. To add certain format, we can add a separate "$" before the${$value}
for price, and a "%" after the${$value}
for promotion value.
Set the size of your table under Config -> CSS -> Size.
Set the header color under Config -> Element Styles -> Header Background Color


This is what our final table will look like:

Last modified 11d ago