# Datatable
## Overview
Datatables are made to display information in a grid format with rows and columns. They show data in a way that is easy to scan and let users perform actions to manage their content.
Datatable should be used:
* to display complex data in an easy-to-scan way,
* if users need to sort on multiple columns,
* if users need column titles to make sure the context and content are clear,
* if data needs to be displayed in a controlled way (using pre-formatted cells).
Datatable should not be used:
* To display a collection of items with an elaborate layout (use [Datalist](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/datalist)),
* To highlight part of a data set (use **Data Visualization**).
{% hint style="info" %}
Having trouble deciding between Datalist and Datatable? Head over to the [Displaying data pattern](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/patterns/displaying-data)
{% endhint %}
Datatable has features that let users interact with the content:
* Column headers can sort data,
* Filters let users view different subsets of data,
* Single or bulk actions can be performed,
* Export lets users download the data set in different file formats,
* Data can be added or reordered,
* Pagination lets users navigate through the entire data set.
## Guidelines
|
1. Title: 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. Columns: title of the columns and sorting behavior.
4. Rows: show different data types with actions to edit and manage them.
5. Scrollbar: lets users scroll in the content both horizontally and vertically,
|
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
### Toolbar
The datatable toolbar can have different elements:
* Search (standard or on a specific column)
* Filters
* Number of items or results
* Column management
* Density management
* Export feature
* [Action button](https://zeroheight.com/065715af6/p/36c855-buttons/b/218857)
### Selection
Datatable allows users to select rows through bulk selection, on which they can take action. A bulk bar appears with one or several actions.
You can select all items from the data set, all items on the page, or deselect all items. Once you select all items from a table, you cannot unselect one item.
If you want to select a series of filtered elements, filter the data first, then select in bulk.
### Rows
#### States :
* **Default:** row is clear, and actions are available. This is the standard row behavior.
* **Disabled:** row is greyed out, and actions are unavailable. For example, you may use it when a product is rejected, and no action can be taken to change its status.
* **Highlighted:** row has a ribbon to highlight it
* **Dimmed:** row is greyed out, but actions are still available. For example, you may use it when a product has been excluded from a selection, but you can reactivate it later.
#### Types:
* **Selection :** rows are selectable and selection is managed with the bulk.
* **Reorder:** rows can be reordered.
#### Sizes:
Rows are available in three sizes: *compact*, *default* (used by default), and *comfortable*. Users can change size with the density button in the filter bar.
### Cells
| **Content type** | **Cell type** | **Expand?** | **Subtext?** | **Tooltip?** | **Alignment** | **More info** |
| ---------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------------ | ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Amount (price) | MonetaryCellContent | Yes | Yes | Yes | Right |
Not possible to combine expandable + tooltip props
Currency is mandatory (ISO 4217 code)
|
| Date | DateCellContent | Yes | Yes | Yes | Right |
Not possible to combine expandable + tooltip props
