React Hierarchical Grid Conditional Styling
The Ignite UI for React Conditional Styling feature in React Hierarchical Grid allows custom styling on a row or cell level. The IgrHierarchicalGrid
Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.
Hierarchical Grid Conditional Row Styling
The IgrHierarchicalGrid
component in Ignite UI for React provides two ways to conditional styling of rows based on custom rules.
Further in this topic we will cover both of them in more details.
Using Row Classes
You can conditionally style the IgrHierarchicalGrid
rows by setting the rowClasses
input and define custom rules.
<IgrHierarchicalGrid id ="grid" height ="600px" width ="100%" rowClasses ={rowClasses} >
</IgrHierarchicalGrid >
tsx
The rowClasses
input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
const rowClasses = {
activeRow: (row: IgrRowType) => row.index === 0
}
tsx
.activeRow {
border : 2px solid #fc81b8 ;
border-left : 3px solid #e41c77 ;
}
css
Demo
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import { IgrRowType } from "@infragistics/igniteui-react-grids" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private hierarchicalGrid1: IgrHierarchicalGrid
private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
this .hierarchicalGrid1 = r;
this .setState({});
}
private rowIsland1: IgrRowIsland
private rowIsland2: IgrRowIsland
private rowIsland3: IgrRowIsland
constructor (props: any ) {
super (props);
this .hierarchicalGrid1Ref = this .hierarchicalGrid1Ref.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
rowClasses ={this.webGridRowClassesHandler}
ref ={this.hierarchicalGrid1Ref} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
minWidth ="115px"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
minWidth ="88px"
maxWidth ="230px"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false"
rowClasses ={this.webGridRowClassesHandler}
name ="rowIsland1" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false"
rowClasses ={this.webGridRowClassesHandler}
name ="rowIsland2" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false"
rowClasses ={this.webGridRowClassesHandler}
name ="rowIsland3" >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
public webGridRowClassesHandler = {
activeRow: (row: IgrRowType) => row.index % 2 === 0
};
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
.activeRow {
border-top : 2px solid #fc81b8 ;
border-left : 3px solid #e41c77 ;
}
css コピー
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Using Row Styles
The IgrHierarchicalGrid
control exposes the rowStyles
property which allows conditional styling of the data rows. Similar to rowClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).
The callback signature for both rowStyles
and rowClasses
is:
(row: IgrRowType) => boolean
tsx
Let's define our styles:
public rowStyles = {
background :(row: RowType ) => row.data['HasGrammyAward' ] ? '#eeddd3' : '#f0efeb' ,
'border-left' : (row: RowType ) => row.data['HasGrammyAward' ] ? '2px solid #dda15e' : null
};
public childRowStyles = {
'border-left' : (row: RowType ) => row.data['BillboardReview' ] > 70 ? '3.5px solid #dda15e' : null
};
typescript
<IgrHierarchicalGrid autoGenerate ="true" rowStyles ={rowStyles}
height ="580px" width ="100%" >
<IgrRowIsland childDataKey ="Albums" autoGenerate ="true" rowStyles ={childRowStyles} >
</IgrRowIsland >
</IgrHierarchicalGrid >
tsx
Demo
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import { IgrPropertyEditorPropertyDescriptionButtonClickEventArgs } from "@infragistics/igniteui-react-layouts" ;
import { IgrGrid, IgrRowType } from "@infragistics/igniteui-react-grids" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private hierarchicalGrid1: IgrHierarchicalGrid
private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
this .hierarchicalGrid1 = r;
this .setState({});
}
private rowIsland1: IgrRowIsland
constructor (props: any ) {
super (props);
this .hierarchicalGrid1Ref = this .hierarchicalGrid1Ref.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
rowStyles ={this.webHierarchicalGridRowStylesHandler}
ref ={this.hierarchicalGrid1Ref} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
minWidth ="115px"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
minWidth ="88px"
maxWidth ="230px"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false"
rowStyles ={this.webHierarchicalGridChildRowStylesHandler}
name ="rowIsland1" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false" >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
public webHierarchicalGridRowStylesHandler = {
background:(row: IgrRowType) => row.data['HasGrammyAward' ] ? '#eeddd3' : '#f0efeb' ,
'border-left' : (row: IgrRowType) => row.data['HasGrammyAward' ] ? '2px solid #dda15e' : null
};
public webHierarchicalGridChildRowStylesHandler = {
'border-left' : (row: IgrRowType) => row.data['BillboardReview' ] > 70 ? '3.5px solid #dda15e' : null
};
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Hierarchical Grid Conditional Cell Styling
Overview
The IgrHierarchicalGrid
component in Ignite UI for React provides two ways to conditional styling of cells based on custom rules.
By setting the IgrColumn
input cellClasses
to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.
Using Cell Classes
You can conditionally style the IgrHierarchicalGrid
cells by setting the IgrColumn
cellClasses
input and define custom rules.
<IgrColumn field ="BeatsPerMinute" dataType ="Number" cellClasses ={this.grammyNominationsCellClassesHandler} > </IgrColumn >
tsx
The cellClasses
input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
public grammyNominationsCellClassesHandler = {
downFont: (rowData: any , columnKey: any ): boolean => rowData[columnKey] < 5,
upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};
tsx
.upFont {
color : green !important ;
}
.downFont {
color : red !important ;
}
css
Demo
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private hierarchicalGrid1: IgrHierarchicalGrid
private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
this .hierarchicalGrid1 = r;
this .setState({});
}
private column1: IgrColumn
constructor (props: any ) {
super (props);
this .hierarchicalGrid1Ref = this .hierarchicalGrid1Ref.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
ref ={this.hierarchicalGrid1Ref} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
minWidth ="115px"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
minWidth ="88px"
maxWidth ="230px"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String"
resizable ="true"
cellClasses ={this.webGridGrammyNominationsCellClassesHandler}
name ="column1" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false" >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
public webGridGrammyNominationsCellClassesHandler = {
downFont: (rowData: any , columnKey: any ): boolean => rowData[columnKey] < 5,
upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
.upFont {
color : green !important ;
}
.downFont {
color : red !important ;
}
css コピー
By using the IgrColumn
input cellStyles
which accepts an object literal where the keys are style properties and the values are expressions for evaluation.
The callback signature for both cellStyles
and cellClasses
is now changed to:
(rowData: any , columnKey : string , cellValue : any , rowIndex : number ) => boolean
ts
Using Cell Styles
Columns expose the cellStyles
property which allows conditional styling of the column cells. Similar to cellClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).
Let's define our styles:
const cellStylesHandler = {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null ,
color: (rowData, columnKey, cellValue, rowIndex) => {
if (columnKey === "Debut" ) {
return cellValue > 2000 ? "#28a745" : "#dc3545" ;
}
return undefined ;
}
}
tsx
<IgrColumn cellStyles ={cellStylesHandler} > </IgrColumn >
tsx
Demo
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import { IgrPropertyEditorPropertyDescriptionButtonClickEventArgs } from "@infragistics/igniteui-react-layouts" ;
import { IgrGrid, IgrRowType } from "@infragistics/igniteui-react-grids" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private hierarchicalGrid1: IgrHierarchicalGrid
private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
this .hierarchicalGrid1 = r;
this .setState({});
}
private column1: IgrColumn
private column2: IgrColumn
private column3: IgrColumn
private column4: IgrColumn
private column5: IgrColumn
private column6: IgrColumn
constructor (props: any ) {
super (props);
this .hierarchicalGrid1Ref = this .hierarchicalGrid1Ref.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
ref ={this.hierarchicalGrid1Ref} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
resizable ="true"
cellStyles ={this.webHierarchicalGridCellStylesHandler}
name ="column1" >
</IgrColumn >
<IgrColumn
field ="HasGrammyAward"
header ="Has Grammy Award?"
dataType ="Boolean"
resizable ="true"
cellStyles ={this.webHierarchicalGridCellStylesHandler}
name ="column2" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
minWidth ="115px"
resizable ="true"
cellStyles ={this.webHierarchicalGridCellStylesHandler}
name ="column3" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
minWidth ="88px"
maxWidth ="230px"
resizable ="true"
cellStyles ={this.webHierarchicalGridCellStylesHandler}
name ="column4" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String"
resizable ="true"
cellStyles ={this.webHierarchicalGridCellStylesHandler}
name ="column5" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String"
resizable ="true"
cellStyles ={this.webHierarchicalGridCellStylesHandler}
name ="column6" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false" >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String"
resizable ="true" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
public webHierarchicalGridCellStylesHandler = {
background: (rowData: any , columnKey: any , cellValue: any , rowIndex: any ) => rowIndex % 2 === 0 ? "#EFF4FD" : null ,
color: (rowData: any , columnKey: any , cellValue: any , rowIndex: any ) => {
if (columnKey === "Debut" ) {
return cellValue > 2000 ? "#28a745" : "#dc3545" ;
}
return undefined ;
}
};
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Known issues and limitations
If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met.
let backgroundClasses = {
myBackground: (rowData: any , columnKey: string ) => {
return rowData.Col2 < 10;
}
};
function editDone(grid, evt) {
backgroundClasses = {...backgroundClasses};
}
<IgrHierarchicalGrid id ="grid1" height ="500px" width ="100%" onCellEdit ={editDone} >
<IgrColumn id ="Col1" field ="Col1" dataType ="number" cellClasses ={backgroundClasses} > </IgrColumn >
<IgrColumn id ="Col2" field ="Col2" dataType ="number" editable ="true" cellClasses ={backgroundClasses} > </IgrColumn >
<IgrColumn id ="Col3" field ="Col3" header ="Col3" dataType ="string" cellClasses ={backgroundClasses} > </IgrColumn >
</IgrHierarchicalGrid >
tsx
API References
Additional Resources
Our community is active and always welcoming to new ideas.