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

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

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

<figure><img src="/files/J5j9dO1u3gyIjGRYZbW8" 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="/files/CQYqJj3DmsqujHoeRVAk" 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="/files/T3ZLYpD2MwbxeqSP26nW" 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="/files/GVeSuW3aZpWzfG5UaMlb" alt=""><figcaption></figcaption></figure>

Skeleton loading is fully automated for `Datalist.` [Learn more about Loading patterns](/design/patterns/loading.md)<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](/design/components/feedback/empty-state.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design.mirakl.com/design/components/datalist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.