Data entity

Skip to page content

BETA

Component demo

Interactive example

Order details

Order name

Michael

Edit

Drink

Americano

Edit

Milk option

Soya milk

Edit

Price

£3.25

Edit

Payment method

VISA ending 5896

Edit

Download receipt

CoffeeOrder_X46w32.pdf

Web component

React

<ic-data-entityheading="Order details">
<ic-data-rowlabel="Order name"value="Michael">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Drink"value="Americano">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Milk option"value="Soya milk">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Price"value="£3.25">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Payment method">
<ic-typographyvariant="body"slot="value">
      VISA ending 5896
</ic-typography>
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf">
<ic-buttonvariant="icon"aria-label="Download"slot="end-component">
<svgviewBox="0 0 24 24"height="24"width="24">
<path
d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"
fill="currentColor"
/>
</svg>
</ic-button>
</ic-data-row>
</ic-data-entity>

<IcDataEntityheading="Order details">
<IcDataRowlabel="Order name"value="Michael">
<IcLinkhref="#"slot="end-component">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Drink"value="Americano">
<IcLinkhref="#"slot="end-component">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Milk option"value="Soya milk">
<IcLinkhref="#"slot="end-component">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Price"value="£3.25">
<IcLinkhref="#"slot="end-component">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Payment method">
<IcTypographyvariant="body"slot="value">
      VISA ending 5896
</IcTypography>
<IcLinkhref="#"slot="end-component">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf">
<IcButtonvariant="icon"aria-label="Download"slot="end-component">
<SlottedSVGviewBox="0 0 24 24"height="24"width="24">
<path
d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"
fill="currentColor"
/>
</SlottedSVG>
</IcButton>
</IcDataRow>
</IcDataEntity>

Data row details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label in the leftmost cell of the row. type: string
Property size Attribute size	The size of the data row component. type: IcSizesNoLarge - "default" \| "small"	"default"
Property small Attribute small	This prop should not be used anymore. Set prop `size` to "small" instead. Deprecated	false
Property value Attribute value	The value of the middle (right if no end-component supplied) cell of the row. type: string

Property

label

Attribute

label

The label in the leftmost cell of the row.

type: string

Property

size

Attribute

size

The size of the data row component.

type: IcSizesNoLarge - "default" | "small"

Default: "default"

Property

small

Attribute

small

This prop should not be used anymore. Set prop `size` to "small" instead.

Deprecated

Default: false

Property

value

Attribute

value

The value of the middle (right if no end-component supplied) cell of the row.

type: string

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot end-component	Content will be displayed in the rightmost cell.
Slot label	Content will be rendered in the leftmost cell.
Slot value	Content will be rendered to the right of the label.

Data entity details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property heading Attribute heading	The title for the data entity. type: string
Property size Attribute size	The size of the data entity component. type: IcSizesNoLarge - "default" \| "small"	"default"
Property small Attribute small	This prop should not be used anymore. Set prop `size` to "small" instead. Deprecated	false

Property

heading

Attribute

heading

The title for the data entity.

type: string

Property

size

Attribute

size

The size of the data entity component.

type: IcSizesNoLarge - "default" | "small"

Default: "default"

Property

small

Attribute

small

This prop should not be used anymore. Set prop `size` to "small" instead.

Deprecated

Default: false

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Name	Description
Slot heading	Content will be placed at the top of the data entity.

Variants

With status tags

Interactive example

Order details

Order name

Michael

Drink

Americano

In Progress

Milk option

Soya milk

Price

£3.25

Payment method

VISA ending 5896

Not Confirmed

Web component

React

<ic-data-entityheading="Order details">
<ic-data-rowlabel="Order name"value="Michael">
</ic-data-row>
<ic-data-rowlabel="Drink"value="Americano">
<ic-status-tag
status="warning"
label="In Progress"
variant="filled"
slot="end-component"
/>
</ic-data-row>
<ic-data-rowlabel="Milk option"value="Soya milk">
</ic-data-row>
<ic-data-rowlabel="Price"value="£3.25">
</ic-data-row>
<ic-data-rowlabel="Payment method">
<ic-typographyvariant="body"slot="value">
      VISA ending 5896
</ic-typography>
<ic-status-tag
label="Not Confirmed"
variant="filled"
slot="end-component"
/>
</ic-data-row>
</ic-data-entity>

<IcDataEntityheading="Order details">
<IcDataRowlabel="Order name"value="Michael"/>
<IcDataRowlabel="Drink"value="Americano">
<IcStatusTag
status="warning"
label="In Progress"
variant="filled"
slot="end-component"
/>
</IcDataRow>
<IcDataRowlabel="Milk option"value="Soya milk"/>
<IcDataRowlabel="Price"value="£3.25"/>
<IcDataRowlabel="Payment method">
<IcTypographyvariant="body"slot="value">
      VISA ending 5896
</IcTypography>
<IcStatusTag
label="Not Confirmed"
variant="filled"
slot="end-component"
/>
</IcDataRow>
</IcDataEntity>

Size small

Interactive example

Personal details

Name

Michael Johnson

Date of birth

16 October 1995

Telephone

07449 7654873

mjohnson@coffee.gov

Address

383 Coffee Drive
London
SW7 988
United Kingdom

Web component

React

<ic-data-entityheading="Personal details"size="small">
<ic-data-rowlabel="Name"value="Michael Johnson">
<ic-status-tag
status="success"
label="confirmed"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Date of birth"value="16 October 1995">
<ic-status-tag
status="warning"
label="in review"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Telephone"value="07449 7654873">
<ic-status-tag
status="warning"
label="in review"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Email"value="mjohnson@coffee.gov">
<ic-status-tag
status="success"
label="confirmed"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Address">
<ic-typographyvariant="body"slot="value">
      383 Coffee Drive
<br/>
      London
<br/>
      SW7 988
<br/>
      United Kingdom
</ic-typography>
<ic-status-tag
label="not confirmed"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
</ic-data-entity>

<IcDataEntityheading="Personal details"size="small">
<IcDataRowlabel="Name"value="Michael Johnson">
<IcStatusTag
status="success"
label="confirmed"
variant="filled"
slot="end-component"
size="small"
/>
</IcDataRow>
<IcDataRowlabel="Date of birth"value="16 October 1995">
<IcStatusTag
status="warning"
label="in review"
variant="filled"
slot="end-component"
size="small"
/>
</IcDataRow>
<IcDataRowlabel="Telephone"value="07449 7654873">
<IcStatusTag
status="warning"
label="in review"
variant="filled"
slot="end-component"
size="small"
/>
</IcDataRow>
<IcDataRowlabel="Email"value="mjohnson@coffee.gov">
<IcStatusTag
status="success"
label="confirmed"
variant="filled"
slot="end-component"
size="small"
/>
</IcDataRow>
<IcDataRowlabel="Address">
<IcTypographyvariant="body"slot="value">
      383 Coffee Drive
<br/>
      London
<br/>
      SW7 988
<br/>
      United Kingdom
</IcTypography>
<IcStatusTag
label="not confirmed"
variant="filled"
slot="end-component"
size="small"
/>
</IcDataRow>
</IcDataEntity>

Editable example

Interactive example

Order details

Order name

Drink

Milk option

Price

Payment method

Web component

React

<ic-data-entityheading="Order details">
<ic-data-rowlabel="Order name">
<ic-text-field
slot="value"
label="Order name"
value="Michael"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Drink">
<ic-text-field
slot="value"
label="Drink"
value="Americano"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Milk option">
<ic-text-field
slot="value"
label="Milk option"
value="Soya milk"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Price">
<ic-text-field
slot="value"
label="Price"
value="£3.25"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Payment method">
<ic-text-field
slot="value"
label="Payment method"
value="VISA ending 5896"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
</ic-data-entity>
<divclass="btn-container">
<ic-buttonid="confirm-button">
    Confirm
</ic-button>
<ic-buttonid="edit-button"variant="secondary">
    Edit
</ic-button>
</div>

<IcDataEntityheading="Order details">
<IcDataRowlabel="Order name">
<IcTextField
slot="value"
label="Order name"
value="Michael"
readonly
hideLabel
fullWidth
/>
</IcDataRow>
<IcDataRowlabel="Drink"value="Americano">
<IcTextField
slot="value"
label="Drink"
value="Americano"
readonly
hideLabel
fullWidth
/>
</IcDataRow>
<IcDataRowlabel="Milk option"value="Soya milk">
<IcTextField
slot="value"
label="Milk option"
value="Soya milk"
readonly
hideLabel
fullWidth
/>
</IcDataRow>
<IcDataRowlabel="Price"value="£3.25">
<IcTextField
slot="value"
label="Price"
value="£3.25"
readonly
hideLabel
fullWidth
/>
</IcDataRow>
<IcDataRowlabel="Payment method">
<IcTextField
slot="value"
label="Payment method"
value="VISA ending 5896"
readonly
hideLabel
fullWidth
/>
</IcDataRow>
</IcDataEntity>
<divclassName={classes.btnContainer}>
<IcButton
onClick={()=>{
const textFields =document.querySelectorAll('ic-text-field');
      textFields.forEach((textField)=>{
        textField.setAttribute('readonly','');
});
}}
>
    Confirm
</IcButton>
<IcButton
onClick={()=>{
const textFields =document.querySelectorAll('ic-text-field');
      textFields.forEach((textField)=>{
        textField.removeAttribute('readonly');
});
}}
variant="secondary"
>
    Edit
</IcButton>
</div>

Last reviewed 31 May 2024 .