I want to apply an additional CSS class to all selected cells within a range selection in AG Grid. I’ve been struggling with this for days and can’t seem to find a solution.

function applyValue() {
        const value = document.getElementById('cellValue').value;
        const className = document.getElementById('className').value;
        const selectedCells = gridApi.getCellRanges();
        if (!selectedCells || selectedCells.length === 0) return;

        selectedCells.forEach(range => {
            const startRow = Math.min(range.startRow.rowIndex, range.endRow.rowIndex);
            const endRow = Math.max(range.startRow.rowIndex, range.endRow.rowIndex);
            const columns = range.columns.map(col => col.getColId());

            for (let rowIndex = startRow; rowIndex <= endRow; rowIndex++) {
                const rowNode = gridApi.getRowNode(rowIndex.toString());
                columns.forEach(colId => {
                    rowNode.setDataValue(colId, value);
                    rowNode.data.className = className; // Assign the class name to the cell

                    /// .cellClass = 'my-new-className';
                    
                    gridApi.refreshCells({
                        force: true,
                        columns: [colId],
                        rowNodes: [rowNode]
                    });
                });
            }
        });

        closePopup();
    }

I use this function to change the value, an on the same i would like to add an additional Class to each cell.

I know that the correct using was className, but i didn’t know how i have to use it.