Tables and Grids

Tables and grids allow users to scroll through lists of (usually) dynamically-loaded data. Tables or grids should be used everywhere where the components visually repeat, but the content they represent differs.

Lists of people, conversations, avatars, etc. are the prime candidates for using tables and gridsLists of people, conversations, avatars, etc. are the prime candidates for using tables and grids

Lists of people, conversations, avatars, etc. are the prime candidates for using tables and grids

Reusable Cells

Before we can take on tables and grids, we need to discuss the concept of reusable cells.

Let's take the image above as an example. The highlighted parts are cells - single, reusable pieces of information that can be filled with different data.

In the case of the avatar, we can set a different name and a different image. In the case of the vertically-scrolling rows representing a message, we can set different names, images and also the preview of the message itself.

In the code development context, cells represent "prototypes" - and a prototype is filled with real data, duplicated N number of times, based on how many items we have. If you have a design like the above, you will only create two cell prototypes - one for the message, one for the avatar. In fact, you can see that the example above is wrong - it has several cells, even though it is really just 2 different designs. Let's fix that.

Message screen in edit modeMessage screen in edit mode

Message screen in edit mode

The same screen running the simulationThe same screen running the simulation

The same screen running the simulation

You can see that table and grid now have just one cell each - but visually, when tested in simulator, they still have multiple rows presenting the data. How is that possible?

Supernova can mock the design when in preview mode by taking the cells and duplicating them exactly the way the code would do it at runtime. This way, you can make one design change and it propagates to all the cell instances immediately.

👍

Creating list and grid content properly

Lists and grids can only contain cells. When you are converting components to lists or grids, make sure the content of every cell is within its own group, since only groups will be converted to cells - the rest is thrown away.

For example, if your grid has two distinct repeating design elements - first, you group that content into two groups (representing future cells), then group those two groups together (representing the future grid). When you have the structure ready, click convert > grid/collection and the rest is done by Supernova automatically.

🚧

Data Mocking

Supernova does not currently support providing different data for each row dynamically (though we may add it in the future). Keep in mind though that for prototypes, this is still purely cosmetic - developers are responsible for filling the prototypes with real data later when the backend is connected.

Tables

Tables are complex components used to present lists of data that will scroll vertically. They are the most common component for any type of presentation of data in most apps. Tables can only contain table cells - more specifically, cell prototypes, as mentioned above.

Tables, contrary to grids, can have only one column. It is also not possible to set the direction of scrolling as tables always scroll vertically. Tables scroll automatically when the content overflows in a vertical direction.

Important properties:

  • Shuffle Content - Preview-only mode where content order is randomly shuffled to give it a more dynamic feeling (content will look different every time you access the screen). Only used when there is more than one prototype cell
  • Show Separators - When enabled, separators will be drawn based on its configuration between each two cells
  • Separator Color - Color of separators when drawn
  • Left/Right Inset - Inset of separators from the left/right edge of the content. Defaults to system value of 16px

Grids

Grids are complex components used to present grids of data that can scroll either vertically or horizontally. They are used when you need to present data if a plain list doesn't suffice - in the example above, horizontal scrolling for avatars is required and that can be achieved only with a grid.

When a grid is in horizontal mode, items are stacked first vertically and then wrap to a new column when the bottom of the grid container is reached. When a grid is in vertical mode, items are stacked first horizontally and then wrap to a new row when the right edge is reached. Grids scroll by default when the content overflows the container in any direction.

Important properties:

  • Shuffle Content - Preview-only mode where content order is randomly shuffled to give it a more dynamic feeling (content will look different every time you access the screen). Only used when there is more than one prototype cell
  • Vertical Layout - Switches to the vertical grid mode. Grids default to being horizontal, because you'll usually use lists for vertical content instead
  • Cell Spacing - Spacing between each cell, both in a horizontal and vertical direction
  • Insets - Determines how much content can "overscroll", which for example you'll find very useful if you don't want your items to end exactly at the end of the screen