ajout de pagination (manque mise en page)

BlazorApp1/Pages/Inventory.razor

@@ -1,6 +1,7 @@
 @page "/inventory"
 @using System.Globalization
 @using BlazorApp1.Components
+@using BlazorApp1.Models
 
 <PageTitle>Inventory</PageTitle>
 
@@ -8,6 +9,15 @@
     <InventoryComponent Items="Items"/>
 </div>
 
+<DataGrid TItem="Item"
+          Data="@Items"
+          ReadData="@OnReadData"
+          TotalItems="@totalItem"
+          PageSize="10"
+          ShowPager
+          Responsive>
+</DataGrid>
+
 <p>
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
 </p>

BlazorApp1/Pages/Inventory.razor.cs

@@ -1,5 +1,6 @@
 using BlazorApp1.Components;
 using BlazorApp1.Models;
+using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 
 namespace BlazorApp1.Pages
@@ -9,6 +10,7 @@ namespace BlazorApp1.Pages
         [Inject]
         public IDataService DataService { get; set; }
 
+        private int totalItem;
         public List<Item> Items { get; set; } = new List<Item>();
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -24,5 +26,18 @@ namespace BlazorApp1.Pages
 
             StateHasChanged();
         }
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                Items = await DataService.List(e.Page, e.PageSize);
+                totalItem = await DataService.Count();
+            }
+        }
     }
 }

BlazorApp1/Pages/_Layout.cshtml

@@ -34,6 +34,6 @@
     <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" /
+    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
 </body>
 </html>