Datatable
Datatables are designed to present information consistently, facilitating easy data comparison
Last updated
Was this helpful?
Datatables are designed to present information consistently, facilitating easy data comparison
Last updated
Was this helpful?
Datatables are a core component of our products, designed to present information in a structured grid format with rows and columns. This format simplifies data comprehension and helps users in managing their content
Datatable should be used:
to display complex data in an easy-to-scan way,
if users need to sort on multiple columns,
if users need column titles to make sure the context and content are clear,
if data needs to be displayed in a controlled way (using pre-formatted cells).
Datatable should not be used:
To display a collection of items with an elaborate layout (use ),
To highlight part of a data set (use Data Visualization).
If data is not structured or with variable content
1. Title : clearly states the content of the datatable.
2. Toolbar
3. Columns
4. Rows
5. Scrollbar
6. Footer and pagination
The toolbar includes a search bar, filters, and options for managing displays and adding content. Available elements include:
Search (standard or column-specific with a drop-down selector)
Item count (mandatory)
Column management
Density management (mandatory)
Export (only on visible data)
Action button
Refresh (disabled while reordering)
Filters
For 3 or fewer filters, use the Quick Filters layout. For more than 3 filters, use the Filters Drawer, which opens on the right side of the screen.
The datatable allows users to:
Sort by column headers
Filter data subsets
Perform single or bulk actions
Export data in various formats
Add or reorder data
Navigate via pagination
In a datatable, only one item can be designated as the 'default.'
'Default' status is designed with a simple "Default" mark inlined with the Label of the cell.
Cells may contain extensive or highly detailed information that could potentially overwhelm the datatable's presentation. But also, opening a separate detailed page might appear excessive. To strike a balance, we have introduced 'expand' properties for select cells.
Datatables support bulk and individual actions, with varied behavior based on user interactions.
Below are listed all ways we design action, wether its individual or bulk actions :
Individual quick actions for a single row are available to users, these actions are consistently presented at the end of the row. Three options are available :
Actions displayed as icon buttons for common actions such as Download, Delete, View, Copy, etc. (Must be IconButton in Secondary Variant)
Actions displayed as secondary buttons for less common actions that may not be easily understood through icons. (Must be Button in Secondary Variant)
Actions accessible via an action menu for multiple choice of actions.
Datatable enables users to select individual rows or multiple rows for performing actions.
The selection bar allows to quickly select all items in the dataset, all items on the current page, or to deselect all items. However, once all items are selected in a datatable through this option, individual deselection is not possible.
Users can select all elements in a filtered dataset by first applying a filter to the data and then using the 'select all from this page' option.
When the content of a row is longer than the width of the panel, a floating trailing action is displayed. It ensures the user can perform an action on a row without scrolling.
The column header is pinned while scrolling to ensure the readability of the cell content. The horizontal scrollbar is pinned to the bottom of the viewport to ensure it will always be visible and easily reached.
When datatable's items are loading :
Empty state behavior and microcopy are automatically handled.
Content for any other type of empty state has to be defined for each project.
The toolbar (with the options you chose to add) is displayed in disabled mode, and the primary action is disabled. The same action is moved to the empty state.
Expandable cells are recognized with a chevron. Extra content is displayed in a cell. Content can be structured and with a button if needed.
To get more details about a row, the first cell ("TextCellContent") must have either the "view" action (open object) or "external link" action (open in a new window). In these cases, the first action in the should always be "View Details."
Once selected, a bulk action bar will appear, offering a single action (primary button) or more action options (). Actions listed on the bulk bar actions must always remain the same ; they cannot change based on the selection or filters.
Skeleton loading is fully automated for Datatable.
The empty state action is the same as the toolbar's, but you may override it.
