N
data-display data-list

Data List

Mobile-friendly DataTable variant.

$ ndui add data-list
Component docs

Stacked rows (mobile-friendly)

  • AJ
    Alex Johansson
    alex@@acme.io
    Active
  • MC
    Morgan Chen
    morgan@@acme.io
    Active
  • SP
    Sam Patel
    sam@@acme.io
    Invited
  • RP
    Riley Park
    riley@@acme.io
    Pending
Source 
<DataList Items="@Model.Members" TItem="Member">
    <RowTemplate>
        <Avatar Name="@context.Name" />
        <div>
            <div>@context.Name</div>
            <div>@context.Email</div>
        </div>
        <Badge>@context.Status</Badge>
    </RowTemplate>
</DataList>