[!Note] 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
이 데모는 그리드에서 사용할 수 있는 일부 기능(필터링, 그룹화, 열 고정/고정 해제, 열 위치 변경, 정렬 및 요약)을 구현합니다.
Getting Started
Dependencies
IgniteUI.Blazor 패키지 추가에 대해서는 다음 항목을 참조하세요.
그런 다음 다음 네임스페이스를 추가하여 컨트롤 구현을 시작할 수 있습니다.
@using IgniteUI.Blazor.Controls
Component Modules
IgbGrid 다음 모듈이 필요합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
Optional Modules
위에 표시된 선택적 IgbGrid 기능에는 다음 모듈이 필요합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataGridModule),
typeof(IgbDataGridToolbarModule),
typeof(IgbSparklineModule)
);
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; }
}
}
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" />
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>
Styling Columns
다음 코드는 제공된 열의 속성을 사용하여 특정 열의 스타일을 지정하는 방법을 보여줍니다.
<IgbTextColumn
Background="SkyBlue"
FontStyle="italic"
FontWeight="bold"
FontFamily="Times New Roman"
FontSize="16"
/>
Tutorial Video
짧은 튜토리얼 비디오에서 Blazor 데이터 그리드 생성에 대해 자세히 알아보세요.