Ag-grid: Change the color of cell only on value change

Question

I want to pass two use cases , Suppose the value of cell is initially 1

1. If I changed it 2 then color of cell should get changed.
2. If again I, changed back to 1 then color of the cell should not get changed.

Here, my 1st use case can successfully passed by using, fun onValueChanged() provided by ag-grid where I can track the old value and new value

(params.oldvalue !== params.newValue ? {color: red} : {}

but for 2nd case, the issue is that we cannot track the old value i,e 1 once it get changed from 2 to again 1, as then 2 becomes oldvalue and 1 becomes new value

Answer 1

It's important to realize that the grid is a UI component that displays your data. It displays whatever you have bound to it's 'rows' property.

The grid is not your data store. Your data store, or a (possibly mutated) copy of your data store is bound to the grid, but the grid is not your data.

I can't stress this enough, and I find myself repeating this advice quite a bit here on SO.

Once you realize this, it follows that ag-grid is not responsible for deciding whether the data that it is displaying differs from the data that you initially bound to it, from, say, an API call.

If you need to revert the 'changed' state of a piece of data, then you're going to have to keep two copies of the data (in your component, or your component's data store, if you have one): the initial data, and the data currently bound to the grid.

Then, your cell renderer (or css classRules, or whatever you are using to indicate the 'changed' state) can compare the current value to the original value, without depending on the behavior of the grid.