はじめに
これは、Blazor Advent Calendar 2024の24日目の記事となります。
筆者は以前、Excel ライクなグリッドJavaScriptライブラリーの記事を書いています。
現在、仕事で作成しているアプリケーションでも採用しています。
そして、今回はBlazor専用のExcel ライクなグリッドライブラリーがあることを知りました。
BlazorDatasheetの紹介
デモ
サンプル作成
さっそく、サンプルを作成してみましょう。
新規 Blazor Web App プロジェクトを作成します。
インストール
NuGetで「BlazorDatasheet」を取得します。
プログラム変更
Program.cs
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
// 追加
builder.Services.AddBlazorDatasheet();
CSSとJSを追加します。
App.razor
<link rel="stylesheet" href="_content/BlazorDatasheet/sheet-styles.css" />
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="_content/BlazorDatasheet/blazor-datasheet.js" type="text/javascript"></script>
</body>
カウンターページに追加します。
Counter.razor
@page "/counter"
@using BlazorDatasheet
@using BlazorDatasheet.Core.Commands.Data
@using BlazorDatasheet.Core.Data
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<br />
<br />
<Datasheet Sheet="sheet"/>
<br />
<button class="btn btn-primary" @onclick="Test">Test</button>
@code {
private int currentCount = 0;
private Sheet sheet = default!;
private void IncrementCount()
{
currentCount++;
}
protected override void OnInitialized()
{
sheet = new Sheet(3, 3);
}
private void Test()
{
sheet.Cells[0, 0].Value = "Test1";
sheet.Range("B2").Value = "Test2";
sheet.Cells.SetValue(2, 2, "Test3");
sheet.Commands.ExecuteCommand(new SetCellValueCommand(2, 0, "Test4"));
}
}
実行
3行と3列が作成されます。
Testボタンクリック
各セルに値がセットされます。
最後に
予定では、Web API コントローラーを追加する記事を書くつもりだったのですが、筆者がWeb API コントローラーを追加したのは、BlazorServerの.NET 7の時で、後に.NET 8で移行しました。
今回、記事用に新規 Blazor Web App プロジェクトを作成した時に、想定していたのと違ってbuilder.Services.AddControllers();が追加できないなど、もう記事を書くのに間に合わないと急遽変更しました。
Excel ライクなグリッドライブラリのHandsontableを何年にもわたってイジり倒していますので、そことの違いなど、BlazorDatasheetをこれから色々さわって記事を書いていきたいです。