Blazor Data Grid 概要

    Ignite UI for Blazor Data Table / Data Grid は、表形式の Blazor コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。Blazor の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。Blazor データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。

    Blazor Data Grid の例

    このデモは、グリッドで利用可能な機能のいくつかを実装しています: フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。

    作業の開始

    依存関係

    IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。

    以下の名前空間を追加してコントロールの実装を開始できます。

    @using IgniteUI.Blazor.Controls
    @inject IIgniteUIBlazor IgniteUIBlazor
    

    モジュールの要件

    IgbDataGrid を作成するには、以下のモジュールが必要です。

    IgbDataGridModule.Register(IgniteUIBlazor);
    

    オプションのモジュール

    上記のオプションの IgbDataGrid 機能を使用するには、以下のモジュールが必要です。

    IgbGridColumnOptionsModule.Register(IgniteUIBlazor);
    IgbDataGridToolbarModule.Register(IgniteUIBlazor);
    IgbSparklineModule.Register(IgniteUIBlazor);
    

    サンプル データ ソース

    Blazor グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。

    @code {
        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="DataSourceSummaryScope.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"
    />
    

    その他のリソース