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


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

alternate color


Use an active state when a row is selected. When designing in the UI kit, 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


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.

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


/ H : 56px

header standard


/ H : 48px

header dense

Cell Sizes


/ H : 52px

cell size activated
cell size enabled


/ 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



/ Alternate /Divider /Divider + Alternate

Table types


/ Header: Darker

divider header


/ Cell: Darker

divider cell

Table Elements link

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


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

Table elements header


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.

Table elements cell