IDEATE & PLAN
DESIGN & DEVELOP
Corporate account services
You will find visual and developer guidelines for building a table with links to tutorials and live code samples.
How to create a table
Watch this tutorial below to learn how to create a table.
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"
The basic elements of a table consist of :
pay attention to the height of the header and the cell. It is different;
for multi selection
color for rows
active, focused and hovered
to visually separate rows
Use an alternate color when displaying large datasets in a dense format. This improves the readability.
Use an active state when a row is selected. When designing in Sketch, use the side panel override options to make changes.
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.
Use a top bar to display table actions such as search, filter, export, enter full view, etc.
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
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.
/ H : 56px
/ H : 48px
/ H : 52px
/ 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.
/ Alternate /Divider /Divider + Alternate
/ Header: Darker
/ Cell: Darker
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.
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.