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.
Use the following query to create a "product_list" table in the Postgres data node and click Run. (Skip this step if you already had a table to work on)
CREATE TABLE product_list AS
SELECT
'https://cdn.shopify.com/s/files/1/0129/1072/products/CARNEROS_UNTUCKIT_GINGHAM_LIGHT-BLUE_1_27febc1d-e736-4f12-a3d9-aa930ee79c1d.jpg?v=1573594048' AS image_url,
'Classic Cotton Carneros Shirt' AS product_name,
'UT-14-35173-LG' AS sku,
68 AS price,
680 AS stock,
20 AS discounts_percent_off
UNION ALL
SELECT
'https://cdn.shopify.com/s/files/1/0129/1072/products/BARBERA_UNTUCKIT_CHAMBRAY_SOLID_BLUE_1.jpg?v=1573594089',
'Barbera',
'UT-14-31059-MD',
78,
0,
15
UNION ALL
SELECT
'https://cdn.shopify.com/s/files/1/0129/1072/products/GRUNER-VETLINER_UNTUCKIT_PLAID_FLANNEL_BLUE_1.jpg?v=1573593166',
'Brushed Cotton Gruner Vetliner Shirt',
'UT-14-5096-MD',
88,
102,
0
UNION ALL
SELECT
'https://cdn.shopify.com/s/files/1/0129/1072/products/BONARDA_UNTUCKIT_GINGHAM_BUFFALO_GREEN_1_6db2ded6-56f2-487f-a59f-733c08bafe06.jpg?v=1573594042',
'Classic Cotton Bonarda Shirt',
'UT-14-1194-MD',
88,
5,
0
UNION ALL
SELECT
'https://cdn.shopify.com/s/files/1/0129/1072/products/CASABLANCA_UNTUCKIT_CHAMBRAY_BLACK_1.jpg?v=1573594042',
'Chambray Casablanca Shirt',
'UT-14-1035-XXL',
98,
290,
0;
To display data in your table, you will first need to identify a specific data node that you would like to retrieve information from. Once you have identified this node, you can write a SQL query in the data node to select the data in the format that you want it to be displayed. Remember to click "Run & Save" before you leave the data node.
It is recommended to transform your data to match what you'd like to table to display as closely as possible in advance for the smoothest process, including the order of the columns. If you'd like your table to display a column of buttons or checkboxes, you should also dedicate a column for that.
As an example, in the case below, a column named "checkboxes" was added and the other columns were selected to be included in the table.
SELECT '' AS checkboxes, image_url, product_name, sku, price, stock, discounts_percent_off
FROM product_list;
To add a table to your page, go to Create -> Elements -> Elements -> Table and drag it onto the page.
Set the size of your table under Config -> Styles -> Size.
Select the table and navigate to Config -> Property. Select your data node 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.Checkboxes: We want both the header and rows to contain a checkbox. The column settings should have "checkboxes" as the key. For the title, insert any value -- we will overwrite it in the template.This will create a new column template for your table. Now, we can populate the header and rows. Drag in a Switch element into both the header and row slots, and under switch properties change the mode to checkbox. We recommend wrapping them in a Container for easier styling.
- 2.Product: For our product column, we'd like to include 3 pieces of information: the product image, sku, and name. Pick any column to use as the key. We'll use "sku".Then build the layout of the column using a combination of Container, Text, and Image elements. You can use accessors to display the values you want. For instance, the value of the 'sku' column can be accessed using
${$value}, since the key for this column is sku.${}tells the system that you are using an accessor to access data.$valuemeans to extract the value of thevaluekey in each row. - 3.To display a "#" symbol before the 'sku' value, add a separate text element next to it (do not include the "#" symbol in the same element as
${$value}). 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_namemeans to extract the value of theproduct_namekey in each row.Similarly, we'll be able to access the product's image URL to display the Image.
- 4.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}. Similar to adding a "#" sign before the sku, we can add a separate text element for "$" before the price, and a "%" after the promotion value. Again, make sure these additional symbols are not in the same text element as${$value}.
- 5.Hide unused columns: The last step is to hide our unused columns. The column I created in step 2 contains data from 3 columns, while using only 1 key ("sku"). That means that the "image_url" and "product_name" keys are still unused, and thus will still be displayed. To hide these columns, we add more column settings. However, this time click on thenext to the title to hide the column.
This is what our final table will look like:
Last modified 1mo ago