How to create a tablelink

Watch this tutorial below to learn how to create a table.

Some Tips

• Right align the numbers;

• Pay attention to the height of the header and the cell. It is different;

• Use bold style for the selected content.

"Create a Table"

Structure link

The basic elements of a table consist of :

1. Header

2. Cell:

   pay attention to the height of the header and the cell. It is different;

3. Checkbox:

   for multi selection

4. Alternate:

   color for rows

5. States:

   active, focused and hovered

6. Divider:

   to visually separate rows

Alternate

Use an alternate color when displaying large datasets in a dense format. This improves the readability.

State

Use an active state when a row is selected. When designing in Sketch, use the side panel override options to make changes.

Table Options

And there are also top bar and pagination which we can add in the tables when there are a big amount of datas to show.

Top Bar

Use a top bar to display table actions such as search, filter, export, enter full view, etc.

Pagination

Use pagination to help users see the total amount of data available.

Best practice for row actions (new section)

Show Action on hover (or on row tap). If you have a list of contextual actions, display the three most used ones, then with a (3 dotted icon) give the option to access the remaining options from a list.

Size and Types link

Depending on the data density and usage, you can opt for Standard or Dense size. In each one, there are Light type and normal type of typography. We often use the light type for Enabled state. For the activated ones, it is better using the normal type.

Header Sizes

Standard

/ H : 56px

Dense

/ H : 48px

Cell Sizes

From these examples, we could see that there is 4px difference between header and cell. It is possible to create other sizes of table, but should always follow this rule.

Types

Divider

/ Header: Darker

Divider

/ Cell: Darker

Table Elements link

The table component is composed of a set of UI Bricks you can customize.

Header

In general, there are there types of header in the table : Normal Header, Header with Sorting and Header with Information.

Cell

Here is a collection of cell elements which cover a big part of needs of financial tables. You can choose what you want to contribute your own tables.