website logo
HomepageCommunitySign up & Download for free
⌘K
USER MANUAL
User Interface
General
Styling
Color Management
Widgets
Presentation & Interaction
Interactions
Sharing & Export
Resources
JavaScript
Embedded HTML
Custom CSS
Plugins
Cloud
General
Account Registration
Projects
Prototypes
Subscription, Licensing and Billing
Single Sign-On (SSO)
Company Profile
Types of Users
User Management
Commenting
Sharing
Public Link
Embed Code
Prototype Settings
User Profile
FAQ
Tutorials
How to build
Interactive dropdown
Interactive tab bar with content
Modal dialog
Table
Input field
Upload and share prototypes
Changelog
Docs powered by archbee 
16min

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.







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.

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?













Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Input field
Docs powered by archbee 
TABLE OF CONTENTS
Build the basic structure
Working with the widget
Adjust sizes / column width
Adjust alignment
Adjust content / add columns