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.

Prepare your data

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

Create an app if you don't have one, or go to the app that you want to add a table

Drag table element onto page

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

Configure your table

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.

Configure columns

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 your table style

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 updated