Blazorise pagination

TP Blazor/Pages/List.razor

@@ -23,5 +23,20 @@
                         <td>@item.CreatedDate.ToShortDateString()</td>
                     </tr>
                 }
-            </tbody>
        </table>

    }*@

<DataGrid TItem="Item" Data="@items" PageSize="int.MaxValue" Responsive>
+            </tbody>
        </table>

    }*@

<DataGrid TItem="Item" Data="@items" ReadData="@OnReadData" TotalItems="@totalItem" ShowPager  PageSize="10" 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>

TP Blazor/Pages/List.razor.cs

@@ -1,4 +1,5 @@
 using System;
+using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 using TP_Blazor.Models;
 
@@ -10,7 +11,8 @@ public partial class List
     {
     }
 
-    private Item[] items;
+    private List<Item> items;
+    private int totalItem;
 
     [Inject]
     public HttpClient Http { get; set; }
@@ -18,9 +20,26 @@ public partial class List
     [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;
+        }
+        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
+        }
+    }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
     }
+
+
 }
 

TP Blazor/Program.cs

@@ -5,6 +5,7 @@ using Blazorise;
 using Blazorise.Icons.FontAwesome;
 using Microsoft.Extensions.DependencyInjection;
 using Blazorise.Bootstrap;
+using Blazored.LocalStorage;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -14,7 +15,8 @@ builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
 builder.Services.AddHttpClient();
 builder.Services.AddBlazorise()
-    .AddBootstrapComponents()
+    .AddBootstrapProviders()
+    .AddBlazoredLocalStorage()
     .AddFontAwesomeIcons();
 
 var app = builder.Build();

TP Blazor/TP Blazor.csproj

@@ -13,11 +13,13 @@
     <None Remove="Models\" />
     <None Remove="Blazorise.DataGrid" />
     <None Remove="Blazorise.Bootstrap" />
+    <None Remove="Blazored.LocalStorage" />
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.5" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.1.5" />
     <PackageReference Include="Blazorise.Bootstrap" Version="1.1.5" />
+    <PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Models\" />