Users/vnbaaij/multiple paginators

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridGetStarted.razor

@@ -1,10 +1,16 @@
-<FluentDataGrid Items="@people">
+<FluentPaginator State="@pagination" SummaryTemplate="@template" />
+
+<FluentDataGrid Items="@people" Pagination="@pagination">
     <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
     <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
     <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
 </FluentDataGrid>
 
+<FluentPaginator State="@pagination" />
+
 @code {
+    PaginationState pagination = new PaginationState() { ItemsPerPage = 2 };
+
     record Person(int PersonId, string Name, DateOnly BirthDate);
 
     IQueryable<Person> people = new[]
@@ -16,4 +22,6 @@
         new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
         new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
     }.AsQueryable();
+
+    private RenderFragment template = @<span />;
 }

examples/Demo/Shared/Pages/DataGrid/Pages/DataGridGetStartedPage.razor

@@ -5,6 +5,10 @@
 
 <DemoSection Title="Get started" Component="@typeof(DataGridGetStarted)">
      <Description>
-        The example and code below show what you need to add to one of your Blazor page components to render a very simple grid (with sortable columns)
+        The example and code below show what you need to add to one of your Blazor page components to render a very simple grid
+        (with sortable columns).
+        <br/>
+        It also shows how you can add pagination to your grid. In fact there are two paginators used here. One at the top and one at the
+        bottom of the grid. They automatically stay synchronized. The top paginator does not show the total count summary.
      </Description>
  </DemoSection>

examples/Demo/Shared/Pages/Home/Home.razor

@@ -42,10 +42,10 @@
 
         <h2>Latest releases</h2>
         <ul class="news">
+            <li><NewsDate Day="5" Month="Mar" Year="25" /><a href="/WhatsNew#v4.11.6">v4.11.6 released</a></li>
             <li><NewsDate Day="18" Month="Feb" Year="25" /><a href="/WhatsNew#v4.11.5">v4.11.5 released</a></li>
             <li><NewsDate Day="11" Month="Feb" Year="25" /><a href="/WhatsNew#v4.11.4">v4.11.4 released</a></li>
             <li><NewsDate Day="14" Month="Jan" Year="25" /><a href="/WhatsNew#v4.11.3">v4.11.3 released</a></li>
-            <li><NewsDate Day="13" Month="Jan" Year="25" /><a href="/WhatsNew#v4.11.2">v4.11.2 released</a></li>
             <!--<li><NewsDate Day="" Month="" Year="" /><a href=""></a></li>-->
         </ul>
 

src/Core/Components/Pagination/FluentPaginator.razor.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components.Infrastructure;
 
@@ -9,6 +13,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentPaginator : FluentComponentBase, IDisposable
 {
     private readonly EventCallbackSubscriber<PaginationState> _totalItemCountChanged;
+    private readonly EventCallbackSubscriber<PaginationState> _currentPageItemsChanged;
 
     [Parameter]
     public EventCallback<int> CurrentPageIndexChanged { get; set; }
@@ -49,6 +54,7 @@ public FluentPaginator()
     {
         // The "total item count" handler doesn't need to do anything except cause this component to re-render
         _totalItemCountChanged = new(new EventCallback<PaginationState>(this, null));
+        _currentPageItemsChanged = new(new EventCallback<PaginationState>(this, null));
     }
 
     private Task GoFirstAsync() => GoToPageAsync(0);
@@ -70,9 +76,15 @@ private async Task GoToPageAsync(int pageIndex)
 
     /// <inheritdoc />
     protected override void OnParametersSet()
-        => _totalItemCountChanged.SubscribeOrMove(State.TotalItemCountChangedSubscribable);
+    {
+        _totalItemCountChanged.SubscribeOrMove(State.TotalItemCountChangedSubscribable);
+        _currentPageItemsChanged.SubscribeOrMove(State.CurrentPageItemsChanged);
+    }
 
     /// <inheritdoc />
     public void Dispose()
-        => _totalItemCountChanged.Dispose();
+    {
+        _totalItemCountChanged.Dispose();
+        _currentPageItemsChanged.Dispose();
+    }
 }