Displaying data

Datalist or datatable, that is the question.

Our products are designed to handle significant volumes of data : whether detailing orders, stores, or users, to name a few examples.

Therefore, when it comes to displaying data on the Mirakl platform, two useful components can assist you: Datalist and Datatable.

Datatable

Datatables are made to display a large volume of information in a grid format with rows and columns.

Tabs in datatable

Tabs main objective is to help users in their variety to perform their jobs to be done within the same dataset. Therefore, when using tabs in datatables, there's no strict rule – flexibility is key : as long as it serve the end users in their experience.

Tabs are not mandatory, and if employed, they can be utilized in two use cases:

1 - Tabs as quick filters

exemple of using tabs as quick filters

Tabs act as quick filters, allowing users to navigate through specific categories or segments of the dataset.

Examples : quick filters for different stages in a workflow (e.g., acceptance statuses in order tables). The default "all" tab provides a comprehensive view, and clicking on other tabs activates corresponding filters (e.g., "in progress" tab shows the filter in the "in progress" toolbar). Statuses are visible in the toolbar because users can add/remove other statuses to this view; therefore, it is important to display all of the statuses.

2 - Tabs as separators

exemple of using tabs as q

Tabs act as separators between two different datatables, but their content is related to the same topic.

In this case, an "all" tab is not needed. Also, "statuses" are not visible because tab titles are free of content, not specifically related to a status or to information displayed in the datatable.

Examples : There are two distinct data tables separated by tabs: one for validated data and one for data currently in process. The second one displays information that requires user action to move into the first.

Datalist

Datalists are designed to list objects of similar types.

They are typically used for displaying information that would fits within 1 to 5 columns in a datatable. Datalist provides a more concise option in scenarios, they are well-suited for situations where a straightforward, list-style presentation of data is desired.

Datatable or datalist?

To decide between the two layouts, first, examine the available properties :

Props

Datatable

Datalist

Has header

Has filters

Horizontal scroll

Responsive management

AtDatatable level

At row level

Pagination

❌ + Load more CTA

Sort

At header level, optional

Sort by CTA, optional

Then, consider the following factors when making your decision:

  • Nature of Data: Structured data with multiple attributes may benefit from a datatable, while simple lists or suggestions may be better suited for a datalist.

  • User Interactions: Consider the interactions users will have with the data. If they need to sort, filter, or interact with complex data relationships, a datatable may be more suitable.

Last updated