[!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 リファレンス