Data Table

A data table enables visualisation, comparaison or analysis of data across columns and rows.

General guidelines

Use data tables when displaying a large number of data, the user can easily scan and navigate through the list using sorting, filtering, or search. It is possible to add different kinds of elements to the table in order to improve data processing, optimize the display or to add functionalities.


Component base

A basic data table is composed of a title, row and columns.


Best practices

  • Always use a title that clearly indicates the content displayed inside the data table.
  • When necessary, a short description may be added under the table’s title.
  • Opt for a one-line title, two lines a maximum.
  • Consider 6-8 columns per table is the maximum recommended, depending on the resolution you are working on.
  • Always arrange columns by order of importance.
  • Actions must always be placed on the right side of the table.
  • Avoid repetitive actions. Use ellipsis icon to hide actions instead.
  • Avoid stretching the tables to full width when there is a low number of values, this causes unnecessary spaces between columns, resulting in data seeming lost or isolated.
  • When the content is too long to be shown, it may be shortened using ellipsis marks. For Desktop resolutions always allow all cell's content to be shown via mouseover inside a tooltip. For mobile and tablet resolutions the ellipsis should be clickable, it expands after the user clicked on it.
  • When the user modifies the column widths, allow horizontal scrolling with the first column fixed but don’t responsively resize columns.
  • On Mobile screens, tables should responsively collapse into a maximum of 2 column list including actions.



Best practices

  • Try for clear, concise and short column headers.
  • Always left align alphabetic columns.
  • Always right align numeric columns.
  • Always bottom align column headers to ensure consistent spacing between headers of varying length and the first row in the table.
  • Always top align cell content to ensure a row of columns with variable-length content have a consistent baseline.
  • Prefer the most relevant format for information displayed in the table (e.g. avoid writing a date out in letters, for example)
  • Never spell out numbers.
  • Never use more than two lines for texts, in this case opt for expandable rows.
  • Follow the accepted standards for displaying numbers (decimals, display in K€, etc.)
  • Never blue text for the data table title, filter titles. Only clickable elements should be blue.




Sorting controls improve data tables usability. They must be represented with an arrow icon located next to the column header’s name. To indicate which column is sorted by default, place a chevron icon for ascending order or arrow-down icon for descending order.

If the data is numerical, the default sorting order is 0 to XXX; if the data is alphabetical, the sorting order will be A to Z. It could be reversed with one click.

Filtering & search

A filter panel can be used above the data table to filter results when the latter are too long. Filtering allows users to easily manipulate the data shown inside the table, reducing the amount of data shown based on their preferences.

A search field allows data to be easily accessed by users. When typing a word into the search, rows displayed are automatically refreshed and shown to the user.


In cases where the volume of data is too large for the display area, a maximum number of rows may be defined per page. In these cases, the table will be split across many pages and users will navigate using the pagination element.

Another method is to use infinite scrolling, which loads progressively the next set of rows when the user scrolls to the end or by adding a Load more button to enable the user doing it manually. Prefer using pagination in cases where the user is searching for specific information due to its flexibility as it allows the user to skip straight to the last few sets if required.

Pagination structure:

  • Total items displayed

  • Select number of rows per page

  • Numbers, Left and Right arrows for navigating pages

  • Input to go to a specific page

Row multi-selection

Rows in a table may be selectable. Multi-selection may be authorized in the context of an advanced table where different kinds of actions may be applied to a group of rows. A checkbox must be placed at the beginning of each row, once the checkbox is selected, the row displays a different background color to clearly indicate that this row has been selected. Once selecting at least one row, a floating action bar appears at the bottom of the table, presenting actions available. The user can cancel or deselect the items at any time.

Always enable to select and unselect all the rows on the top left of the table.


Actions may be applied to the row of a table or a group of rows. Grouped actions must be located at the bottom of the table, inside a floating bar. For specific actions on a row, use icon buttons at the end of the row (right). We recommend to use a generic action icon like the ellipsis or vertical ellipsis, that can show all of the available actions by clicking it, with a tooltip, avoiding like this repetitiveness of actions and keeps visual noise to a minimum.

Customizable columns

Customizable columns allow the user to personalize the data table according to their preferences. It must be used when there are multiple metrics and data sets involved and when the users have different objectives when using the data table.


The expandable rows are very important on data tables with large amounts of data in a small space, it allows the user to evaluate additional information without losing their context. Expandable action icons must be always visible and placed on the right-hand side of the table.

Visual guidelines


Table cells have 4 states: Grey, White , Hover and Selected.

Table cells have 2 sizes: Large and Medium.


Visual style

Tables are composed of alternating white and gray rows to make reading easier.



Table cells have 8 Overrides: Default text, Clicable text, Numeric, Chip and tag, Input, Progress bar, Several actions and Very long text.


Cell checkbox

Cell checkboxes have 6 states: Grey, White, Hover, Selected, Grey focus and White focus.

Cell checkboxes have 2 sizes: Large and Medium.


Column header

Columns header have 8 states: Default, Numeric alignment, Sorting ascendening, Hover, Hover on resizing bar, Non sorting, Focus and Group header.

Column header have 2 sizes: Extra-large and Large.


Visual style

Table headings should be bold. disable values in tables are grayed out.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top