1st part finished

TutoBlazer/Pages/List.razor

@@ -1,36 +1,28 @@
 @page "/list"
+@using Models
 
 <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"
+          ReadData="@OnReadData"
+          TotalItems="@totalItem"
+          PageSize="10"
+          ShowPager
+          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>

TutoBlazer/Pages/List.razor.cs

@@ -1,11 +1,14 @@
-using Microsoft.AspNetCore.Components;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Components;
 using TutoBlazer.Models;
 
 namespace TutoBlazer.Pages
 {
     public partial class List
     {
-        private Item[] items;
+        private List<Item> items;
+
+        private int totalItem;
 
         [Inject]
         public HttpClient Http { get; set; }
@@ -13,9 +16,22 @@ namespace TutoBlazer.Pages
         [Inject]
         public NavigationManager NavigationManager { get; set; }
 
-        protected override async Task OnInitializedAsync()
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
-            items = await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json");
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            // When you use a real API, we use this follow code
+            //var response = await Http.GetJsonAsync<Item[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response = (await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalItem = (await Http.GetFromJsonAsync<List<Item>>($"{NavigationManager.BaseUri}fake-data.json")).Count;
+                items = new List<Item>(response); // an actual data for the current page
+            }
         }
     }
 }