【入門】MudBlazorのDataGrid（MudDataGrid）の使い方と編集機能まとめ

MudBlazorは、Blazor向けの人気UIライブラリの1つであり、MudDataGrid はその中でも強力なデータ表示・操作コンポーネントです。本記事では MudDataGrid の基本から、デフォルトで備わっている 編集機能 までを詳しく解説します。

🎯 MudDataGridとは？

MudBlazorに搭載されたデータグリッドコンポーネントで、次のような機能が利用できます。

• ソート、フィルタ、ページング対応
• 行・セル単位の編集機能
• カスタムテンプレート対応
• 非同期データロード、API連携にも対応

🧩 基本構文

まずはシンプルな使い方を紹介します。

<MudDataGrid Items="@items" Dense="true" Hover="true" Bordered="true">
    <Columns>
        <PropertyColumn Property="x => x.Id" Title="ID" />
        <PropertyColumn Property="x => x.Name" Title="名前" />
        <PropertyColumn Property="x => x.CreatedAt" Title="作成日" />
    </Columns>
</MudDataGrid>

@code {
    private List<User> items = new()
    {
        new User { Id = 1, Name = "田中", CreatedAt = DateTime.Now },
        new User { Id = 2, Name = "佐藤", CreatedAt = DateTime.Now.AddDays(-1) }
    };

    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime CreatedAt { get; set; }
    }
}

⚙️ よく使うオプション一覧

オプション 説明
Dense="true" 行をコンパクトにする
Hover="true" 行にマウスオーバー時の強調
Bordered="true" テーブルに罫線を付ける
Filterable="true" フィルタ機能を有効化
Sortable="true" ソート機能を有効化
PageSize="10" 1ページあたりの表示件数

API連携 & 非同期データロード

API等からデータを取得する場合のサーバーサイド処理例です。

<MudDataGrid Items="@fetchedItems" ServerData="LoadServerData" />

@code {
    private List<User> fetchedItems;

    private async Task<GridData<User>> LoadServerData(GridState<User> state)
    {
        // APIからデータ取得
        fetchedItems = await _userService.GetUsersAsync();

        return new GridData<User>
        {
            Items = fetchedItems,
            TotalItems = fetchedItems.Count
        };
    }
}

✅ 行選択（Row Selection）

行クリック時に処理を追加することも可能です。

<MudDataGrid Items="@items" SelectedItemChanged="OnSelectedItemChanged">
    <Columns>
        <PropertyColumn Property="x => x.Id" />
        <PropertyColumn Property="x => x.Name" />
    </Columns>
</MudDataGrid>

@code {
    private void OnSelectedItemChanged(User selected)
    {
        Console.WriteLine($"選択されたユーザー: {selected.Name}");
    }
}

🎨 カスタムテンプレート

カラムごとに自由にデザインを追加することもできます。

<PropertyColumn Property="x => x.CreatedAt" Title="作成日">
    <Template Context="context">
        <MudChip Color="Color.Primary">@context.CreatedAt.ToShortDateString()</MudChip>
    </Template>
</PropertyColumn>

✏️ 編集機能（インライン編集）

MudDataGrid は標準で インライン編集 に対応しています。
Editable="true" をカラムに付けるだけで、エディットモードが有効になります。

<MudDataGrid Items="@items" Dense="true" Hover="true" Bordered="true">
    <Columns>
        <PropertyColumn Property="x => x.Id" Title="ID" />
        <PropertyColumn Property="x => x.Name" Title="名前" Editable="true" />
        <PropertyColumn Property="x => x.CreatedAt" Title="作成日" Editable="true" />
    </Columns>
</MudDataGrid>

💡 編集後のデータ取得

通常、編集後は items コレクションに変更が反映されていますので、
Save ボタンや OnRowEditCommit などのイベントと組み合わせて保存処理を行います。

<MudDataGrid Items="@items" Dense="true" Hover="true" Bordered="true"
             RowEditCommit="OnRowEditCommit">

    <Columns>
        <PropertyColumn Property="x => x.Id" Title="ID" />
        <PropertyColumn Property="x => x.Name" Title="名前" Editable="true" />
        <PropertyColumn Property="x => x.CreatedAt" Title="作成日" Editable="true" />
    </Columns>
</MudDataGrid>

@code {
    private void OnRowEditCommit(User updatedUser)
    {
        Console.WriteLine($"編集されたユーザー: {updatedUser.Name}");
        // ここでDB更新処理などを行う
    }
}

🚩 注意点

編集を有効化するには、Editable="true" が必須
RowEditCommit や RowEditCancel イベントを活用することで、より安全な編集ロジックが組めます

📚 参考リンク

MudBlazor公式：MudDataGrid
MudBlazor GitHub

📝 まとめ

MudDataGrid は、リッチなデータテーブルをBlazorで簡単に構築できる強力なコンポーネント
ソート・フィルタ・ページング・編集が標準対応
API連携 や インライン編集 と組み合わせて、実践的なCRUDアプリも構築可能
MudBlazorのDataGridを活用して、効率的なBlazorアプリ開発を目指しましょう！