How to customize the row style based on the condition in React Grid?
This article explains how to customize the row style based on the condition in React Grid.
Customize the Grid row conditionally
You can apply row style dynamically (conditionally) based on the data source value using the Grid’s rowDataBound event.
In the below code example, rows are styled (text color) based on Freight column value in the rowDataBound event by adding css class to the row.ClassList.
Index.js
import { render } from 'react-dom';
import './index.css';
import { getValue } from '@syncfusion/ej2-base';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './data';
import { SampleBase } from './sample-base';
import './index.css';
export class Localbinding extends SampleBase {
rowDataBound(args) {
if (args.row) {
if (getValue('Freight', args.data) < 30){
args.row.classList.add('below-30');
} else if(getValue('Freight', args.data) < 80 ) {
args.row.classList.add('below-80');
} else {
args.row.classList.add('above-80');
}
}
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={data} allowPaging={true} rowDataBound={this.rowDataBound} pageSettings={{ pageCount: 5 }} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'/>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page]}/>
</GridComponent>
</div>
</div>);
}
}
render(<Localbinding />, document.getElementById('sample'));
Index.css
/* css */
.e-grid .e-row.below-30 .e-rowcell{
color: red;
}
.e-grid .e-row.below-80 .e-rowcell{
color:green;
}
.e-grid .e-row.above-80 .e-rowcell{
color:rgb(18, 6, 134);
}
Refer to the working sample for additional details and implementation: View Sample in Stackblitz
See also
Customize the cell style based on the condition in React Grid
Conclusion
We hope you enjoyed how to customize the row style based on the condition in React Grid.
You can refer to our React Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
