Displaying data
Datalist or datatable, that is the question.
Last updated
Datalist or datatable, that is the question.
Last updated
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.
Datatables are made to display a large volume of information in a grid format with rows and columns.
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:
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.
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.
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.
To decide between the two layouts, first, examine the available properties :
Props | Datatable | Datalist |
Has header | ✅ | ❌ |
Has filters | ✅ | ✅ |
Horizontal scroll | ✅ | ❌ |
Responsive management | At | 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.
