Datalist

The Datalist component allows a simple way to render key-value arranged data.

Attributes

Basic Usage

Username: John Doe
Email: [email protected]
Phone: 123 456 789

Copy to clipboard

<aura:data-list>
    <dt>Username</dt>
    <dd>John Doe</dd>
    <dt>Email</dt>
    <dd>[email protected]</dd>
    <dt>Phone</dt>
    <dd>123 456 789</dd>
</aura:data-list>

Multiple Lines

For multi line data, you can simply add an empty <dt> tag. This will create a new line in the list.

Username: John Doe
Email: [email protected]
Address: 1234 Foo Bar Street
: Fooville
: 12345
Phone: 123 456 789

Copy to clipboard

<aura:data-list class="w-full">
    <dt>Username</dt>
    <dd>John Doe</dd>
    <dt>Email</dt>
    <dd>[email protected]</dd>
    <dt>Address</dt>
    <dd>1234 Foo Bar Street</dd>
    <dt></dt>
    <dd>Fooville</dd>
    <dt></dt>
    <dd>12345</dd>
    <dt>Phone</dt>
    <dd>123 456 789</dd>
</aura:data-list>

Home