Data list

Skip to page content

BETA

Introduction

An example of the data list component.

Interactive example

Order details

Drink

Espresso

Order name

Michael

Price

£2.80

Interaction behaviour

Use the interaction area in a data list row to provide an action to that row's data. For example, providing an edit link could display an edit screen so that the value can be changed.

To include interactions that affect the whole data list, design a pattern using buttons with clear labels.

A data list titled ‘Personal details’ with six rows. The first five include an ‘edit’ link button, while the sixth includes a download icon button. At the end of the data table there are two buttons, one labelled ‘submit’, and the second labelled ‘edit’.

Assign interactions to individual rows within the interaction area, or the full data list by using buttons at the end of the table.

Content

Cells display the following types of data in a specific format:

Text
Numbers
Date
Telephone

A data list titled ‘details’ with four rows. The first row has a text entry in a text format, the second has a number in a number format, the third has a date in the correct date format, and the fourth has a telephone in the correct telephone format.

Make sure the data in the cell displays in its correct format.

A data list titled ‘details’ with four rows. All four rows are displayed in normal text formatting even though they display a date, number and telephone.

Don’t pass non-text data in a text format.

Sizing

When multiple data lists are present on a page, make sure to size them all equally.

An image of two data lists. The top component, labelled ‘personal details’ is the same width as the bottom one, labelled ‘order details’.

Set the width of all data lists on a page to the same size.

An image of two data lists. The top component, labelled ‘personal details’ is wider than the bottom one, labelled ‘order details’.

Don’t set different widths for different data lists.

Layout and placement

Always include a section header, even when using a single row.

An image of a data list titled ‘Payment details’ with three rows.

Make sure that a data list always has a section header.

An image of a data list with three rows, but no title.

Don’t omit section headers from data lists.

Last reviewed 3 February 2023 .