Components

DataTable

scss:Readyfigma:Ready

The DataTable is a complex and multi-usage component. It provides a structure to display many items and edit them easily through some features.

Structure

The header section allows users to edit, filter, set up or make actions.

Edition

Allow the user to interact with selected items.

FeatureUsagePreview
Edit selectionOnly available with selected rows
DownloadDownload table or selected rows
Number of selected rowsDisplay the number of selected rows

Filter

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

Option

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

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

Action

FeaturePreview
Validation action
Rejected/Negative action

Data content

The Datatable allows to display several types of 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

The DataTable footer is placed at the bottom of the component and contains the elements that allow you to manage the navigation and pagination of the table.

FeatureUsagePreview
Rows's number selectorAllow to choose the number of row to display
Displayed rows indicatorDisplay the page's rows and the total number of rows
PaginationAllow to navigate to the other pages of the datatable

Variations

Sizes

Each cells are available in 3 sizes.

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

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

Never combine different sizes of cells inside the same datatable.
Never use more than one quick filter.