Table
You will find visual and developer guidelines for building a table with links to tutorials and live code samples.
Previewlink
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 :
Header
Cell:
pay attention to the height of the header and the cell. It is different;
Checkbox:
for multi selection
Alternate:
color for rows
States:
active, focused and hovered
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 the UI kit, 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
Standard
/ H : 52px


Dense
/ H : 44px


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
Separate
/ Alternate /Divider /Divider + Alternate

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.
