Create a table
Last updated
Last updated
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.
Create an app if you don't have one, or go to the app that you want to add a table
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.
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.
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:
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.
Hide and arrange columns: Drag the columns to rearrange them and click to hide those columns that you don't want to present.
Rename Columns: Click on columns to rename the title of the column
Edit column elements
If you want to display more than a text of the table value, click the icon on the table level to enter editing 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.
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 the product_name key in each row.
Use containers to arrange the elements.
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.
