Data list

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-listheading="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-list>

<IcDataListheading="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>
</IcDataList>

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 - "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
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 - "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

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 list 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 list. type: string
Property size Attribute size	The size of the data list component. type: IcSizesNoLarge - "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

Property

heading

Attribute

heading

The title for the data list.

type: string

Property

size

Attribute

size

The size of the data list component.

type: IcSizesNoLarge - "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

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 list.

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-listheading="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-list>

<IcDataListheading="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>
</IcDataList>

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-listheading="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-list>

<IcDataListheading="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>
</IcDataList>

Editable example

Interactive example

Order details

Order name

Drink

Milk option

Price

Payment method

Web component

React

<ic-data-listheading="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-list>
<divclass="btn-container">
<ic-buttonid="confirm-button">
    Confirm
</ic-button>
<ic-buttonid="edit-button"variant="secondary">
    Edit
</ic-button>
</div>

<IcDataListheading="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>
</IcDataList>
<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>

Theme

Interactive example

Order details

Drink

Americano

Edit

Price

£3.25

Edit

Download receipt

CoffeeOrder_X46w32.pdf

Web component

React

<ic-data-listheading="Order details"theme="dark">
<ic-data-rowlabel="Drink"value="Americano">
<ic-linkhref="#"slot="end-component"theme="dark">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Price"value="£3.25">
<ic-linkhref="#"slot="end-component"theme="dark">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf">
<ic-buttonvariant="icon"aria-label="Download"slot="end-component"appearance="light">
<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-list>

<IcDataListheading="Order details"theme="dark">
<IcDataRowlabel="Drink"value="Americano">
<IcLinkhref="#"slot="end-component"theme="dark">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Price"value="£3.25">
<IcLinkhref="#"slot="end-component"theme="dark">
      Edit
</IcLink>
</IcDataRow>
<IcDataRowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf">
<IcButtonvariant="icon"aria-label="Download"slot="end-component"appearance="light">
<SlottedSVGviewBox="0 0 24 24"height="24"width="24">
<path
d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"
fill="currentColor"
/>
</SlottedSVG>
</IcButton>
</IcDataRow>
</IcDataList>

Last reviewed 31 May 2024 .