[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Blazor Data Grid 概要
Ignite UI for Blazor Data Table / Data Grid は、表形式の Blazor コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。Blazor の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。Blazor データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。
Blazor Data Grid の例
このデモは、グリッドで利用可能な機能のいくつかを実装しています: フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。
作業の開始
依存関係
IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。
以下の名前空間を追加してコントロールの実装を開始できます。
@using IgniteUI.Blazor.Controls
モジュールの要件
IgbGrid
を作成するには、以下のモジュールが必要です。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
オプションのモジュール
上記のオプションの IgbGrid
機能を使用するには、以下のモジュールが必要です。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataGridModule),
typeof(IgbDataGridToolbarModule),
typeof(IgbSparklineModule)
);
サンプル データ ソース
Blazor グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。
@code {
public List<SaleInfo> DataSource { get; set;}
Random Rand = new Random();
protected override void OnInitialized()
{
GenerateData();
}
public void GenerateData()
{
string[] names = new string[] {
"Intel CPU", "AMD CPU",
"Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard",
"Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
"Corsair Memory", "Patriot Memory", "Skill Memory",
"Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
"Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
"Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };
string[] countries = new string[] {
"USA", "UK", "France", "Canada", "Poland",
"Denmark", "Croatia", "Australia", "Seychelles",
"Sweden", "Germany", "Japan", "Ireland",
"Barbados", "Jamaica", "Cuba", "Spain", };
string[] status = new string[] { "Packing", "Shipped", "Delivered" };
var sales = new List<SaleInfo>();
for (var i = 0; i < 200; i++)
{
var price = GetRandomNumber(10000, 90000) / 100;
var items = GetRandomNumber(4, 30);
var value = Math.Round(price * items);
var margin = GetRandomNumber(2, 5);
var profit = Math.Round((price * margin / 100) * items);
var country = GetRandomItem(countries);
var item = new SaleInfo()
{
Country = country,
CountryFlag = GetCountryFlag(country),
Margin = margin,
OrderDate = GetRandomDate(),
OrderItems = items,
OrderValue = value,
ProductID = 1001 + i,
ProductName = GetRandomItem(names),
ProductPrice = price,
Profit = Math.Round(profit),
Status = GetRandomItem(status)
};
sales.Add(item);
}
this.DataSource = sales;
}
public double GetRandomNumber(double min, double max)
{
return Math.Round(min + (Rand.NextDouble() * (max - min)));
}
public string GetRandomItem(string[] array)
{
var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1));
return array[index];
}
public DateTime GetRandomDate() {
var today = new DateTime();
var year = today.Year;
var month = this.GetRandomNumber(1, 9);
var day = this.GetRandomNumber(10, 27);
return new DateTime(year, (int)month, (int)day);
}
public string GetCountryFlag(string country)
{
var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
return flag;
}
public class SaleInfo
{
public string? Status { get; set; }
public string? ProductName { get; set; }
public string? CountryFlag { get; set; }
public string? Country { get; set; }
public DateTime OrderDate { get; set; }
public double Profit { get; set; }
public double ProductPrice { get; set; }
public double ProductID { get; set; }
public double OrderValue { get; set; }
public double OrderItems { get; set; }
public double Margin { get; set; }
}
}
列の自動生成
以下のコードは、Blazor データ グリッドを上記のローカルデータにバインドする方法を示しています。
<IgbDataGrid Height="100%"
Width="100%"
DataSource="DataSource"
AutoGenerateColumns="true"
DefaultColumnMinWidth="100"
SummaryScope="SummaryScope.Root"
IsColumnOptionsEnabled="true"
IsGroupCollapsable="true"
GroupSummaryDisplayMode="GroupSummaryDisplayMode.RowBottom"
ColumnMovingMode="ColumnMovingMode.Deferred"
ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
ColumnMovingSeparatorWidth="2"
ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
SelectionMode="GridSelectionMode.SingleRow"
CornerRadiusTopLeft="0"
CornerRadiusTopRight="0" />
列の手動定義
<IgbDataGrid Height="100%"
Width="100%"
DataSource="DataSource"
AutoGenerateColumns="false">
<IgbNumericColumn Field="ProductID" HeaderText="Product ID" />
<IgbTextColumn Field="ProductName" HeaderText="Product Name" />
<IgbTextColumn Field="QuantityPerUnit" HeaderText="Quantity Per Unit" />
<IgbNumericColumn Field="UnitsInStock" HeaderText="Units In Stock" />
<IgbDateTimeColumn Field="OrderDate" HeaderText="Order Date" />
</IgbDataGrid>
列のスタイル設定
次のコードは、提供された列のプロパティを使用して特定の列のスタイルを設定する方法を示しています。
<IgbTextColumn
Background="SkyBlue"
FontStyle="italic"
FontWeight="bold"
FontFamily="Times New Roman"
FontSize="16"
/>
ビデオ チュートリアル
Blazor データ グリッドの作成について詳しくは、このチュートリアル ビデオ (英語) をご覧ください。
その他のリソース
- アクセシビリティの遵守
- セルのアクティブ化
- グリッド編集
- セル選択
- 列アニメーション
- 列の選択
- 列フィルタリング
- 列の移動
- 列のオプション
- 列サイズの変更
- 列の並ソート
- 列タイプ
- パフォーマンス
- 行のピン固定
- 行グループ
- 行のハイライト表示