Styling an edited cell using ag grid with React

Question

I attempt to styles an edited cell by taking advantage of onCellValueChanged in colDef props but It does not work as attended. I am still new using Ag Grid and nothing about styling an edited cell is documented or maybe I missed it.

The code looks like this

const defaultColDef = useMemo<ColDef>(() => {
    return {
      resizable: true,
      headerComponent: "customHeader",
      onCellValueChanged: ({ colDef, api, node, column, columnApi }) => {
        colDef.cellClass = p => {
          return (p.colDef.field ?? p.colDef.colId) === (colDef.field ?? colDef.colId) && p.rowIndex === node?.rowIndex
            ? "dirty-cell"
            : "";
        };
        api.refreshCells({ rowNodes: [node!], force: true });
      }
    };
  }, []);

<AgGridReact
   ref={gridRef}
   defaultColDef={defaultColDef}
   onCellValueChanged={onCellChange}
   rowData={rows}
   columnDefs={columns}
   getRowId={param => param.data.id ?? param.data.virtual_id}
   components={{ customHeader: CustomHeaderCell }}
   onCellDoubleClicked={onCellDoubleClicked}
   onCellKeyDown={onCellKeyDown}
   rowClassRules={rowClassRules}
   gridOptions={{ tooltipShowDelay: 0 }}
   onDragStopped={onDragStopped}
/>

Hope my question is clear Thanks

Answer 1

I used cellStyle in my code. It compares old and new value, if value is changed the css style is applied to that cell

onCellValueChanged = (params) => {
        if (params.oldValue !== params.newValue) {
            params.column.colDef.cellStyle = (value) => { 
                 return value.rowIndex.toString() === params.node.id 
                        ? { 'backgroundColor': '#9ac1fc' } : {} 
            };
            params.api.refreshCells({
                force: true,
                columns: [params.column.getId()],
                rowNodes: [params.node]
            });
        }
}

The code is in JS and you may need to convert in TypeScript, if some syntax error occured.