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

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

## 🎯 MudDataGridとは？

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

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

## 🧩 基本構文

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

```razor
<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等からデータを取得する場合のサーバーサイド処理例です。

```razor
<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）
行クリック時に処理を追加することも可能です。

```razor
<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}");
    }
}
```

## 🎨 カスタムテンプレート
カラムごとに自由にデザインを追加することもできます。

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

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

```razor
<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 などのイベントと組み合わせて保存処理を行います。

```razor
<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](https://mudblazor.com/components/datagrid)
[MudBlazor GitHub](https://github.com/MudBlazor/MudBlazor)

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