The table component is most suited for data organisation. They allow the user to quickly navigate through a series of rows, filter the content, sort, and reorder, according to their needs.
When combined with other functionalities and components, the table also enables bulk editing or managing, as the user can take actions upon the content or select rows.
Table usage in back office configurations
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Table |
Organise and display structured data |
Within the container, ideally occupying a large amount of the grid |
The user can click, select or take any other configured actions |
Anatomy
Structure
|
1. title |
|
1. row |
|
1. footer |
|
title |
The title should explain briefly the content of the table. Having a title is optional. |
|
table container |
--- |
|
header |
--- |
|
header cell |
The header cell may only contain text. |
|
sorting icon |
Visible when the user can sort the entire column below the respective header cell. This functionality is optional. |
|
actions |
Visible when there are actions available for either the entire table (when present in the header) or for each row (when present in the rows). The available actions can be one or more. When there are more than two actions, the icon shown must be ellipsis_vertical. Having actions in the header or rows is optional. |
|
row |
The row may be clickable if it allows the user to navigate to another view. |
|
ordering icon |
Visible when the user can change the order of the rows. When pressing this icon, the row can be dragged. This functionality is optional. |
|
checkbox |
Visible when the user can select one or more rows. This functionality is optional. |
|
row cell |
The cell is a container for whatever content needs to be displayed, such as image thumbnails, descriptions/headlines, pills, buttons, or selection controls. |
|
footer |
--- |
|
selection summary |
When the user can select one or more rows, the. selection summary should be visible and display the number of items selected. |
|
pagination |
When the table displays an extended amount of items, the pagination element should be used for grouping the items into pages. |
Sizes and Spaces
|
Sizes vary from m to xl. The headers only have the m size. The rows can be displayed in m, l or xl. |
|
The table sizes will also vary from m to xl.
The header has a fixed size of 40px. The heights of the rows vary according to the table size.
No matter the size of the table, there must always be a 1px tall divider stroke between every element inside the table container.
If there is a title, it should be 8px away from the table container. |
|
On the table header, some cells have a fixed width. This is the case of the checkbox and the actions cells, which have a 40px width.
The title cells can either occupy a defined percentage of the width or fill the available space. These cells have an 8px horizontal padding.
When there is a sorting icon within the title cell, it should be 8px far from the title.
When the table rows can be reordered, there should be a 24px spacer on the left of the header.
|
|
On the table row, the ordering, the checkbox and the actions cells have fixed widths. The ordering cell has a 24px width, while the checkbox and the actions have a 40px width.
The content cells can either occupy a defined percentage of the width or fill the available space. These cells have an 8px horizontal padding.
|
|
The footer is placed 16px apart from the table.
The selection summary is always placed on the left and the pagination is always placed on the right - even if only one of them is showing. |
Properties
Properties for the header cell
|
Property |
Value |
Description |
|---|---|---|
|
Type |
checkbox title actions |
Defines the content being displayed |
|
Title alignment |
left centre right |
--- |
|
Sorting |
none ascending descending |
This property is optional |
Properties for the header
|
Property |
Value |
Description |
|---|---|---|
|
Size |
m l |
Defines the height of the header |
|
Checkbox |
true false |
Shows or hides the checkbox |
|
Actions |
true false |
Shows or hides the actions button |
Properties for the row cell
|
Property |
Value |
Description |
|---|---|---|
|
Type |
ordering icon checkbox content actions |
--- |
Properties for the row
|
Property |
Value |
Description |
|---|---|---|
|
Size |
m l |
Defines the height of the row |
|
Reorder |
true false |
Shows or hides the ordering icon |
|
Checkbox |
true false |
Shows or hides the checkbox |
|
Actions |
true false |
Shows or hides the actions button |
Properties for the table
|
Property |
Value |
Description |
|---|---|---|
|
Title |
true false |
Shows or hides the table title |
|
Pagination |
true false |
Shows or hides the pagination |
|
Checkbox |
true false |
Shows or hides the checkbox in all of the rows |
|
Footer |
true false |
Shows or hides the footer |
Behavior
Interaction
Selecting
When the selection is enabled on the table component, the selection summary appears once a selection is made. The header controls the selection of the rows and its control varies according to the number of pages.
Find below the selection interaction within a single-page table.
Selection in a single-page table
When the table has more than one page (and the pagination becomes visible), the header's checkbox can be used to select all of the entries on the current page, and, on the second click, to select all of the entries in the table, no matter the page.
Selection in a multi-page table
Reordering
When configured this way, the user can reorder the items in the table, as shown below.
Reordering rows in tables
Clicking the rows
If desired, the table rows can lead to a new view when clicked, as shown below.
Clickable rows in tables
Sorting the columns
The columns can be sorted if needed. On the first click, the column is sorted in ascending order, from A to Z. On the second click, the direction changes, and the elements as ordered descending. On the third click, the sorting is turned off.
Sorting columns in tables
Actions
When there are available actions in the table, there is a difference between having only one action or more.
If the user can only take one action, it should be represented by a single icon on the very right of the row, as shown below.
Single action on each row
When there is more than one available action, they should be inside a dropdown menu that appears after clicking the button with the vertical ellipsis.
Multiple actions in tables
Text overflow
When the cell is not wide enough to display the entire text, the user should be able to view the text in a tooltip.
Text overflow in tables
Responsiveness
Given that tables can accommodate a large amount of data, it is especially important to make sure this component adapts to each device and breakpoint. This way, every user will have a similar experience, accessing the same information, regardless of their context.
When reaching the xsmall breakpoint (considered for mobile devices), the footer should be reorganised, as shown below.
Mobile adaptation of the table
When the table has a large set of columns, it is advisable to allow for horizontal scrolling (at least on tablet and mobile devices).
Horizontal scroll on large tables in small devices
Min-width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Table |
12 col |
12 col |
12 col |
12 col |
12 col |
The table above lists the suggested layout when using the React Grid System (or the grid system of your choice).
Guidelines
|
|
|
|