Data entity

Skip to page content

BETA

Introduction

An example of the data entity component.

Interactive example

Order details

Drink

Espresso

Order name

Michael

Price

£2.80

Interaction behaviour

Use the interaction area in a data entity 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 which affect the whole data entity, design a pattern using buttons with clear labels.

A data entity 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 entity 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 entity 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 entity 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 entities are present on a page, make sure to size them all equally.

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

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

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

Don’t set different widths for different data entities.

Layout and placement

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

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

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

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

Don’t omit section headers from data entities.

Last reviewed 3 February 2023 .