[!Note] Please note that this control has been deprecated and replaced with the Grid component, 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 Column Types
The Ignite UI for Blazor Data Table / Data Grid supports 5 column types, plus a Template Column type, giving you complete flexibility over the way your data is displayed in the Blazor data grid. Column types supported are Text column, Numeric column, DateTime column, Image column, ComboBox and Template.
Each column binds to data by setting the Field
property to the name of the corresponding property on the items of your underlying data source bound to the Blazor data grid.
Blazor Column Types Example
Text Column
The Blazor data grid is used for displaying formatted text in its associated cells. This is the default column type used to display data of the string type.
Numeric Column
The IgbNumericColumn
is used for displaying a formatted numeric value in its associated cells and enables control of decimal place placement within cells and displaying fractional digits.
DateTime Column
The IgbDateTimeColumn
is used for displaying Date objects in its associated cells and enables control to format the Date objects how you see fit.
Image Column
The IgbImageColumn
is used for displaying an image within a cell and exposes options for image stretch customization for cells by using its ImageStretchOption
option.
You can also choose what type of resource your image is by setting the ImageResourceType
option.
ComboBox Column
The IgbComboBoxColumn
is used for displaying a drop-down list from which your end users can select a single item.
Data binding can be achieved using an array of complex objects via the column's DataSource
property.
The TextField
property determines which value is shown when users make a selection.
The ValueField
property determines the bound value of the underlying data item selected. This is necessary if your list of objects have several properties.
Template Column
The IgbTemplateColumn
is used in conjunction with a cell template. It enables you to apply a custom template to the column's cell. This is done by handling the CellUpdating
event of the template column.
The CellUpdating
event's arguments expose the IgbTemplateColumn
that fires the event as well as a IgbTemplateCellUpdatingEventArgs
parameter. This event arguments parameter exposes a Content
property that returns the HTMLDivElement that will be placed within the associated cells of the column. You can then append new elements to this div.
The IgbTemplateCellUpdatingEventArgs
also exposes a CellInfo
property that you can use to get a TemplateCellInfo
object. This object exposes information about the cell and the row, such as the index, underlying data item, and appearance of the cell.
Sparkline Column
You can embed Sparkline components in IgbTemplateColumn
to show more complex data structures.
Refer to the Column Sparkline topic for information on how to do this.
Code Snippet
The following demonstrates the implementation of each of the columns described in this topic:
The following is a sample data source to use with the above columns.
<IgbDataGrid Height="100%" Width="100%"
DefaultColumnMinWidth="120"
AutoGenerateColumns="false"
DataSource="DataSource">
<IgbTextColumn Field="FirstName" HeaderText="First Name" />
<IgbTextColumn Field="LastName" HeaderText="Last Name" />
<IgbComboBoxColumn Field="City" />
<IgbTemplateColumn Field="Address" HeaderText="Address" CellUpdatingScript="onUpdatingAddressColumn" />
<IgbImageColumn Field="Photo" HeaderText="Photo" />
<IgbNumericColumn Field="Age" HeaderText="Age" />
<IgbDateTimeColumn Field="Birthday" HeaderText="Date of Birth" />
</IgbDataGrid>
// In JS file:
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;
}
}
igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);
API References
IgbGrid
CellInfo
CellUpdating
IgbComboBoxColumn
Content
DataSource
IgbDateTimeColumn
Field
IgbImageColumn
ImageResourceType
ImageStretchOption
IgbNumericColumn
TemplateCellInfo
IgbTemplateCellUpdatingEventArgs
IgbTemplateColumn
TextField
ValueField