Table

Display components with data in a table layout.

The table component is a repeating group - meaning it is connected to a data source, and repeats a type of layout (in this case, rows) for each record.

Data Source

The first step to any repeating group is choosing the data source. Typically you will create a query to some external database, such as an Airtable view. The table will initially appear with two (default) columns with the name and image of the records.

⁠

Columns

Each component nested directly inside the table will become a column, with the component label being used as a the column header. This makes it easy to create simple tables by adding variables and components - but also makes it possible to create more complex layouts and behaviour by using frames and group components as columns.

⁠

⁠

Frames & Groups as Columns

As mentioned above, you can use frames or group components to make a column with more advanced content. In this example there is a Drawer component for the last column with a button as a trigger.

⁠

⁠

When clicked, the button opens a side drawer with more content, and another button to open a dynamic page. This method of extending a row using a vertical layout is very useful in keeping tables from becoming crowded and overwhelming for users.

⁠

⁠

Data Source

Columns

Frames & Groups as Columns

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.