Datalist
Datalists display objects of the same type in a lean and clear way.
Last updated
Was this helpful?
Datalists display objects of the same type in a lean and clear way.
Last updated
Was this helpful?
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 )
If users need to search and filter on multiple columns (use )
To highlight part of a data set (use Data Visualization)
If you need users to export data (use )
1. Title (Mandatory) : 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. Rows: show different data types with actions to edit and manage them.
Provides various tools and options to interact with the data displayed in the table.
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
Datalist exist in Row version and in Grid Version
Datalist has features that let users interact with the content:
Layout in line; each element can have its own height depending on its content
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.
When datalists items are loading :
Empty state behavior and microcopy are automatically handled.
Skeleton loading is fully automated for Datalist.
