cell background color is not visible while selecting particular row on ag-grid

Question

I am currently working on agGrid

Unable to see cell background color when i select particular row in ag-grid

(Here row color overrides).

check below screen shot for reference

enter image description here

enter image description here

AgGrid version 27.2.1

It's very helpful for me if you guys find the solution

Thanks in advance

Here cell color should be visible when we select row

Answer 1

Based on the image you provided, it looks like you need cellClass to add a class name to cells in a specific column. Then, you can manipulate the background color of that class using a custom stylesheet file.

Example:

javascript

// Demo: https://plnkr.co/edit/1NeMKcO0m2bqjI19?open=index.jsx&preview

import 'ag-grid-community/styles/ag-theme-alpine.css'; // if using alpine theme
import 'ag-grid-community/styles/ag-grid.css';
import './styles.css';

... 
// Provides cell class

const columnDefs = [
    // return same class for each row
    {
        headerName: 'Static Class',
        field: 'static',
        cellClass: 'my-class'
    },
    // return same array of classes for each row
    {
        headerName: 'Static Array of Classes',
        field: 'staticArray',
        cellClass: ['my-class','my-class1'],
    },
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>

css

.ag-theme-alpine {
  --ag-selected-row-background-color: green;
}

.my-class {
  background-color: orange;
}