# Datalist

## Overview <a href="#id-605b2c" id="id-605b2c"></a>

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](https://design.mirakl.com/design/components/datatable))
* If users need to search and filter on multiple columns (use [Datatable](https://design.mirakl.com/design/components/datatable))
* To highlight part of a data set (use **Data Visualization**)
* If you need users to export data (use [Datatable](https://design.mirakl.com/design/components/datatable))

{% hint style="info" %}
Having trouble deciding between Datalist and Datatable? \
Head over to the [Displaying data pattern](https://design.mirakl.com/design/patterns/displaying-data)
{% endhint %}

## Design Guidelines <a href="#id-135990" id="id-135990"></a>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FLH5XTF0I9kciv2q0ULxs%2FDatalist.svg?alt=media&#x26;token=8a534330-83a6-4480-a826-4ce2af273dd1" alt=""><figcaption></figcaption></figure>

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.

{% tabs %}
{% tab title="Toolbar" %}
Provides various tools and options to interact with the data displayed in the table.

The datalist toolbar can have different elements:&#x20;

* Search (standard or on a specific column)
* Filters
* Number of items or results
* Sorting (via Filter button)
* Action button
  {% endtab %}

{% tab title="Rows" %}
A row displays information related to a single item.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FYLvPVl7jBryaYFH9mC1z%2FDatatalist%20Row%20type.png?alt=media&#x26;token=6ae1063b-3835-416c-b663-eb9e2efa07ab" alt=""><figcaption></figcaption></figure>

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**
{% endtab %}
{% endtabs %}

### Variant <a href="#id-32a5a3" id="id-32a5a3"></a>

Datalist exist in Row version and in Grid Version

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F9JwuGYBK7UXV1JHU2oku%2FCapture%20d%E2%80%99e%CC%81cran%202024-03-07%20a%CC%80%2011.09.34.png?alt=media&#x26;token=ca420106-57d1-4773-838c-6a2abd5ada69" alt=""><figcaption><p>exemple of a Datalist in grid version</p></figcaption></figure>

### Behaviors & Interactions <a href="#id-32a5a3" id="id-32a5a3"></a>

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 <a href="#id-243931" id="id-243931"></a>

When datalists items are loading :

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FDqsLwgwjoo4AjGLVlhqA%2Fdatalist-loading.gif?alt=media&#x26;token=008c0344-e07e-4ddb-af08-173b7eaa41a9" alt=""><figcaption></figcaption></figure>

Skeleton loading is fully automated for `Datalist.` [Learn more about Loading patterns](https://design.mirakl.com/design/patterns/loading)<br>

### Empty state <a href="#id-54d17b" id="id-54d17b"></a>

Empty state behavior and microcopy are automatically handled.&#x20;

[Learn more about writing empty states](https://design.mirakl.com/design/components/feedback/empty-state)