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 테이블은 라이브 스트리밍 데이터에 최적화되어 있으며 행 또는 열 수에 제한이 없는 데이터 세트 크기를 처리할 수 있습니다.

    Blazor Data Grid Example

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

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    JS
    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