[!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.
Descripción general de la cuadrícula de datos Blazor
La Ignite UI for Blazor Data Table/Data Grid es un componente de cuadrícula tabular Blazor que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos Blazor incluyen filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles. Las tablas Blazor están optimizadas para transmisión de datos en vivo, con la capacidad de manejar tamaños de conjuntos de datos ilimitados en un número de filas o columnas.
Blazor Data Grid Example
Esta demostración implementa algunas de las funciones que están disponibles en la cuadrícula: filtrado, agrupación, fijar/desanclar columnas, reposicionar columnas, ordenar y resúmenes.
Getting Started
Dependencies
Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor.
Luego, puede comenzar a implementar el control agregando los siguientes espacios de nombres:
@using IgniteUI.Blazor.Controls
Component Modules
El IgbGrid
requiere los siguientes módulos:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
Optional Modules
Las características opcionales IgbGrid
, vistas arriba, requieren los siguientes módulos:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataGridModule),
typeof(IgbDataGridToolbarModule),
typeof(IgbSparklineModule)
);
Sample Data Source
Ahora que se importa el módulo de cuadrícula de datos Blazor, lo siguiente es la configuración básica de la cuadrícula Blazor que se vincula a los datos locales.
@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
El siguiente código demuestra cómo vincular la cuadrícula de datos Blazor a los datos locales anteriores.
<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
El siguiente código demuestra cómo aplicar estilo a columnas específicas utilizando las propiedades de la columna proporcionada.
<IgbTextColumn
Background="SkyBlue"
FontStyle="italic"
FontWeight="bold"
FontFamily="Times New Roman"
FontSize="16"
/>
Tutorial Video
Obtenga más información sobre cómo crear una cuadrícula de datos Blazor en nuestro breve vídeo tutorial:
Additional Resources
- Cumplimiento de Accesibilidad
- Activación celular
- Edición de cuadrícula
- Selección de celda
- Animación de columna
- Selector de columnas
- Filtrado de columnas
- Columna en movimiento
- Opciones de columna
- Cambio de tamaño de columna
- Clasificación de columnas
- Tipos de columna
- Actuación
- Fijación de filas
- Agrupación de filas
- Resaltado de filas