In this guide, we will show you how to build a table.
Interactive prototype - click to interact:
As a reference, this will be our final structure:
First, let’s create the basic elements:
Creeate a container called TableWrapper.
Inside TableWrapper, place a new cell called TableRow . This will be our main widget later on.
Inside TableRow create a TableCell element for the columns.
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:
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:
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:
Select one TableCell of the column containing numbers
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:
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!