Table

You will find visual and developer guidelines for building a table with links to tutorials and live code samples.

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

structure display

Alternate

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

alternate color

State

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

table state

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.

Top Bar

Pagination

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

pagination

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.

Best practices

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

header standard

Dense

/ H : 48px

header dense

Cell Sizes

Standard

/ H : 52px

cell size activated
cell size enabled

Dense

/ H : 44px

cell dense activated
cell dense enabled

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.

double cell standard
double cell dense

Types

Separate

/ Alternate /Divider /Divider + Alternate

Table types

Divider

/ Header: Darker

divider header

Divider

/ Cell: Darker

divider cell

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.

Table elements header

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 constribute your own tables.

Table elements cell