【QuickGrid】Blazorで簡単に表形式のUIを作成する

アプリケーションを開発する際に、データを表形式で表示したいと感じることが頻繁にあるかと思います。

もちろん、HTMLタグを用いて表を作成することも可能ですが、予想以上に手間がかかるため、より簡単に作成できるツールがないかと探しておりました。

本記事ではそのような時に便利なBlazorのコンポーネントであるQuickGridを紹介します。

対象者
環境
QuickGridとは
導入方法
基本的な使い方
QuickGridを使うメリット
QuickGridの機能
- ソート
- フィルタ
ページング
感想
参考

対象者

本記事は、Blazorの基本的な使い方を理解している方を対象としています。

環境

Microsoft.AspNetCore.Components.QuickGrid 8.0.12
Blazor Web App (.NET 8)

QuickGridとは

公式ドキュメントでは以下のように説明されています。

QuickGrid コンポーネント は、データを表形式で迅速かつ効率的に表示するための Razor コンポーネントです。 QuickGrid では、グリッドをレンダリングする一般的なシナリオに向けたシンプルで便利なデータ グリッド コンポーネントが提供されます。データ グリッド コンポーネントを構築するための参照アーキテクチャとパフォーマンス ベースラインとして機能します。 QuickGrid は高度に最適化されており、高度な手法を使って最適なレンダリング パフォーマンスを実現します。

learn.microsoft.com

簡単にまとめると「データを表形式で表示するために必要な機能がまとめられているUIライブラリ」といったところでしょうか。

導入方法

対象は.NET 8以降のプロジェクトになります。

導入についてはNuGetで以下のパッケージが必要です。 Microsoft.AspNetCore.Components.QuickGrid

コマンドラインの場合は以下を実行します。

dotnet add package Microsoft.AspNetCore.Components.QuickGrid

VIsual StudioのNugetパッケージマネージャーの場合は「Microsoft.AspNetCore.Components.QuickGrid」を検索してインストールします。

基本的な使い方

コンポーネントに以下のように記述します。

@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.PersonId)" />
    <PropertyColumn Property="@(p => p.Name)" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" />
</QuickGrid>


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

    IQueryable<Person> people = new[]
    {
        new Person(10944, "jbs test1", new DateOnly(1991, 12, 1)),
        new Person(12130, "jbs test2", new DateOnly(2004, 1, 9)),
        new Person(10895, "jbs test3", new DateOnly(1985, 3, 16)),
    }.AsQueryable();
}

実行すると以下のように表示されます。

QuickGridを使うメリット

QuickGridを利用するとどのような恩恵があるのでしょうか？利用しない場合と比較してみましょう。

以下は素のHTMLでテーブルを記載した場合です。

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>BirthDate</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var person in people)
        {
            <tr>
                <td>@person.PersonId</td>
                <td>@person.Name</td>
                <td>@person.BirthDate.ToString("yyyy-MM-dd")</td>
            </tr>
        }
    </tbody>
</table>

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

    IQueryable<Person> people = new[]
    {
        new Person(10944, "jbs test1", new DateOnly(1991, 12, 1)),
        new Person(12130, "jbs test2", new DateOnly(2004, 1, 9)),
        new Person(10895, "jbs test3", new DateOnly(1985, 3, 16)),
    }.AsQueryable();
}

@codeの部分はQuickGridを利用した場合と同じです。

HTMLの部分を見ていただくと分かる通り、HTMLを利用する場合はforeachを使った反復処理を自分で書く必要がありますが、QuickGridを使うと表示するデータのリストを指定するだけであとはコンポーネント側に任せることができます。ヘッダーについても自分で書く必要がありません。プロパティ名が自動で表示されます。

※ヘッダーを指定する場合は以下のように記述できます。

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Title="Id" /> @* PropertyColumnコンポーネントのTitleプロパティでヘッダーを指定 *@
    <PropertyColumn Property="@(p => p.Name)" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" />
</QuickGrid>

QuickGridの機能

単純に表形式で表示するだけでなく、以下のような便利な機能が準備されています。

ソート

昇順もしくは降順に並び替えする機能です。以下のようにPropertyColumnのSortableをtrueにするだけです。
自分でソートの処理を書かなくていいのが便利ですね。

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true"/> 
    <PropertyColumn Property="@(p => p.Name)" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" />
</QuickGrid>

フィルタ

自分で実装する必要がありますが、文字列での検索や範囲指定などでフィルタ出来ます。

以下は文字列でフィルタしている例です。

@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Items="@FilteredPeople">
    <PropertyColumn Property="@(p => p.PersonId)"/>
    <PropertyColumn Property="@(p => p.Name)">
        <ColumnOptions>
            <div>
                <input type="search" autofocus @bind="nameFilter" @bind:event="oninput" />
            </div>
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" />
</QuickGrid>

@code {
    private string nameFilter = "";

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

    IQueryable<Person>? people;

    IQueryable<Person>? FilteredPeople
    {
        get
        {
            return people?.Where(p => p.Name.Contains(nameFilter));
        }
    }


    protected override void OnInitialized()
    {
        people = new[]
        {
            new Person(10944, "jbs test1", new DateOnly(1991, 12, 1)),
            new Person(12130, "jbs test2", new DateOnly(2004, 1, 9)),
            new Person(10895, "jbs test3", new DateOnly(1985, 3, 16)),
        }.AsQueryable();
    }
}

ページング

データが多い場合にページで分けて表示します。

これも以下のように簡単に実装可能です。

@using Microsoft.AspNetCore.Components.QuickGrid

<div class="grid">
    <QuickGrid Items="@itemsQueryable" Pagination="@pagination">
        <PropertyColumn Property="@(c => c.PersonId)"/>
    </QuickGrid>
</div>

<Paginator State="@pagination" />

@code{
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
    record Person(int PersonId);

    IQueryable<Person>? itemsQueryable;

    protected override void OnInitialized()
    {
        itemsQueryable = Enumerable.Range(1, 100).Select(i => new Person(i)).AsQueryable();
    }
}