Datatable
Datatables are made to display information in a consistent way made to compare data easily.
Overview
Datatables are made to display information in a grid format with rows and columns. They show data in a way that is easy to scan and let users perform actions to manage 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 Datalist),
To highlight part of a data set (use Data Visualization).
Having trouble deciding between Datalist and Datatable? Head over to the Displaying data pattern
Datatable has features that let users interact with the content:
Column headers can sort data,
Filters let users view different subsets of data,
Single or bulk actions can be performed,
Export lets users download the data set in different file formats,
Data can be added or reordered,
Pagination lets users navigate through the entire data set.
Guidelines
1. Title: clearly states the content of the datatable. 2. Toolbar: has interactive elements such as a search bar and filters. Also has options like letting users manage visual display and a call to action to add content to the data set. 3. Columns: title of the columns and sorting behavior. 4. Rows: show different data types with actions to edit and manage them. 5. Scrollbar: lets users scroll in the content both horizontally and vertically, 6. Footer and pagination: navigating the entire data set. |
Toolbar
The datatable toolbar can have different elements:
Search (standard or on a specific column)
Filters
Number of items or results
Column management
Density management
Export feature
Selection
Datatable allows users to select rows through bulk selection, on which they can take action. A bulk bar appears with one or several actions.
You can select all items from the data set, all items on the page, or deselect all items. Once you select all items from a table, you cannot unselect one item.
If you want to select a series of filtered elements, filter the data first, then select in bulk.
Rows
States :
Default: row is clear, and actions are available. This is the standard row behavior.
Disabled: row is greyed out, and actions are unavailable. For example, you may use it when a product is rejected, and no action can be taken to change its status.
Highlighted: row has a ribbon to highlight it
Dimmed: row is greyed out, but actions are still available. For example, you may use it when a product has been excluded from a selection, but you can reactivate it later.
Types:
Selection : rows are selectable and selection is managed with the bulk.
Reorder: rows can be reordered.
Sizes:
Rows are available in three sizes: compact, default (used by default), and comfortable. Users can change size with the density button in the filter bar.
Cells
Content type | Cell type | Expand? | Subtext? | Tooltip? | Alignment | More info |
Amount (price) | MonetaryCellContent | Yes | Yes | Yes | Right |
|
Date | DateCellContent | Yes | Yes | Yes | Right |
|
Link |
| No | Yes | No | Left |
|
Media |
| No | Yes | No |
|
|
Number | NumericCellContent | Yes | Yes | Yes | Right |
|
Paragraph | No | No | No | Left |
| |
Yes | Yes | |||||
Status | StatusCellContent | No | No | Yes | Left |
|
Text | TextCellContent | Yes | Yes | Yes | Left |
|
Expandable: After clicking the chevron, extra content is displayed in a popover cell. Content can be structured and with a button.
If you need the line clickable, use a Href cell for accessibility.
Columns
Columns can be sorted.
Column width is defined by the largest content (cell and header) within a limit of 500 px. The width is overridable. Otherwise, the content is cut with an ellipsis.
Scrolling
Horizontal
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.
Fixed header
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.
Loading
Datatable with skeleton
Skeleton loading is fully automated for Datatable. Learn more about Loading patterns
Footer and pagination
We recommend 50, 100, and 200 as pagination thresholds.
When Datatable has a lot of content to display (for example, more than 1,234 results), Roma will display a globalized number. Define the threshold that is relevant to your need, usually +1,000.
Empty state
💡 Empty state behavior is automatically handled by Roma. No results empty state behavior (with microcopy) is automatically handled by Roma.
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.
The empty state action is the same as the toolbar's, but you may override it. Learn more about writing empty states
Last updated
