Table
In this guide, we will show you how to build a table.
Interactive prototype - click to interact:
To follow these instructions more easily, we recommended using the same names as we do for each cell. You may download the final project file here.
As a reference, this will be our final structure:

First, let’s create the basic elements:
Creeate a container called TableWrapper.
- For our example, set the width to a fixed value of 1000px
- Set the height to shrink
- Set the layout to vertical
- Add more styling as you like (e.g. border, shadow)
Inside TableWrapper, place a new cell called TableRow . This will be our main widget later on.
- Set the width to stretch
- Set the height to 55px
- Give it a 1px border at the bottom
Inside TableRow create a TableCell element for the columns.
- Set the width and height to stretch
- Add padding left and right
- Add a text cell inside
You can now duplicate TableCell as often as you want. Each will be another column.
Next, make TableRow a widget and add the predefined states Mouse Over and Pressed. Add styling as you like.
Now add a custom state called Header with the following settings:
- Change the font weight to medium
- Set the height to 60px
- Add more styling if you like
You can now duplicate the TableRow element as often as the number of table rows you want to have. Set all new TableRow elements to state Normal.

Yet the table still doesn't look perfectly right: In this example, the column "signal name" is too narrow/small for its content. We will take care of that in the next step.
With this structure it is easy to style each column individually, e.g. having specific widths or layouts by adjusting TableCell. This is quite handy when you want to optimize tables for limited space or when you have a lot of content.
Adjust the widths based on your needs:
- Select one TableCell from the column you want to adjust
- Select all states (⌘ ⌃ A) of the TableRow widget
- Adjust the width to fit that column's content
In our example, the table with adjusted column width now looks like this:

If one column contains numbers, we will make them more readable by aligning them to the right:
- TableCell of the column containing numbers
- Select all states (⌘ ⌃ A) of the TableRow widget
- Set the width to manual, e.g. 100px
- Set the layout alignment to center right

Having different content types (e.g. text, icon, checkbox, radio button, ...) per column is also possible. Let's say we want to add a new column in front with checkboxes instead of text:
- Build a simple Checkbox (for this how to, we will just create a basic rectangle with a border)
- Duplicate a single TableCell. Move it above the other TableCells in the layers panel to make it the first column
- Replace the text element located inside it with the newly created Checkbox (⌘ ⇧ R)
- Update your widget

You may use this method to add new columns with any content you need.
Different Content per cell
In case you want to have different content (types) per cell, you may use the "individual content" option. For example, you could add a button in one cell and a dropdown in another – both within the same column if needed.
To to this, set "Nested cells" of TableCell in the style inspector from Shared to Individual.
This should be done before duplicating the rows, since the content is not part of the widget anymore
Congratulation, you just build your own table and learned how to customize it to your needs!
Why not build an Input field now?