In this guide, we will show you how to build a table.

Interactive prototype - click to interact:





Build the basic structure

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.





Working with the widget

Adjust sizes / column width

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:





Adjust alignment

If one column contains numbers, we will make them more readable by aligning them to the right:

• Select one 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





Adjust content / add columns

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.