BlazorUI Demo

Table primitives

Styled one-to-one HTML table primitives, including mobile key/value rows and truncation disclosure.

Semantic table family
Recent customers
NameStatusDescription
Ada LovelaceActiveA deliberately long value which demonstrates constrained cells and full-value disclosure. A deliberately long value which demonstrates constrained cells and full-value disclosure.
Grace HopperInvitedCompiler pioneer
2 customers
View code 
<BuiTable Responsive>
    <BuiCaption>Recent customers</BuiCaption>
    <BuiThead><BuiTr><BuiTh>Name</BuiTh><BuiTh>Status</BuiTh><BuiTh>Description</BuiTh></BuiTr></BuiThead>
    <BuiTbody>
        <BuiTr><BuiTd Label="Name" Text="Ada Lovelace" /><BuiTd Label="Status"><BuiBadge Color="Colors.Success">Active</BuiBadge></BuiTd><BuiTd Label="Description" Text="A deliberately long value which demonstrates constrained cells and full-value disclosure." Truncate MaxWidth="260" /></BuiTr>
        <BuiTr><BuiTd Label="Name" Text="Grace Hopper" /><BuiTd Label="Status"><BuiBadge>Invited</BuiBadge></BuiTd><BuiTd Label="Description" Text="Compiler pioneer" /></BuiTr>
    </BuiTbody>
    <BuiTfoot><BuiTr><BuiTd Text="2 customers" /><BuiTd /><BuiTd /></BuiTr></BuiTfoot>
</BuiTable>