Using Cell Rendering In Ag Grid
Posted By : Deepak Rawat | 28-Feb-2018
In this blog, I will tell you guys about cell rendering in Ag-Grid. Ag-grid provides us a facility to change each cell in the grid using the cell rendering feature.
By default, Ag-grid renders the values as the string. If you want to render using some complex data then you’ll use cell renderer.
For using cell renderer you just have to use colDef.cellRenderer in your column definitions. Following type of cell renderer can be used:
- Function: it is used to return an HTML or DOM element for display
- Class: you can directly provide any class which is used as cell renderer.
- String: name of the cell renderer which is registered with the grid.
Below code will demonstrate the above method type:
// 1 - String - The name of a cell renderer registered with the grid.
var colDef2 = {
cellRenderer: 'agGroupCellRenderer',
...
}
// 2 - Class - Provide your own cell renderer component directly without registering.
var colDef3 = {
cellRenderer: MyCustomCellRendererClass,
...
}
// 3 - Function - A function that returns an HTML string or DOM element for display
var colDef3 = function(params) {
// put the value in bold
return 'Value is '+params.value+'';
}
You can also use multiple cell renderers for a single column according to the requirement, for this use colder.cellRendererSelector callback, in this callback you’ll get params which will provide you the rows data, using which you can apply the renderer conditionally.
When you use grouping then you can also use cell rendering feature, you can also use the
To configure group cell renderer default cell renderer tasks some
colDef = {
// tell the grid we want to show group values in this column
showRowGroup: true,
// set the cell renderer to 'group'
cellRenderer:'agGroupCellRenderer',
// provide extra params to the cellRenderer
cellRendererParams: {
suppressCount: false, // turn off the row count
checkbox: true, // enable checkbox selection
innerRenderer: myInnerRenderer, // provide an inner renderer
footerValueGetter: myFooterValueGetter // provide a footer value getter
}
...
};
Ag-grid also provides two more cell renderers for animating the value changes in the cell, which are:
-
agAnimateShowChangeCellRenderer: will show the older value with an upward arrow, showing increase or decrease in the value, this is temporarily used by the grid, and
it fades out the older value. -
agAnimateSlideCellRenderer: this will slide the older value with fade effect.
If you are using the grid in Angular then you can provide the whole component as a cell renderer, for this you have to use cellRendererFramework.
Thanks
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.