Accepted answer

1.Cell Renderer Function

A cell renderer function should be used when you dont have refresh requirements and this is mentioned in the ag-grid docs.

As per docs-

Use the function variant of a cell renderer if you have no refresh or cleanup requirements (ie you don't need to implement the refresh or destroy functions).

This is the reason why your cell renderer function does not refresh.

To solve your problem, you can do this -

      onCellValueChanged={function(params) {
        if(params.column.getId() === 'country') {

2.Cell Renderer Component

The reason your GridCellClass works on api.refreshCells() is because the grid handles the refresh() for you since you have not implemented refresh() in your GridCellClass component.

What that means is your component will be destroyed and recreated if the underlying data changes.


Also note that using api.refreshCells() won't work as is because ag-grid uses change detection to refresh cells while determining what cells to refresh and since essentially the value of your other 2 columns do not change but infact they are changed in the cellRenderer itself.

However the below works for GridCellClass because you disable change detection by passing force:true,

          force: true

From docs-

Change detection will be used to refresh only cells who's display cell values are out of sync with the actual value. If using a cellRenderer with a refresh method, the refresh method will get called.

Related Query

More Query from same tag