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 tables

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.

Usage
Data Table 2

Use a data table to display information in an organized fashion. It makes reading the information easier by breaking it down and treating it identically. The structure of the HTML table allows displaying items as rows, and to separate data into columns. Each column has a caption. It is also possible to add other elements to the table in order to improve the options for processing the data, to optimize the display or to add functionalities.

 

Sorting

You may sort by clicking on the caption of the column. If the data is numerical, the default the sorting order is 0 to XXX; if the data is alphabetical, the default sorting order will be A to Z. It could be reversed with another click. A small chevron will appear on the caption of the sorted column. Being able to sort data in a table improves the element’s usability.

 

Pagination

In cases where the volume of data is too large for the display area, a limited number of data may be defined per page. In these cases, the table will be split across many pages and users will navigate using a pagination element (see Pagination for more information).

 

Row Selection

Items in a table may be rendered selectable. Multi-selection may be authorized in the context of an action on a group of items, for example. To do this, each item in the table must have a checkbox at the beginning of the row. An item may be unselected by clicking on it one more time.

 

Actions

Actions may be applied to the row of a table or a group of rows. Grouped actions are typically located at the top of the table. For specific actions on an item, use inline actions, which are represented by an icon at the end of a row (a trash can to delete the row, for example). If the possible actions are too numerous, a generic action icon can propose all of the available actions in a menu expand.

 

Filtering

A filter panel may be used at the top of the page or laterally to filter the results of a table when the latter are too lengthy (see Panel Filters for more information).

 

Best Practices

  • The table must always have a caption that clearly indicates the content displayed.
  • If necessary, a short description may be added under the table’s caption.
  • The column captions must be clear and concise. Try the shortest and clearest label.
  • The information must be rewritten in the most relevant format (avoid writing a date out in letters, for example)
  • Follow the accepted standards for displaying numbers (decimals, display in K€, etc.)
  • When the content is too long to be shown, it may be shortened using “…” marks. Always allow all of a cell’s contents to be shown via a mouseover, for example, with a tooltip.
  • Columns must always be placed in order of importance.
  • Cell content must always be left-aligned, except when a right alignment improves the understanding of the data (for example, numerical data).

 

Placement

Tables are usually inserted into a card.

 

Variation

Data table can be included on cards. Card table groups several components, for example, a data table with a pagination and a title.

Visual

Appearance

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

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

Data Table 3
Data Table 1

Behavior

The table fills the entire width of the card. However, in situations with a low number of values, it is possible to modify the table width to fit the content in order to avoid reading errors caused by too much empty space.

A state exists for differentiating the selected rows.

Data Table 4
Back to top