Blazorise grid :thumbs_up:

CetteAppliVaMarcher/CetteAppliVaMarcher/CetteAppliVaMarcher.csproj

@@ -6,4 +6,10 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazorise.Bootstrap" Version="1.1.2" />
+    <PackageReference Include="Blazorise.DataGrid" Version="1.1.2" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.2" />
+  </ItemGroup>
+
 </Project>

CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/List.razor

@@ -1,34 +1,25 @@
-@page "/list"
+@using CetteAppliVaMarcher.Models
+@page "/list"
 
 <h3>List</h3>
 
-@if (items != null)
-{
-    <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>
-}
+<DataGrid TItem="Item"
+          Data="@items"
+          PageSize="int.MaxValue"
+          Responsive>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
+        <DisplayTemplate>
+            @(string.Join(", ", ((Item)context).EnchantCategories))
+        </DisplayTemplate>
+    </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
+        <DisplayTemplate>
+            @(string.Join(", ", ((Item)context).RepairWith))
+        </DisplayTemplate>
+    </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
+</DataGrid>

CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/_Layout.cshtml

@@ -28,5 +28,10 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+
+    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
+
 </body>
 </html>

CetteAppliVaMarcher/CetteAppliVaMarcher/Program.cs

@@ -1,3 +1,6 @@
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
 using CetteAppliVaMarcher.Data;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -9,6 +12,11 @@ builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
 builder.Services.AddHttpClient();
 
+builder.Services
+   .AddBlazorise()
+   .AddBootstrapProviders()
+   .AddFontAwesomeIcons();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

CetteAppliVaMarcher/CetteAppliVaMarcher/_Imports.razor

@@ -8,3 +8,4 @@
 @using Microsoft.JSInterop
 @using CetteAppliVaMarcher
 @using CetteAppliVaMarcher.Shared
+@using Blazorise.DataGrid