[!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 データグリッドの作成について詳しくは、このチュートリアルビデオ (英語) をご覧ください。

その他のリソース

API リファレンス

IgbGrid