property column, template column

HelloBlazorServer/HelloBlazorServer/Components/Pages/QGGetStarted.razor

@@ -1,23 +1,79 @@
 @page "/qggetStarted"
 @rendermode RenderMode.InteractiveServer
 
-<QuickGrid Items="@people">
-    <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" />
-</QuickGrid>
+<div>
+    <QuickGrid Items="@people">
+        <TemplateColumn Title="Person" SortBy="@sortByName">
+            <div class="flex items-center">
+                <img class="w-4 h-3 mr-2" src="flags/@(context.FlagCode).svg" />
+                <nobr>
+                    <strong>@context.LastName</strong>, @context.FirstName
+                </nobr>
+            </div>
+        </TemplateColumn>
+        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
+        <PropertyColumn Property="@(p => p.FirstName)" Sortable="true" />
+        <PropertyColumn Property="@(p => p.LastName)" Sortable="true" />
+        <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+        <PropertyColumn Title="Age in years" Property="@(c => ComputeAge(c.BirthDate))" Sortable="true" Align="Align.Right" />
+        <TemplateColumn Title="Action">
+            <button @onclick="@(() => Hire(context))">Hire</button>
+            <button @onclick="@(() => Fire(context))">Fire</button>
+        </TemplateColumn>
+    </QuickGrid>
+</div>
+
+<p><strong>@message</strong></p>
 
 @code {
-    record Person(int PersonId, string Name, DateOnly BirthDate);
+    string message = string.Empty;
+
+    record Person(int PersonId, string Name, DateOnly BirthDate, string FlagCode)
+    {
+        public string FirstName
+        {
+            get
+            {
+                string[] tmp = Name.Split(" ");
+                if (tmp == null || tmp.Length != 2)
+                    return "";
+
+                return tmp[0];
+            }
+        }
+
+        public string LastName
+        {
+            get
+            {
+                string[] tmp = Name.Split(" ");
+                if (tmp == null || tmp.Length != 2)
+                    return "";
+
+                return tmp[1];
+            }
+        }
+    }
 
     IQueryable<Person> people = new[]
     {
-        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
-        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
-        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
-        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
-        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
-        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16), "flag1"),
+        new Person(10944, "António Langa", new DateOnly(1991, 12, 1), "flag2"),
+        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10), "flag3"),
+        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27), "flag4"),
+        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3), "flag5"),
+        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9), "flag6"),
     }.AsQueryable();
 
+    int ComputeAge(DateOnly birthDate)
+    {
+        return DateTime.Now.Year - birthDate.Year - (birthDate.DayOfYear < DateTime.Now.DayOfYear ? 0 : 1);
+    }
+
+    GridSort<Person> sortByName = GridSort<Person>
+        .ByAscending(p => p.LastName)
+        .ThenAscending(p => p.FirstName);
+
+    void Hire(Person p) => message = $"You want to hire {p.FirstName} {p.LastName}";
+    void Fire(Person p) => message = $"You want to fire {p.FirstName} {p.LastName}";
 }

HelloBlazorServer/HelloBlazorServer/Components/Pages/QGGetStarted.razor.css

@@ -0,0 +1,25 @@
+/* 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/HelloBlazorServer.csproj

@@ -23,4 +23,17 @@
     <PackageReference Include="Radzen.Blazor" Version="4.32.8" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\flags\" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="wwwroot\flags\flag1.svg" />
+    <None Include="wwwroot\flags\flag2.svg" />
+    <None Include="wwwroot\flags\flag3.svg" />
+    <None Include="wwwroot\flags\flag4.svg" />
+    <None Include="wwwroot\flags\flag5.svg" />
+    <None Include="wwwroot\flags\flag6.svg" />
+  </ItemGroup>
+
 </Project>

HelloBlazorServer/HelloBlazorServer/wwwroot/flags/flag1.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#324095;}
+	.st1{fill:#F4F4F4;}
+	.st2{fill:#D81E34;}
+</style><g id="XMLID_1_"><rect class="st0" height="298.7" id="XMLID_4_" width="170.7" x="0" y="106.7"/><rect class="st1" height="298.7" id="XMLID_3_" width="170.7" x="170.7" y="106.7"/><rect class="st2" height="298.7" id="XMLID_2_" width="170.7" x="341.3" y="106.7"/></g></svg>

HelloBlazorServer/HelloBlazorServer/wwwroot/flags/flag3.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#2C2A7C;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#E91E26;}
+</style><g id="XMLID_1_"><rect class="st0" height="298.7" id="XMLID_16_" width="512" y="106.7"/><polygon class="st1" id="XMLID_15_" points="134.7,289.6 142.5,313.9 166.3,304.9 152.2,326.1 174.1,339 148.7,341.3 152.2,366.5    134.7,348 117.2,366.5 120.7,341.3 95.3,339 117.2,326.1 103.1,304.9 126.9,313.9  "/><polygon class="st1" id="XMLID_14_" points="404.1,333.3 407.8,344.8 419.1,340.5 412.4,350.6 422.9,356.8 410.8,357.8    412.4,369.8 404.1,361 395.7,369.8 397.4,357.8 385.3,356.8 395.8,350.6 389,340.5 400.4,344.8  "/><polygon class="st1" id="XMLID_13_" points="336.7,226.6 340.5,238.2 351.8,233.9 345.1,244 355.5,250.1 343.4,251.2 345.1,263.2    336.7,254.4 328.4,263.2 330.1,251.2 318,250.1 328.4,244 321.7,233.9 333,238.2  "/><polygon class="st1" id="XMLID_12_" points="404.1,153.7 407.8,165.2 419.1,160.9 412.4,171 422.9,177.2 410.8,178.3 412.4,190.3    404.1,181.5 395.7,190.3 397.4,178.3 385.3,177.2 395.8,171 389,160.9 400.4,165.2  "/><polygon class="st1" id="XMLID_11_" points="464,208.7 467.7,220.2 479,215.9 472.3,226 482.7,232.2 470.6,233.3 472.3,245.3    464,236.5 455.6,245.3 457.3,233.3 445.2,232.2 455.6,226 448.9,215.9 460.2,220.2  "/><polygon class="st1" id="XMLID_10_" points="431,262.7 434,269.9 441.7,270.5 435.8,275.5 437.6,283 431,278.9 424.4,283    426.3,275.5 420.4,270.5 428.1,269.9  "/><polygon class="st1" id="XMLID_9_" points="112.2,106.7 112.2,151.6 0,151.6 0,196.5 112.2,196.5 112.2,241.4 157.1,241.4    157.1,196.5 269.4,196.5 269.4,151.6 157.1,151.6 157.1,106.7  "/><polygon class="st1" id="XMLID_8_" points="0,106.7 0,121.7 239.3,241.4 269.4,241.4 269.4,226.3 30.1,106.7  "/><polygon class="st1" id="XMLID_7_" points="239.3,106.7 0,226.3 0,241.4 30.1,241.4 269.4,121.7 269.4,106.7  "/><polygon class="st2" id="XMLID_6_" points="121.2,106.7 121.2,160.5 0,160.5 0,187.5 121.2,187.5 121.2,241.4 148.2,241.4    148.2,187.5 269.4,187.5 269.4,160.5 148.2,160.5 148.2,106.7  "/><path class="st2" d="M0,106.7v10l69.7,34.8h20.1L0,106.7z M249.3,106.7l-89.8,44.9h20.1l89.8-44.9H249.3z"/><path class="st2" d="M89.8,196.5L0,241.4h20.1l89.8-44.9H89.8z M179.6,196.5l89.8,44.9v-10l-69.7-34.9H179.6z"/></g></svg>

HelloBlazorServer/HelloBlazorServer/wwwroot/flags/flag4.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#D81E34;}
+	.st1{fill:#FFFFFF;}
+</style><g><rect class="st0" height="149.4" width="512" y="106.7"/><rect class="st1" height="149.4" width="512" y="256"/></g></svg>

HelloBlazorServer/HelloBlazorServer/wwwroot/flags/flag5.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#58B44D;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#EA0042;}
+	.st3{fill:#CFB428;}
+</style><g><rect class="st0" height="85.3" width="512" y="320.1"/><rect class="st1" height="128.1" width="512" y="191.9"/><rect class="st2" height="85.3" width="512" y="106.7"/><path class="st3" d="M255.6,286.3c2.5,3,11.5,6.1,19.2,2.2c1.2,3.6,10.8,9.5,19.5,3.2c-9.4-1.3-14.5-4.4-19.7-11.4   c-5.2,4.2-13.7,0.4-15.6-1.6l0.1-24.2l12.4-12.2c0-2.6-8-10.1-15.9-10.1c-8,0-15.9,7.4-15.9,10.1l12.4,12.2l0.1,24.2   c-1.9,2-10.4,5.7-15.6,1.6c-5.2,7-10.3,10.1-19.7,11.4c8.6,6.3,18.3,0.4,19.5-3.2C244.1,292.5,253.1,289.3,255.6,286.3L255.6,286.3   z M255.6,250.4c-3.1-5.3-9.4-7.3-9.4-7.3s3.2-5.2,9.4-5.2c6.2,0,9.4,5.2,9.4,5.2S258.7,245.1,255.6,250.4"/><path class="st3" d="M255.6,298.9c-11.4,0-18.6,4-22.3,8.2l-3.2-3.4c2.9-3.5,6.8-4.8,7.7-9.2c1-3.1-1.2-5.5-1.2-5.5   s3.2,4.4,11.2,4.4c4.9,0,7.9-5.4,7.9-5.4 M255.6,287.9c0,0,3,5.4,7.9,5.4c8,0,11.2-4.4,11.2-4.4s-2.2,2.4-1.2,5.5   c1,4.4,4.9,5.7,7.7,9.2L278,307c-3.8-4.2-11-8.2-22.3-8.2"/><polygon class="st3" points="310.4,259.3 312.6,266 319.6,266 313.9,270.1 316.1,276.7 310.4,272.6 304.8,276.7 307,270.1    301.3,266 308.3,266  "/><polygon class="st3" points="303.1,232.1 305.3,238.7 312.3,238.7 306.6,242.8 308.8,249.5 303.1,245.4 297.5,249.5 299.7,242.8    294,238.7 301,238.7  "/><polygon class="st3" points="283.2,212.2 285.4,218.8 292.4,218.8 286.7,222.9 288.9,229.6 283.2,225.4 277.6,229.6 279.7,222.9    274.1,218.8 281.1,218.8  "/><polygon class="st3" points="256,204.9 258.2,211.5 265.1,211.5 259.5,215.6 261.6,222.3 256,218.2 250.4,222.3 252.5,215.6    246.9,211.5 253.8,211.5  "/><polygon class="st3" points="228.8,212.2 230.9,218.8 237.9,218.8 232.3,222.9 234.4,229.6 228.8,225.4 223.1,229.6 225.3,222.9    219.6,218.8 226.6,218.8  "/><polygon class="st3" points="208.9,232.1 211,238.7 218,238.7 212.3,242.8 214.5,249.5 208.9,245.4 203.2,249.5 205.4,242.8    199.7,238.7 206.7,238.7  "/><polygon class="st3" points="201.6,259.3 203.7,266 210.7,266 205,270.1 207.2,276.7 201.6,272.6 195.9,276.7 198.1,270.1    192.4,266 199.4,266  "/></g></svg>

HelloBlazorServer/HelloBlazorServer/wwwroot/flags/flag6.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#AD1F23;}
+</style><g><rect class="st0" height="298.7" width="512" y="106.7"/><path class="st1" d="M256,166.4c49.5,0,89.6,40.1,89.6,89.6c0,49.5-40.1,89.6-89.6,89.6c-49.5,0-89.6-40.1-89.6-89.6   C166.4,206.5,206.5,166.4,256,166.4"/></g></svg>