How To Do Styling Of Your Ag Grid Rows
Posted By : Deepak Rawat | 29-Apr-2018
In ag-grid you can customize your rows in following ways:
- Row Style: provide css style for rows
- Row Class: provide css class for rows
- Row Class Rules: provide rules for css class.
Row Style
For your rows if you want to use css styles then you can use:
- rowStyle: This property is used to set css style for all rows, provide css style directly to this property.
- getRowStyle: This is a callback which helps you to set style for specific rows.
gridOptions.rowStyle = {background: 'red'};
gridOptions.getRowStyle = function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: 'blue' }
}
}
Row Class
If you want to add css class for grid rows then use these properties:
- rowClass: Use this property to assign a class to each row. You can provide a single class as string or array of classes.
- getRowClass: This is a callback which helps you to set css class for specific rows.
gridOptions.rowClass = 'green-class';
gridOptions.getRowClass = function(params) {
if (params.node.rowIndex % 2 === 0) {
return 'shaded-effect';
}
}
Row Class Rules
For applying rules for certain class use gridOptions.rowClassRules. You can provide either javascript object to this property which contains classes as keys and expression as values, if expression gets true the the class gets applied.
When you use function for this then the params will have the attributes: data, rowIndex, node, context and api.
gridOptions.rowClassRules: {
// apply green to 2008
'green-outer': function(params) { return params.data.year === 2008},
// apply amber 2004
'amber-outer': function(params) { return params.data.year === 2004},
// apply red to 2000
'red-outer': function(params) { return params.data.year === 2000}
}
When you refresh a row or a cell then the effect of these styles are as follows:
- rowStyle: All styles are applied again but if there is same old style the new style will override it.
- rowClass: All new classes will be applied again, but if there is same old class then it’ll not be removed.
- rowClassRules: when any rule gets true then the class will get applied else it’ll get removed.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Deepak Rawat
Deepak is a Web and Mobile application Sr. Lead Frontend developer and good working experience with JQuery , AngularJS , Javascript and PhoneGap. His hobbies are listening to music and photography.