.NET 8でBlazorのQuickGridを試してみる | MESCIUS.devlog

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はBlazorで利用可能なデータグリッドコンポーネント「QuickGrid」を使用してデータを表示する方法ついてお届けします。

本記事では、Blazorアプリケーション開発向けに提供されているデータグリッドコンポーネント「QuickGrid」を使用してBlazor Serverアプリケーションでデータを表示する方法を確認してみます。

QuickGridとは？

QuickGridは、.NET 7で実験的な機能としてBlazorに追加されたデータグリッド機能を提供するRazorコンポーネントです。

.NET 8 Preview 2からは「The Blazor QuickGrid component is now part of .NET 8!」と記載されており、.NET 8の機能として公式にサポートされる予定です。

また「QuickGrid is built to be a simple and convenient way to display your data, while still providing powerful features like sorting, filtering, paging, and virtualization.」と記載されており、データのソートやフィルタ、ページング、仮想化など基本的なデータグリッドの機能を備えています。

Blazor ServerアプリケーションにQuickGridを実装してみる

では実際にBlazor ServerアプリケーションにQuickGridを追加してみます。今回は .NET 8 Preview2を使用するので、Visual Studio 2022 Previewでアプリケーションを作成します。

Blazor Serverアプリケーションの作成

まず、Visual Studio 2022 Previewを起動してプロジェクトテンプレート「Blazor Server アプリ」を選択し、Blazor Serverアプリケーション「BlazorQuickGridApp1」を作成します。

NuGetパッケージの追加

Visual Studioのソリューションエクスプローラーでプロジェクトを右クリックして［NuGet パッケージの管理］を選択します。「NuGet パッケージマネージャー」からQuickGridのパッケージMicrosoft.AspNetCore.Components.QuickGridをインストールします。

_Imports.razorにMicrosoft.AspNetCore.Components.QuickGridを追加します。

@using Microsoft.AspNetCore.Components.QuickGrid

QuickGridの追加

Pagesフォルダに新規にRazorコンポーネントDataGrid.razorを作成してQuickGridを追加します。QuickGridのItemsに作成したデータソースを設定します。

@page "/datagrid"

<PageTitle>Data Grid</PageTitle>

<h1>Data Grid</h1>

<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>

@code {
    record Person(int PersonId, string Name, DateOnly BirthDate);

    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)),
    }.AsQueryable();
}

NaviMenu.razorのメニュー部分を以下のように更新します。

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="datagrid">
                <span class="oi oi-spreadsheet" aria-hidden="true"></span> Data Grid
            </NavLink>
        </div>
    </nav>
</div>

ビルドして実行してみる

ここまででQuickGridを追加したBlazor Serverアプリケーションを作成できたので、ビルドして実行してみます。以下のようにアプリケーションを実行して/datagridにページを移動し、QuickGridにデータが表示されれば完成です。

上のスクリーンショットのBirthDate列ですが、この列ではFormat="yyyy-MM-dd"と書式を設定しているので、そのフォーマットで生年月日が表示されています。

また、QuickGridの各列ではSortable="true"と設定しているので、列のデータをソートすることができます。

ページングを有効にしてみる

QuickGridのページングを有効にするにはPaginationStateクラスを使用します。このインスタンスをQuickGridのPaginationに設定します。また、ItemsPerPageで1ページに表示するデータ数を設定できます。さらに、ページの状態を表示するコンポーネントとしてPaginatorが用意されています。

@page "/datagrid"

<PageTitle>Data Grid</PageTitle>

<h1>Data Grid</h1>

<QuickGrid 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" />
</QuickGrid>

<Paginator State="@pagination" />

@code {
    PaginationState pagination = new PaginationState { ItemsPerPage = 5 };

    record Person(int PersonId, string Name, DateOnly BirthDate);

    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(12345, "John Smith", new DateOnly(1990, 1, 1)),
        new Person(23456, "Jane Doe", new DateOnly(1995, 2, 2)),
        new Person(34567, "Bob Johnson", new DateOnly(1985, 3, 3)),
        new Person(45678, "Alice Williams", new DateOnly(1980, 4, 4)),
        new Person(56789, "Mike Brown", new DateOnly(1975, 5, 5)),
        new Person(67890, "Emily Davis", new DateOnly(1970, 6, 6)),
        new Person(78901, "David Rodriguez", new DateOnly(1965, 7, 7)),
        new Person(89012, "Sarah Lee", new DateOnly(1960, 8, 8)),
        new Person(90123, "Karen Wilson", new DateOnly(1955, 9, 9)),
        new Person(12340, "Michael Clark", new DateOnly(1950, 10, 10)),
    }.AsQueryable();
}

フィルタを有効にしてみる

QuickGridに表示したデータをName列でフィルタリングするように、ColumnOptionsでテキストを入力する要素<input>を追加します。

<QuickGrid Items="@FilteredNames" Pagination="@pagination">
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" Class="person-name">
            <ColumnOptions>
                <div class="search-box">
                    <input type="search" autofocus @bind="nameFilter" @bind:event="oninput" placeholder="Person name..." />
                </div>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
    </QuickGrid>

QuickGridのItemsにフィルタした結果を渡すコードを追加します。

@code {
    :
    :

    string nameFilter = string.Empty;

    IQueryable<Person> FilteredNames
    {
        get
        {
            var result = people;

            if (!string.IsNullOrEmpty(nameFilter))
            {
                result = result.Where(c => c.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));
            }

            return result;
        }
    }
}

これでフィルタした条件にあわせたデータ表示が可能になります。

さいごに

今回はBlazorで使えるデータグリッド「QuickGrid」の利用方法を紹介しました。基本的なデータグリッドの機能を備えており、実装も比較的難しくなくできそうだと思います。記事内では紹介していない仮想化やスタイルの設定については以下のページで詳しく解説されていますので、こちらを参照していただければと思います。

＼この記事をシェアする／