Please note that this control has been deprecated and replaced with the Grid, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor 데이터 그리드 개요

Ignite UI for Blazor는 코딩이나 구성이 거의 없이 데이터를 빠르게 바인딩하고 표시할 수 있는 표형 Blazor 그리드 구성 요소입니다. Blazor 데이터 그리드의 기능에는 필터링, 정렬, 템플릿, 행 선택, 행 그룹화, 행 고정 및 이동 가능한 열이 있습니다. Blazor 테이블은 라이브 스트리밍 데이터에 최적화되어 있으며 행 또는 열 수에 제한이 없는 데이터 세트 크기를 처리할 수 있습니다.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Data Grid Example

이 데모는 그리드에서 사용할 수 있는 일부 기능(필터링, 그룹화, 열 고정/고정 해제, 열 위치 변경, 정렬 및 요약)을 구현합니다.

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataGridModule),
                typeof(IgbDataGridToolbarModule),
                typeof(IgbGridColumnOptionsModule),
                typeof(IgbSparklineModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

// NOTE this file contains multiple data sources:


// Data Source #1
using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}


// Data Source #2
using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class Employee : INotifyPropertyChanged
    {
        public string ID { get; set; }
        public string Address { get; set; }
        public double Age { get; set; }
        public string Gender { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Photo { get; set; }
        public double Salary { get; set; }
        public double Sales { get; set; }
        public string Income { get; set; }
        public int Index { get; set; }

        public DateTime Birthday { get; set; }
        public List<Productivity> Productivity { get; set; }

        private string _Country;
        public string Country
        {
            get { return _Country; }
            set { if (_Country != value) { OnCountryChanged(value); } }
        }

        public string CountryFlag { get; set; }

        protected void OnCountryChanged(string countryName)
        {
            // syncronizing country name and country flag
            _Country = countryName;
            CountryFlag = DataGenerator.GetCountryFlag(countryName);
            City = DataGenerator.GetCity(countryName);
            OnPropertyChanged("Country");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class Productivity
    {
        public double Value { get; set; }
        public int Week { get; set; }
    }

    public static class EmployeeData
    {
        public static List<Employee> Create(int? count, bool? useProductivity)
        {
            if (count == null) count = 100;

            var employees = new List<Employee>();
            for (int i = 0; i < count; i++)
            {
                var age = Math.Round(DataGenerator.GetNumber(20, 40));
                var gender = DataGenerator.GetGender();
                var firstName = DataGenerator.GetNameFirst(gender);
                var lastName = DataGenerator.GetNameLast();
                var street = DataGenerator.GetStreet();
                var country = DataGenerator.GetCountry();
                var city = DataGenerator.GetCity(country);
                var email = firstName.ToLower() + "@" + DataGenerator.GetEmail();
                var photoPath = DataGenerator.GetPhoto(gender);

                var employee = new Employee
                {
                    Index = i,
                    Address = street + ", " + city,
                    Age = age,
                    Birthday = DataGenerator.GetBirthday(),
                    City = city,
                    Email = email,
                    Gender = gender,
                    ID = DataGenerator.Pad(1001 + i, 4),
                    FirstName = firstName,
                    LastName = lastName,
                    Name = firstName + " " + lastName,
                    Photo = photoPath,
                    Phone = DataGenerator.GetPhone(),
                    Street = DataGenerator.GetStreet(),
                    Salary = DataGenerator.GetNumber(40, 200) * 1000,
                    Sales = DataGenerator.GetNumber(200, 980) * 1000,
                };
                employee.Country = country;

                employee.Income = DataGenerator.GetIncomeRange(employee.Salary);

                if (useProductivity.HasValue && useProductivity.Value)
                {
                    employee.Productivity = GetProductivity(52);
                }
                employees.Add(employee);
            }

            return employees;
        }

        public static List<Productivity> GetProductivity(int weekCount)
        {
            var productivity = new List<Productivity>();

            for (var w = 1; w <= weekCount; w++)
            {
                var value = DataGenerator.GetNumber(-50, 50);
                var prod = new Productivity
                {
                    Value = value,
                    Week = w
                };
                productivity.Add(prod);
            };

            return productivity;
        }
    }
}
csコピー

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.RenderTree
@using Microsoft.AspNetCore.Components.Web

@using IgniteUI.Blazor.Controls

<div class="container vertical">

    <div class="container vertical">

        @if (Employees != null)
        {
            <IgbDataGridToolbar ToolbarTitle="Sales Team" ColumnChooser="true" ColumnPinning="true" TargetGrid="@DataGridRef"/>

            <div style="overflow: hidden">
                <IgbDataGrid Height="100%" Width="100%"
                      @ref="@DataGridRef"
                      RowHeight="50"
                      DataSource="Employees"
                      AutoGenerateColumns="false"
                      IsColumnOptionsEnabled="true"
                      IsGroupCollapsable="true"
                      ActivationMode="GridActivationMode.Cell"
                      SummaryScope="@SummaryScope.Root"
                      GroupSummaryDisplayMode="@GroupSummaryDisplayMode.RowBottom"
                      GroupHeaderDisplayMode="@GroupHeaderDisplayMode.Combined"
                      CornerRadiusTopLeft="0"
                      CornerRadiusTopRight="0"
                      ColumnMovingSeparatorWidth="2"
                      ColumnMovingMode="ColumnMovingMode.Deferred"
                      ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
                      ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
                      ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
                      SelectionMode="DataGridSelectionMode.SingleRow">

                    <IgbImageColumn IsEditable="false" Width="@("*>120")" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                                HorizontalAlignment="@CellContentHorizontalAlignment.Stretch"  />

                    <IgbTextColumn Width="@("*>130")" Field="Name" />

                    @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@
                    <IgbTemplateColumn Width="@("*>160")" Field="Sales" CellUpdatingScript="onUpdatingSalesColumn"
                                    HorizontalAlignment="@CellContentHorizontalAlignment.Center" />

                    <IgbNumericColumn Width="@("*>130")" Field="Salary" PositivePrefix="$"
                                ShowGroupingSeparator="true"
                                MaxFractionDigits="0"
                                MinFractionDigits="0" />

                    <IgbNumericColumn Width="100" Field="Age" HorizontalAlignment="@CellContentHorizontalAlignment.Center"/>
                    <IgbDateTimeColumn Width="@("*>140")" Field="Birthday" HeaderText="Date of Birth" />

                    <IgbImageColumn IsEditable="false" Width="@("*>110")" Field="CountryFlag" HeaderText="Country" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                                HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

                    @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@
                    <IgbTemplateColumn Width="@("*>170")" Field="Address" CellUpdatingScript="onUpdatingAddressColumn" />
                    <IgbTemplateColumn Width="@("*>130")" Field="Phone" CellUpdatingScript="onUpdatingPhoneColumn" />

                    <IgbTextColumn Width="@("*>120")" Field="Income" />
                    <IgbTextColumn Width="@("*>120")" Field="Email" IsEditable="false" />

                </IgbDataGrid>
            </div>
        }

    </div>
</div>

@code {

    private List<Employee> Employees;

    private IgbDataGrid _grid;
    private IgbDataGrid DataGridRef
    {
        get { return _grid; }
        set { _grid = value; this.OnDataGridRef(); StateHasChanged(); }
    }

    protected override void OnInitialized()
    {

        this.Employees = EmployeeData.Create(100, false);
    }

    private void OnDataGridRef()
    {
        var peopleGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Country" };
        var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" };
        this._grid.GroupDescriptions.Add(peopleGroup);
        this._grid.GroupDescriptions.Add(incomeGroup);

        var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average };
        var peopleSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count };
        var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum };
        var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max };

        this._grid.SummaryDescriptions.Add(ageSummary);
        this._grid.SummaryDescriptions.Add(peopleSummary);
        this._grid.SummaryDescriptions.Add(salarySummary);
        this._grid.SummaryDescriptions.Add(saleSummary);

        // TODO fix onSummarziePeopleGender
        //var nameSummary = new IgbColumnSummaryDescription() { Field = "Name", Operand = DataSourceSummaryOperand.Custom,
        //    ProvideCalculatorScript = "onSummarziePeopleGender" };
        //this._grid.SummaryDescriptions.Add(nameSummary);
    }

}razorコピー

// NOTE this JavaScript file implements functions for styling/templating columnd of the DataGrid control
// at end of this file, the igRegisterScript registers functions that are used .razor file

function onUpdatingSalesColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let sales = info.rowItem.Sales;
    let gaugeValue = null;
    let gaugeBar = null;

    if (content.childElementCount === 0) {
        gaugeValue = document.createElement("span");
        gaugeValue.style.margin = "0px";
        gaugeValue.style.marginTop = "2px";
        gaugeValue.style.padding = "0px";
        gaugeValue.style.fontFamily = "Verdana";
        gaugeValue.style.fontSize = "13px";
        gaugeValue.style.textAlign = "center";

        gaugeBar = document.createElement("div");
        gaugeBar.style.background = "#7f7f7f";
        gaugeBar.style.padding = "0px";
        gaugeBar.style.margin = "0px";
        gaugeBar.style.height = "6px";
        gaugeBar.style.left = "0px";
        gaugeBar.style.top = "0px";
        gaugeBar.style.position = "relative";

        const gauge = document.createElement("div");
        gauge.style.background = "#dddddd";
        gauge.style.padding = "0px";
        gauge.style.margin = "0px";
        gauge.style.height = "4px";
        gauge.style.marginTop = "8px";
        gauge.style.width = "100%";
        gauge.appendChild(gaugeBar);

        content.style.verticalAlign = "center";
        content.style.lineHeight = "normal";
        content.style.display = "flex";
        content.style.flexDirection = "column";
        content.style.justifyContent = "center";
        content.style.height = "100%";
        content.style.width = "calc(100% - 2rem)";
        content.style.marginRight = "1rem";
        content.style.marginLeft = "1rem";

        content.appendChild(gauge);
        content.appendChild(gaugeValue);
    } else {
        const gauge = content.children[0];
        gaugeBar = gauge.children[0];
        gaugeValue = content.children[1];
    }

    // conditional formatting:
    if (sales < 400000) {
        gaugeValue.style.color = "rgb(211, 17, 3)";
        gaugeBar.style.background = "rgb(211, 17, 3)";
    }
    else if (sales < 650000) {
        gaugeValue.style.color = "Orange";
        gaugeBar.style.background = "Orange";
    }
    else {
        gaugeValue.style.color = "rgb(21, 190, 6)";
        gaugeBar.style.background = "rgb(21, 190, 6)";
    }

    let gaugeWidth = (sales / 990000) * 100;
    gaugeWidth = Math.min(100, gaugeWidth);
    gaugeBar.style.width = gaugeWidth + "%";

    gaugeValue.textContent = "$" + sales / 1000 + ",000";
}

function onUpdatingAddressColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let item = info.rowItem;
    let span1 = null;
    let span2 = null;

    if (content.childElementCount === 0) {
        content.style.fontFamily = "Verdana";
        content.style.fontSize = "13px";
        content.style.verticalAlign = "center";
        content.style.lineHeight = "normal";
        content.style.display = "flex";
        content.style.flexDirection = "column";
        content.style.justifyContent = "center";
        content.style.height = "100%";
        content.style.width = "100%";
        content.style.color = "rgb(24, 29, 31)";
        // stacking above elements in the content of grid's cell
        span1 = document.createElement("span");
        span2 = document.createElement("span");
        content.appendChild(span1);
        content.appendChild(span2);
    }
    else {
        span1 = content.children[0];
        span2 = content.children[1];
    }

    if (span1 && span2) {
        // updating elements in the content of grid's cell
        span1.textContent = item.Street;
        span2.textContent = item.City + ", " + item.Country;
    }
}

function onUpdatingPhoneColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let item = info.rowItem;
    let link = null;

    if (content.childElementCount === 0) {
        link = document.createElement("a");
        content.style.verticalAlign = "center";
        content.style.justifyContent = "center"; 
        content.style.lineHeight = "normal";
        content.style.display = "inline-block";
        // content.style.display = "inline-grid";
        content.style.fontFamily = "Verdana";
        content.style.fontSize = "13px";
        content.style.color = "#4286f4";
        content.style.width = "100%";

        content.appendChild(link);
    } else {
        link = content.children[0];
    }

    link.href = "tel:" + item.Phone;
    link.textContent = item.Phone;
}

// this code allows calling above functions from a .razor file
igRegisterScript("onUpdatingSalesColumn", onUpdatingSalesColumn, false);
igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);
igRegisterScript("onUpdatingPhoneColumn", onUpdatingPhoneColumn, false);

function onSummarziePeopleGender(grid, args) {

    //TODO
    //let info = args.cellInfo;
    //let gender = info.rowItem.Gender;
    args.setCalculator(10);
}
igRegisterScript("onSummarziePeopleGender", onSummarziePeopleGender, false);
jsコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Getting Started

Dependencies

IgniteUI.Blazor 패키지 추가에 대해서는 다음 항목을 참조하세요.

• 시작하기
• 너겟 패키지 추가

그런 다음 다음 네임스페이스를 추가하여 컨트롤 구현을 시작할 수 있습니다.

@using IgniteUI.Blazor.Controls
razor

Component Modules

​IgbGrid 다음 모듈이 필요합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
razor

Optional Modules

위에 표시된 선택적 IgbGrid 기능에는 다음 모듈이 필요합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbDataGridModule),
    typeof(IgbDataGridToolbarModule),
    typeof(IgbSparklineModule)
);
razor

Sample Data Source

이제 Blazor 데이터 그리드 모듈을 가져왔으므로 다음은 로컬 데이터에 바인딩되는 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; }
    }
}
razor

Auto-Generate Columns

다음 코드는 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" />
razor

Manually Define Columns

<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>
razor

Styling Columns

다음 코드는 제공된 열의 속성을 사용하여 특정 열의 스타일을 지정하는 방법을 보여줍니다.

<IgbTextColumn
    Background="SkyBlue"
    FontStyle="italic"
    FontWeight="bold"
    FontFamily="Times New Roman"
    FontSize="16"
/>
razor

Tutorial Video

짧은 튜토리얼 비디오에서 Blazor 데이터 그리드를 만드는 방법에 대해 자세히 알아보세요.

Additional Resources

• 접근성 준수
• 세포 활성화
• 그리드 편집
• 셀 선택
• 기둥 애니메이션
• 열 선택기
• 열 필터링
• 열 이동
• 열 옵션
• 열 크기 조정
• 열 정렬
• 열 유형
• 성능
• 행 고정
• 행 그룹화
• 행 강조 표시

API References

• IgbGrid