Table
Displays data in a tabular format
<dui-table>
<dui-table-caption>Total Active Value includes Confirmed and Pending bookings only.</dui-table-caption>
<dui-table-header>
<dui-table-row>
<dui-table-head class="w-[100px]">Booking #</dui-table-head>
<dui-table-head>Status</dui-table-head>
<dui-table-head>Destination</dui-table-head>
<dui-table-head class="text-right">Amount</dui-table-head>
</dui-table-row>
</dui-table-header>
<dui-table-body>
@foreach (var booking in StaticData.Bookings)
{
<dui-table-row>
<dui-table-cell class="font-medium">@booking.Id</dui-table-cell>
<dui-table-cell>
<dui-badge variant="@GetBadgeVariant(booking.Status)">
@booking.Status.ToString()
</dui-badge>
</dui-table-cell>
<dui-table-cell>@booking.Destination</dui-table-cell>
<dui-table-cell class="text-right">
@booking.Amount.ToString("N")
</dui-table-cell>
</dui-table-row>
}
</dui-table-body>
<dui-table-footer>
<dui-table-row>
<dui-table-cell colspan="3">
Total Active Value
</dui-table-cell>
<dui-table-cell class="text-right">
@{
var activeValue = StaticData.Bookings
.Where(b => b.Status != BookingStatus.Cancelled)
.Select(b => b.Amount)
.Sum();
}
@activeValue.ToString("N")
</dui-table-cell>
</dui-table-row>
</dui-table-footer>
</dui-table>
@functions
{
BadgeVariant GetBadgeVariant(BookingStatus status) => status switch
{
BookingStatus.Cancelled => BadgeVariant.Destructive,
BookingStatus.Pending => BadgeVariant.Secondary,
_ => BadgeVariant.Default
};
}Usage
<dui-table>
<dui-table-caption>...</dui-table-caption>
<dui-table-header>
<dui-table-row>
<dui-table-head>...</dui-table-head>
</dui-table-row>
</dui-table-header>
<dui-table-body>
<dui-table-row>
<dui-table-cell>...</dui-table-cell>
</dui-table-row>
</dui-table-body>
<dui-table-footer>
<dui-table-row>
<dui-table-cell>...</dui-table-cell>
</dui-table-row>
</dui-table-footer>
</dui-table>Examples
With border
Wrap the table in a bordered container to give it an outer border.
<div class="w-full rounded-md border">
<dui-table>
<dui-table-header>
<dui-table-row>
<dui-table-head class="w-[100px]">Booking #</dui-table-head>
<dui-table-head>Status</dui-table-head>
<dui-table-head>Destination</dui-table-head>
<dui-table-head class="text-right">Amount</dui-table-head>
</dui-table-row>
</dui-table-header>
<dui-table-body>
@foreach (var booking in StaticData.Bookings)
{
<dui-table-row>
<dui-table-cell class="font-medium">@booking.Id</dui-table-cell>
<dui-table-cell>
<dui-badge variant="@GetBadgeVariant(booking.Status)">
@booking.Status.ToString()
</dui-badge>
</dui-table-cell>
<dui-table-cell>@booking.Destination</dui-table-cell>
<dui-table-cell class="text-right">
@booking.Amount.ToString("N")
</dui-table-cell>
</dui-table-row>
}
</dui-table-body>
<dui-table-footer>
<dui-table-row>
<dui-table-cell colspan="3">
Total Active Value
</dui-table-cell>
<dui-table-cell class="text-right">
@{
var activeValue = StaticData.Bookings
.Where(b => b.Status != BookingStatus.Cancelled)
.Select(b => b.Amount)
.Sum();
}
@activeValue.ToString("N")
</dui-table-cell>
</dui-table-row>
</dui-table-footer>
</dui-table>
</div>
@functions
{
BadgeVariant GetBadgeVariant(BookingStatus status) => status switch
{
BookingStatus.Cancelled => BadgeVariant.Destructive,
BookingStatus.Pending => BadgeVariant.Secondary,
_ => BadgeVariant.Default
};
}With Select
var bookingStatusList = Html.GetEnumSelectList<BookingStatus>();
}
<dui-table>
<dui-table-caption>Total Active Value includes Confirmed and Pending bookings only.</dui-table-caption>
<dui-table-header>
<dui-table-row>
<dui-table-head class="w-[100px]">Booking #</dui-table-head>
<dui-table-head>Status</dui-table-head>
<dui-table-head>Destination</dui-table-head>
<dui-table-head class="text-right">Amount</dui-table-head>
</dui-table-row>
</dui-table-header>
<dui-table-body>
@foreach (var booking in StaticData.Bookings)
{
<dui-table-row>
<dui-table-cell class="font-medium">@booking.Id</dui-table-cell>
<dui-table-cell>
<dui-select size="SelectSize.Small">
@foreach (var selectListItem in bookingStatusList)
{
var selected = BookingStatus.TryParse(selectListItem.Value, out BookingStatus status) && booking.Status == status;
<option value="@selectListItem.Value" selected="@(selected)">@selectListItem.Text</option>
}
</dui-select>
</dui-table-cell>
<dui-table-cell>@booking.Destination</dui-table-cell>
<dui-table-cell class="text-right">
@booking.Amount.ToString("N")
</dui-table-cell>
</dui-table-row>
}
</dui-table-body>
<dui-table-footer>
<dui-table-row>
<dui-table-cell colspan="3">
Total Active Value
</dui-table-cell>
<dui-table-cell class="text-right">
@{
var activeValue = StaticData.Bookings
.Where(b => b.Status != BookingStatus.Cancelled)
.Select(b => b.Amount)
.Sum();
}
@activeValue.ToString("N")
</dui-table-cell>
</dui-table-row>
</dui-table-footer>
</dui-table>API Reference
<dui-table>
The <dui-table> tag helper renders a <table>
element
wrapped in a scrollable <div> container. The class attribute is applied to
the <table> element; other attributes are applied to the container. It has
no attributes of its own.
<dui-table-caption>
The <dui-table-caption> tag helper renders a <caption>
element.
It has no attributes of its own.
<dui-table-header>
The <dui-table-header> tag helper renders a <thead>
element.
It has no attributes of its own.
<dui-table-body>
The <dui-table-body> tag helper renders a <tbody>
element.
It has no attributes of its own.
<dui-table-footer>
The <dui-table-footer> tag helper renders a <tfoot>
element.
It has no attributes of its own.
<dui-table-row>
The <dui-table-row> tag helper renders a <tr>
element.
It has no attributes of its own.
<dui-table-head>
The <dui-table-head> tag helper renders a <th>
element,
and forwards standard <th> attributes such as colspan and scope. It has
no attributes of its own.
<dui-table-cell>
The <dui-table-cell> tag helper renders a <td>
element,
and forwards standard <td> attributes such as colspan. It has no
attributes of its own.