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)

Having trouble deciding between Datalist and Datatable? Head over to the Displaying data pattern

Design Guidelines

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.

Toolbar

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

Rows

A row displays information related to a single item.

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

Rows have a fully customizable layout, but each row within the datalist must have the same layout

Variant

Datalist exist in Row version and in Grid Version

exemple of a Datalist in grid version

Behaviors & Interactions

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.

Loading

When datalists items are loading :

Skeleton loading is fully automated for Datalist. Learn more about Loading patterns

Empty state

Empty state behavior and microcopy are automatically handled.

Learn more about writing empty states