The DataTable efficiently presents large sets of organised data in rows and columns. Its structured format allows for intuitive browsing and analysis of complex information. With built-in paging, sorting, and filtering features, the DataTable is a powerful tool.


Top bar

The top bar section allows users to edit, filter, set up or do actions.
Each element of the top bar is optional, as is the top bar itself.


Allow users to interact with selected items.

Edit selectionAllow to edit data on selected itemsOnly available when rows are selected
DownloadDownload table or selected rows
Number of selected rowsDisplay the number of selected rowsPlease, read the related documentation for more information
Be careful

Styles, labels and icons are not customisable to maintain consistency.


ToggleQuick filter (max. 1)
Search inputFilter rows with keywords (Please, be explicit for users)
Filter buttonOpen filters layer

Active filter

Active filters are displayed between the top bar and the data content to allow users to remove them easier from Removable tags, along with a reset button to remove them all at once. Please allow for an empty state in case no results match the filters.

An empty state must be defined if there are no results.


Allow users to set up the display of the datatable layout.

SettingsAccess to table edition like edit columns (reorder, show/hide) or change display density (size of the cells)


Actions relate to the data in the table to validate an item or adding a line.

Validation actionPrimary button (solid variation)
Rejected/Negative actionDanger button (bordered variation)
Good to know

Action buttons can be customised, ensuring compliance with good UX practices and the usages defined in the design system. Using a bottom is recommended for more global actions related to a process or a business gesture.

Data content


The Datatable allows displaying of several types of data. Only one type of data must be displayed per column to ensure the optimal readability of all the data.

DataUsageWidth behaviour
TextDisplay the name, short description of an itemFixed or fluid
Multi-line textUse to be more explicit and display complementary information of an itemFixed or fluid
NumberDisplay numeric value. The content is always right justified for better readingFixed or fluid
BadgeDisplay the item statusAdapted to the content
InputAllow to edit the content of an itemFixed or fluid
CheckboxAllow to select an item. Only one column per table, always in first position (on the left)Fixed
OptionsDisplay multiple actions. Only one column per table, always in last position (on the right)Fixed
IconDisplay one specific actionFixed
LinkAllow to access to the dedicated page of an itemFixed or fluid
KPIDisplay a progression indicatorAdapted to the content
ExpandDisplay sub-items or details about an item (Only one column per table, always in first position or after the checkbox column)Fixed


In a table, rows correspond to items, while columns list data types for each object, such as status, description, or numeric values. Selecting a row with a checkbox changes its background colour for improved readability.


Sub-rows provide more details of an item and can't be selected or modified as an object.

Column header

The column header includes:

  • A global checkbox for selecting all rows of the current page,
  • Capitalized column labels to differentiate them from the data,
  • A sorting feature for user assistance.
Good to know

Depending on the context, the column header can be fixed as well.

Mass selection

Once users have selected all the rows on a page, a dedicated banner for mass selection will appear, allowing them to select all rows in the table, including all pages.

Empty state

An empty state should be defined when no results are found, with a user-friendly message that can be customized to the context, ensuring clarity and avoiding technical language.

As the number of rows is variable, the DataTable footer is a mandatory element that allows users to manage the navigation and pagination of the table.

Row number selectorAllow users to choose the number of row to display
Rows indicatorIndicate the number of rows displayed on the page compared to the total number of rows.
PaginationAllow users to navigate to the other pages of the datatable



Cells are available in 3 sizes.

Small2.5mu (40px)
Medium (default)3mu (48px)
Large3.5mu (56px)


The data table's height can be defined in two ways to prevent scroll overlap: using the viewport size or specifying the number of displayed rows.

By the size of the viewport
By the number of rows displayed
Be aware

For the moment, the Datatable component is only available for desktop use.

How to use

Work in progress

We are currently working on the how to use documentation, it will be available soon.

Do's and Dont's

Use capital letters only for the Column header labels, not for data.

Never combine different sizes of cells inside the same datatable.

Never use more than one quick filter.