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 Data Grid Overview
The Ignite UI for Blazor Data Table / Data Grid is a tabular Blazor grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the Blazor data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The Blazor tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.
Blazor Data Grid Example
This demo implements some of the features that are available in the Grid:
Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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;
namespaceInfragistics.Samples
{
publicstaticclassDataGenerator
{
readonlystaticstring[] websites = { ".com", ".gov", ".edu", ".org" };
readonlystaticstring[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
readonlystaticstring[] genders = { "male", "female" };
readonlystaticstring[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
readonlystaticstring[] 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" };
readonlystaticstring[] 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" };
readonlystaticstring[] countries = { "USA", "UK", "France", "Canada", "Poland" };
readonlystaticstring[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
readonlystaticstring[] citiesUK = { "London", "Liverpool", "Manchester" };
readonlystaticstring[] citiesFR = { "Paris", "Marseille", "Lyon" };
readonlystaticstring[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
readonlystaticstring[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
readonlystaticstring[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
readonlystaticstring[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
readonlystaticstring[] roadSuffixes = { "Road", "Street", "Way" };
readonlystaticstring[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };
publicstatic Random Rand = new Random();
publicstaticstringGetWebsite()
{
return GetItem(websites);
}
publicstaticstringGetEmail()
{
return GetItem(emails);
}
publicstaticdoubleGetNumber(double min, double max)
{
return Math.Round(min + (Rand.NextDouble() * (max - min)));
}
publicstaticintGetInteger(double min, double max)
{
return (int)GetNumber(min, max);
}
publicstaticstringGetPhone()
{
var phoneCode = GetNumber(100, 900);
var phoneNum1 = GetNumber(100, 900);
var phoneNum2 = GetNumber(1000, 9000);
var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
publicstaticstringGetGender()
{
return GetItem(genders);
}
publicstaticstringGetNameFirst(string gender)
{
if (gender == "male")
return GetItem(maleNames);
elsereturn GetItem(femaleNames);
}
publicstaticstringGetNameLast()
{
return GetItem(lastNames);
}
publicstaticstringGetItem(string[] array)
{
var index = (int)Math.Round(GetNumber(0, array.Length - 1));
return array[index];
}
publicstaticstringGetCountry()
{
return GetItem(countries);
}
publicstaticstringGetCity(string country)
{
if (country == "Canada")
{
return GetItem(citiesCA);
}
elseif (country == "France")
{
return GetItem(citiesFR);
}
elseif (country == "Poland")
{
return GetItem(citiesPL);
}
elseif (country == "USA")
{
return GetItem(citiesUS);
}
elseif (country == "Japan")
{
return GetItem(citiesJP);
}
elseif (country == "Germany")
{
return GetItem(citiesGR);
}
else
{ // if (country === "United Kingdom") {return GetItem(citiesUK);
}
}
publicstaticstringGetStreet()
{
var num = Math.Round(GetNumber(100, 300)).ToString();
var road = GetItem(roadNames);
var suffix = GetItem(roadSuffixes);
return num + " " + road + " " + suffix;
}
publicstatic DateTime GetBirthday()
{
var year = DateTime.Now.Year - GetInteger(30, 50);
var month = GetNumber(10, 12);
var day = GetNumber(20, 27);
returnnew DateTime(year, (int)month, (int)day);
}
publicstatic DateTime GetDate()
{
var year = DateTime.Now.Year;
var month = GetNumber(10, 12);
var day = GetNumber(20, 27);
returnnew DateTime(year, (int)month, (int)day);
}
publicstaticstringPad(int num, int size)
{
var s = num + "";
while (s.Length < size)
{
s = "0" + s;
}
return s;
}
publicstaticstringGetPhotoMale(int id)
{
return"https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
}
publicstaticstringGetPhotoFemale(int id)
{
return"https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
}
privatestaticint maleCount = 0;
privatestaticint femaleCount = 0;
publicstaticstringGetPhoto(string gender)
{
if (gender == "male")
{
maleCount++;
if (maleCount > 24) maleCount = 1;
return GetPhotoMale(maleCount);
}
else
{
femaleCount++;
if (femaleCount > 24) femaleCount = 1;
return GetPhotoFemale(femaleCount);
}
}
publicstaticstringGetGenderPhoto(string gender)
{
return"https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
}
publicstaticstringGetCountryFlag(string country)
{
return"https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
}
publicstaticstringGetIncomeRange(double salary)
{
if (salary < 50000)
{
return"Low";
}
elseif (salary < 100000)
{
return"Average";
}
else
{
return"High";
}
}
}
}
// Data Source #2
using System;
using System.Collections.Generic;
using System.ComponentModel;
namespaceInfragistics.Samples
{
publicclassEmployee : INotifyPropertyChanged
{
publicstring ID { get; set; }
publicstring Address { get; set; }
publicdouble Age { get; set; }
publicstring Gender { get; set; }
publicstring FirstName { get; set; }
publicstring LastName { get; set; }
publicstring Name { get; set; }
publicstring Street { get; set; }
publicstring City { get; set; }
publicstring Email { get; set; }
publicstring Phone { get; set; }
publicstring Photo { get; set; }
publicdouble Salary { get; set; }
publicdouble Sales { get; set; }
publicstring Income { get; set; }
publicint Index { get; set; }
public DateTime Birthday { get; set; }
public List<Productivity> Productivity { get; set; }
privatestring _Country;
publicstring Country
{
get { return _Country; }
set { if (_Country != value) { OnCountryChanged(value); } }
}
publicstring CountryFlag { get; set; }
protectedvoidOnCountryChanged(string countryName)
{
// syncronizing country name and country flag
_Country = countryName;
CountryFlag = DataGenerator.GetCountryFlag(countryName);
City = DataGenerator.GetCity(countryName);
OnPropertyChanged("Country");
}
publicevent PropertyChangedEventHandler PropertyChanged;
protectedvirtualvoidOnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
publicclassProductivity
{
publicdouble Value { get; set; }
publicint Week { get; set; }
}
publicstaticclassEmployeeData
{
publicstatic 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;
}
publicstatic List<Productivity> GetProductivity(int weekCount)
{
var productivity = new List<Productivity>();
for (var w = 1; w <= weekCount; w++)
{
varvalue = 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<divclass="container vertical"><divclass="container vertical">@if (Employees != null)
{<IgbDataGridToolbarToolbarTitle="Sales Team"ColumnChooser="true"ColumnPinning="true"TargetGrid="@DataGridRef"/><divstyle="overflow: hidden"><IgbDataGridHeight="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"><IgbImageColumnIsEditable="false"Width="@("*>120")"Field="Photo"PaddingTop="5"PaddingBottom="5"PaddingRight="10"HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /><IgbTextColumnWidth="@("*>130")"Field="Name" />@*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@<IgbTemplateColumnWidth="@("*>160")"Field="Sales"CellUpdatingScript="onUpdatingSalesColumn"HorizontalAlignment="@CellContentHorizontalAlignment.Center" /><IgbNumericColumnWidth="@("*>130")"Field="Salary"PositivePrefix="$"ShowGroupingSeparator="true"MaxFractionDigits="0"MinFractionDigits="0" /><IgbNumericColumnWidth="100"Field="Age"HorizontalAlignment="@CellContentHorizontalAlignment.Center"/><IgbDateTimeColumnWidth="@("*>140")"Field="Birthday"HeaderText="Date of Birth" /><IgbImageColumnIsEditable="false"Width="@("*>110")"Field="CountryFlag"HeaderText="Country"PaddingTop="5"PaddingBottom="5"PaddingRight="10"HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />@*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@<IgbTemplateColumnWidth="@("*>170")"Field="Address"CellUpdatingScript="onUpdatingAddressColumn" /><IgbTemplateColumnWidth="@("*>130")"Field="Phone"CellUpdatingScript="onUpdatingPhoneColumn" /><IgbTextColumnWidth="@("*>120")"Field="Income" /><IgbTextColumnWidth="@("*>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(); }
}
protectedoverridevoidOnInitialized()
{
this.Employees = EmployeeData.Create(100, false);
}
privatevoidOnDataGridRef()
{
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 filefunctiononUpdatingSalesColumn(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)";
}
elseif (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";
}
functiononUpdatingAddressColumn(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;
}
}
functiononUpdatingPhoneColumn(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);
functiononSummarziePeopleGender(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
Getting Started
Dependencies
Please refer to these topics on adding the IgniteUI.Blazor package.