You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.4 KiB
51 lines
1.4 KiB
2 years ago
|
---
|
||
|
|
sidebar_position: 5
|
||
|
|
title: HTML table
|
||
|
|
---
|
||
|
|
|
||
|
|
## Use an HTML table
|
||
|
|
|
||
|
|
Now that we have displayed one of the fields of our object, we are going to display all the information.
|
||
|
|
|
||
|
|
Open the `List.razor` file and fill it in as follows:
|
||
|
|
|
||
|
|
```cshtml title="Pages/List.razor"
|
||
|
|
@page "/list"
|
||
|
|
|
||
|
|
<h3>List</h3>
|
||
|
|
|
||
|
|
@if (items != null)
|
||
|
|
{
|
||
|
|
// highlight-start
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Id</th>
|
||
|
|
<th>Display Name</th>
|
||
|
|
<th>Stack Size</th>
|
||
|
|
<th>Maximum Durability</th>
|
||
|
|
<th>Enchant Categories</th>
|
||
|
|
<th>Repair With</th>
|
||
|
|
<th>Created Date</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
@foreach (var item in items)
|
||
|
|
{
|
||
|
|
<tr>
|
||
|
|
<td>@item.Id</td>
|
||
|
|
<td>@item.DisplayName</td>
|
||
|
|
<td>@item.StackSize</td>
|
||
|
|
<td>@item.MaxDurability</td>
|
||
|
|
<td>@(string.Join(", ", item.EnchantCategories))</td>
|
||
|
|
<td>@(string.Join(", ", item.RepairWith))</td>
|
||
|
|
<td>@item.CreatedDate.ToShortDateString()</td>
|
||
|
|
</tr>
|
||
|
|
}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
// highlight-end
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
You have now displayed all of your data, it is simple but lacks functionality, impossible to sort the data or filter it or have pagination.
|