Blazor QuickGridのスタイル指定

投稿日: 2026年3月6日 作成者: たけぞう

BlazorのQuickGridのスタイル指定には色々な方法があるようだが、とりあえず、MSのマニュアルに載っている方法で試してみた。

以下のようなGridがある場合、

@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid
@using qgridtest.Db
@inject PersonContext Db

<PageTitle>Quick Grid Test</PageTitle>

<h1>Quick Grid Test</h1>

<div class="GridContainer"> <!-- QuickGridのコンテナ -->
    <QuickGrid Items="people" Pagination="paginationState">
        <PropertyColumn Title="氏名" Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Title="生年月日" Property="@(p => p.Birthdate)" Format="yyyy/MM/dd" Sortable="true" />
        <PropertyColumn Title="年齢" Property="@(p => p.Age)" />
    </QuickGrid>
    <Paginator State="paginationState" />
</div>
@code {
    IQueryable<Person>? people;
    PaginationState paginationState = new PaginationState { ItemsPerPage = 5 };
    protected override void OnInitialized()
    {
        people = Db.People.AsQueryable();
    }
}

まず、QuickGridのコンテナとなるdivタグで括り、そのCSSクラスを使用して、以下のようなCSSを指定することで、QuickGridの各要素にスタイルを適用できる。

/* QuickGridのコンテナ */
.GridContainer {
    padding-left:3em;
    padding-right: 3em;
}
/* QuickGridのヘッダ */
.GridContainer ::deep th {
    background-color: teal;
}
/* QuickGridの行(ボーダー) */
.GridContainer ::deep tr {
    border-width: 1px;
    border-color:lightgray;
    border-style: solid;
}
/* QuickGridの行の偶数行背景色 */
.GridContainer ::deep tr:nth-child(even) {
    background-color: lightgreen;
}
/* QuickGridの1列目の幅 */
.GridContainer ::deep td:nth-child(1) {
    width: 200px;
}
/* QuickGrid空セルは非表示 */
.GridContainer ::deep td:empty {
    display: none;
}

↓のような感じで表示される。

ほかの方法もあるようだが、結局 ::deepを使用する方法が一般的みたい。

たけぞう について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。 好きなことだけ拾って投稿しているので、内容にはあまり期待しないでねw
カテゴリー: .NET, asp.net core, Blazor, C#, 技術系 パーマリンク

Blazor QuickGridのスタイル指定 への1件のコメント

  1. たけぞう のコメント:
    2026年3月10日 16:12

    ちなみにソート状態のリセットするにはQuickGridを@refで変数に結び付けて置き、SortByColumnAsyncメソッドを呼び出すことにより、ソートをクリア状態にできる。

    例
    <button ・・・　@onclick=”OnResetSort”>ソートリセット</button>
    <QuickGrid ・・・ @ref=”grid”>
    ・・・
    </QuickGrid>
    ・・・
    @code {
      QuickGrid<・・・>? grid;
      protected async Task OnResetSort() {
        await grid!.SortByColumnAsync(null,SortDirection.Async);
    }

    返信

たけぞう へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。