Blazorの新しい実験的コンポーネント「QuickGrid」
ASP.NET Coreの.NET7 Preview 6におけるアップデートのブログの中でBlazorの新しい実験的なコンポーネントとしてQuickGridというデータグリッドコンポーネントの紹介があったので早速試してみた。
.NET7のアップデートブログに書かれているが見てみるとこのコンポーネント自体は.NET6から対応しているようだ。
というわけで、普通に.NET6のBlazor WebAssemblyのプロジェクトに上記をNugetする。
次に、「_Imports.razor」に次の記述を追記する。
@using Microsoft.AspNetCore.Components.QuickGrid
グリッドであるので、FetchData.razorを利用することとする。
どうやら、このQuickGridはIQueryable<>型を受け付ける仕様になっているよう。元々はWeatherForcastの配列をforeachでループさせて表示される形になっていたのでそこが変更点となる。
比較のために元の表示を残して以下のようにした。
@page "/fetchdata" @inject HttpClient Http <PageTitle>Weather forecast</PageTitle> <h1>Weather forecast</h1> <p>This component demonstrates fetching data from the server.</p> @if (forecasts == null) { <p><em>Loading...</em></p> } else { <table class="table"> <thead> <tr> <th>Date</th> <th>Temp. (C)</th> <th>Temp. (F)</th> <th>Summary</th> </tr> </thead> <tbody> @foreach (var forecast in forecasts) { <tr> <td>@forecast.Date.ToShortDateString()</td> <td>@forecast.TemperatureC</td> <td>@forecast.TemperatureF</td> <td>@forecast.Summary</td> </tr> } </tbody> </table> <QuickGrid Items="@item"> <PropertyColumn Property="@(p => p.Date.ToShortDateString())" Sortable="true" /> <PropertyColumn Property="@(p => p.TemperatureC)" Sortable="true" /> <PropertyColumn Property="@(p => p.TemperatureF)" Sortable="true" /> <PropertyColumn Property="@(p => p.Summary)" Sortable="true" /> </QuickGrid> } @code { public WeatherForecast[]? forecasts; IQueryable<WeatherForecast>? item; protected override async Task OnInitializedAsync() { forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json"); if (forecasts != null) { item = forecasts.AsQueryable(); } } public class WeatherForecast { public DateTime Date { get; set; } public int TemperatureC { get; set; } public string? Summary { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); } }
実行結果は以下の通り。
QuickGridの機能としてソートや、ページング、フィルタリングといった機能があります。今までもUIコンポーネントを導入することで類似の機能を使うことはできましたがまだ実験的な機能とはいえ標準的なコンポーネントとしての検討があるということは素晴らしいことと思います。