Datalist
Datalists display objects of the same type in a lean and clear way.
Overview
Datalists are designed to list objects of similar types without the hassle of a datatable.
Datalist should be used:
To display a collection of similar items (order lines, marketplaces, stores...)
Datalist should not be used:
To display complex data (use Datatable)
If users need to search and filter on multiple columns (use Datatable)
To highlight part of a data set (use Data Visualization)
If you need users to export data (use Datatable)
Datalist has features that let users interact with the content:
Rows have a fully customizable layout, but each row within the datalist must have the same layout
Layout in line; each element can have its own height
Has its dedicated toolbar and bulk selection features
Lines have an action menu and can be expandable or removable
Density and column width are managed automatically, with no horizontal scroll
Load more CTA and no automatic pagination
Responsive management is done inside the row, not at the datalist level.
Guidelines
Toolbar
The datalist toolbar can have different elements:
Search (standard or on a specific column)
Filters
Number of items or results
Sorting (via Filter button)
Action button
Rows
There are 4 different row types:
Expandable: when clicked, the row expands to display extra information
Removable: when the close button is clicked, the row disappears
With action menu: when the action is clicked, a drop-down menu appears
Checkable: when the checkbox is clicked, the row is selected
Loading
Skeleton loading is fully automated for Datalist. Learn more about Loading patterns
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.
Last updated
