Table Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Table

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Tables are great at presenting a clear structure that can be scanned to get just the right information. A table can organise, and present data that is relative, and it can enable user interactions like selecting, adding, deleting, and reordering.

When to use

When you want to group related data in a scannable manner.
To present data that has a repetive structure.

‍

Anatomy

Column header: Used for indicating the column heading. Optionally paired with actions like checkbox or arrange arrows.
Leading cell: Used for showing the first (i.e. leading) column in the table. Usually placed in the leftmost (i.e. first) column.
General content cell: Comes with a variety of content types and used for all other cells in the table.

‍

Best Practices

Let people edit a table when it makes sense.
Provide appropriate feedback when people select a row or column. Shipfaster provides all necessary states such as rest, active, and hover.
Choose a row style that fits the information you need to display.

‍