In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Data table

A data table is an element allowing the organization of content in a logical manner so as to read, compare or see the relation between types of data.

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.

DataTable01
Table

  • 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.

Data

  • 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

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.

DataTable02
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.

DataTable03
Pagination
DataTable04

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

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.

Expandable

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.

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