Table Data

Role

Creator

Platforms

Web & Mobile

Client

n/a

Areas

UI Design

Responsive dynamic components with variants for each use case.

Atomic stylings which can easily be changed to reflect any style guide.

Placeholders used throughout the components for complete flexibility of customisation.

Prototyping

Building complex interactive and responsive organisms, with variants and auto layout.

The first step is to create the require table using cells from the component library, once all of the rows and columns are accurate, we can being prototyping. For this example I will be using a cap table.

For this prototype I would like the 3 rows for Founder, Investor and Equity plans grantable to have a hover state.

To create the hover state a component with a varient is required. Copy one of the existing rows and change the cell data to placeholders.

Add auto layout to the row (shift a), cell 1 to have it’s horizontal resizing set to ‘Fixed’, and cells 2-8 each to be set as ‘Fill’.

This row can now be turned into a component (option command k).

To create the interactive hover state, create a varient of the component.

Set the background of component 1 to white (#ffffff) and the background of component 2 to light grey (#fafafa). Select prototype mode, connect component 1 to component 2, and set the interaction detail to ‘White hovering‘.

Now the row component can be used to replace the 3 required rows, and the placeholder data can be updated for each row.

The hover state is now visible whilst presenting the prototype.

To make the table responsive, add auto layout to the remaining elements.

The first step is to add horizontal auto layout to the rows 1 and 5 (rows 2-4 already have auto layout applied from within the component)

Now all of the rows can be combined with vertical auto layout (ensure the 5 internal rows are each set to horizontal resizing ‘fill’).

Add a 1px outline to close the cells.

The table is now responsive and can be used across required dimensions.

To take the prototype a step further expanded states can be introduce.

In a similar process to the hover state, the row component can we wrapped in a new component, with another component of the expanded state combined as a varient. Set the prototype detail to ‘On click‘.

There is a lot of flexibility to adapt the tables, the advantages of using the initial component set is to work quickly and accurately whilst maintaining consistency through out the designs.