quickgrid paging

HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor

@@ -3,6 +3,9 @@
 
 @rendermode RenderMode.InteractiveServer
 
+<h1><strong>Base</strong></h1>
+<hr style="border-inline-end-style" />
+
 <div class="grid">
     <QuickGrid Items="@itemsQueryable">
         <PropertyColumn Property="@(c => c.Name)" Sortable="true" />
@@ -13,7 +16,38 @@
     </QuickGrid>
 </div>
 
+<br />
+<h1><strong>Paging</strong></h1>
+<hr style="border-inline-end-style" />
+
+<div class="page-size-chooser">
+    Items per page:
+    <select @bind="pagination.ItemsPerPage">
+        <option>5</option>
+        <option>10</option>
+        <option>20</option>
+        <option>50</option>
+    </select>
+</div>
+
+<div class="grid-25">
+    <QuickGrid Items="@itemsQueryable" Pagination="@pagination" Virtualize="true">
+        <PropertyColumn Property="@(c => c.Name)" Sortable="true" Class="country-name" />
+        <PropertyColumn Property="@(c => c.Gold)" Sortable="true" Align="Align.Right" />
+        <PropertyColumn Property="@(c => c.Silver)" Sortable="true" Align="Align.Right" />
+        <PropertyColumn Property="@(c => c.Bronze)" Sortable="true" Align="Align.Right" />
+    </QuickGrid>
+
+    <Paginator State="@pagination" />
+</div>
+
+<br />
+<h1><strong>Filtering</strong></h1>
+<hr style="border-inline-end-style" />
+
+
 @code {
+    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
     IQueryable<MedalTally>? itemsQueryable;
 
     protected override async Task OnInitializedAsync()

HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor.css

@@ -4,6 +4,12 @@
 	overflow-y: auto;
 }
 
+
+.grid-25 {
+	height: 25rem;
+	overflow-y: auto;
+}
+
 /* Sticky header while scrolling */
 ::deep thead {
 	position: sticky;
@@ -15,3 +21,24 @@
 ::deep tr:nth-child(even) {
 	background: rgba(255,255,255,0.4);
 }
+
+
+::deep th.country-name {
+	width: 14rem;
+}
+
+/* Don't collapse rows even if they are empty */
+::deep tbody tr {
+	height: 1.8rem;
+}
+
+.page-size-chooser {
+	display: flex;
+	align-items: center;
+	margin-bottom: 1rem;
+}
+
+.page-size-chooser select {
+	margin: 0 1rem;
+	padding: 0.25rem 0.5rem;
+}