Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Design Guidelines
  • Variant
  • Behaviors & Interactions
  • Loading
  • Empty state

Was this helpful?

  1. Design
  2. Components

Datalist

Datalists display objects of the same type in a lean and clear way.

Last updated 1 year ago

Was this helpful?

Overview

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 )

  • If users need to search and filter on multiple columns (use )

  • To highlight part of a data set (use Data Visualization)

  • If you need users to export data (use )

Having trouble deciding between Datalist and Datatable? Head over to the

Design Guidelines

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.

Provides various tools and options to interact with the data displayed in the table.

The datalist toolbar can have different elements:

  • Search (standard or on a specific column)

  • Filters

  • Number of items or results

  • Sorting (via Filter button)

  • Action button

A row displays information related to a single item.

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

Variant

Datalist exist in Row version and in Grid Version

Behaviors & Interactions

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

When datalists items are loading :

Empty state

Empty state behavior and microcopy are automatically handled.

Skeleton loading is fully automated for Datalist.

Learn more about Loading patterns
Learn more about writing empty states
Datatable
Datatable
Datatable
Displaying data pattern
exemple of a Datalist in grid version