quickgrid sample

HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor

@@ -18,6 +18,13 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="quickgriddata">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> QuickGrid Data
+            </NavLink>
+        </div>
+
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="data">
                 <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Data

HelloBlazorServer/HelloBlazorServer/Components/Pages/Data.razor

@@ -1,4 +1,5 @@
 @page "/data"
+@rendermode InteractiveServer
 
 <h3>Data</h3>
 

HelloBlazorServer/HelloBlazorServer/Components/Pages/QuickGridData.razor

@@ -0,0 +1,62 @@
+@page "/quickgriddata"
+@rendermode InteractiveServer
+
+@inject IDatabase<GangnamguPopulation> DatabaseService
+
+<h3>Data</h3>
+
+
+@if (items == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <div class="grid">
+        <QuickGrid Items="@items" Pagination="@pagination">
+            <TemplateColumn Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn="true" />
+            <PropertyColumn Property="@(c => c.AdministrativeAgency)" Sortable="true" Class="administrative-name">
+                <ColumnOptions>
+                    <div class="search-box">
+                        <input type="search" autofocus @bind="nameFilter" @bind:event="oninput" placeholder="Administrative name..." />
+                    </div>
+                </ColumnOptions>
+            </PropertyColumn>
+            <PropertyColumn Property="@(p => p.TotalPopulation)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.MalePopulation)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.FemalePopulation)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.SexRatio)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.NumberOfHouseholds)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.NumberOfPeoplePerHousehold)" Sortable="true" />
+            <TemplateColumn Title="Actions">
+                <button @onclick="@(() => Update(context))">Update</button>
+                <button @onclick="@(() => Delete(context))">Delete</button>
+            </TemplateColumn>
+
+        </QuickGrid>
+    </div>
+}
+
+<Paginator State="@pagination" />
+
+@code {
+    string message = string.Empty;
+    string nameFilter = string.Empty;
+
+    IQueryable<GangnamguPopulation> items;
+    IQueryable<GangnamguPopulation>? FilteredItems => items?.Where(x => x.AdministrativeAgency.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));
+
+    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
+    GridSort<GangnamguPopulation> rankSort = GridSort<GangnamguPopulation>
+        .ByDescending(x => x.TotalPopulation)
+        .ThenDescending(x => x.SexRatio);
+
+    protected override void OnInitialized()
+    {
+        items = (DatabaseService.Get()).AsQueryable();
+    }
+
+    void Update(GangnamguPopulation p) => message = $"You want to update {p.AdministrativeAgency}";
+
+    void Delete(GangnamguPopulation p) => message = $"You want to delete {p.AdministrativeAgency}";
+}

HelloBlazorServer/HelloBlazorServer/Components/Pages/QuickGridData.razor.css

@@ -0,0 +1,48 @@
+::deep thead .administrative-name {
+	width: 15rem;
+}
+
+::deep tbody .administrative-name {
+	white-space: nowrap;
+	overflow: hidden;
+	max-width: 0;
+	text-overflow: ellipsis;
+}
+
+::deep tr {
+	height: 1.8rem;
+}
+
+	::deep tr:nth-child(even) {
+		background: rgba(255,255,255,0.4);
+	}
+
+::deep .administrative-name .col-options-button {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
+}
+
+/* Stripe effect */
+::deep tbody tr {
+	background-color: rgba(0,0,0,0.04);
+}
+
+	::deep tbody tr:nth-child(even) {
+		background: rgba(255,255,255,0.4);
+	}
+
+/* Button styles*/
+button {
+	background: #4969ee;
+	color: white;
+	padding: 0.2rem 1rem;
+	border-radius: 0.25rem;
+	margin: 0.25rem 0.5rem;
+}
+
+	button:hover {
+		background-color: #6884f9;
+	}
+
+	button:active {
+		background-color: #192e86;
+	}

HelloBlazorServer/HelloBlazorServer/Components/_Imports.razor

@@ -10,3 +10,6 @@
 @using HelloBlazorServer
 @using HelloBlazorServer.Components
 @using Microsoft.AspNetCore.Components.QuickGrid
+@using HelloBlazorServer.Interfaces
+@using HelloBlazorServer.Services
+@using HelloBlazorServer.Models