Ag-grid how to update a specific cell style after click

Question

I use refreshCells to update a specific cell style after clicking on it. However, this does not work, and when I set refreshCells({ force: true }), the whole column updates new style that I don't want. Any suggestions please?

    vm.gridOptions = {
        columnDefs: vm.columnDefs,
        rowData: vm.rows,
        angularCompileRows: true,
        defaultColDef: {
            sortable: true,
            resizable: true,
        },
        onCellClicked: onCellClicked,
        onGridReady: function (params) {

        }
    }

    function onCellClicked(params) {
        const focusedCell =  params.api.getFocusedCell();
        focusedCell.column.colDef.cellStyle = { 'background-color': '#b7e4ff' };
        params.api.refreshCells({
            force: true // this updates the whole column, not only the clicked cell
        });
    }

Answer 1

I solved this by setting the specific rowNodes and columns.

    function onCellClicked(params) {
        const focusedCell =  params.api.getFocusedCell();
        const rowNode = params.api.getRowNode(focusedCell.rowIndex);
        const column = focusedCell.column.colDef.field;
        focusedCell.column.colDef.cellStyle = { 'background-color': '#b7e4ff' };
        params.api.refreshCells({
            force: true,
            columns: [column],
            rowNodes: [rowNode]
        });
    }