[FIXED] How to customize hover colour for each row in ag grid react

Issue

I am using react grid and I would like to set the hover color and rowSelectedColor for each row differently, When I tried overwriting the hover background color it applies to every row not each row.

example - https://plnkr.co/edit/UwszBQxteLy9vPE3

I tried using rowClassRule for achieving the functionality but it did not worked, I am expecting row should have there own unique hover color and selected background color based on some condition ex: age>10 then hover-color: Red

Solution

Your code seems working to me, you just didn't passed the correct classname to your other rules.

Here's the code edited, with one new class

// main.js
const gridOptions = {
  rowData: getData(),
  columnDefs: [
    { headerName: 'Employee', field: 'employee' },
    { headerName: 'Number Sick Days', field: 'sickDays', editable: true },
  ],
  rowClassRules: {
    // row style function
    'warning': (params) => {
      var numSickDays = params.data.sickDays;
      return numSickDays > 1 && numSickDays <= 5;
    },
    // row style expression
    'breach': 'data.sickDays >= 5',
    'new': 'data.sickDays >= 7'
  },
};

For the style you don't need to put !important to override, try to understand why the style you want does not apply before using !important

// styles.css

.warning {
  background-color: sandybrown;
}
.warning:hover {
  background-color: purple;
}

// you set the class to 'blue' but the class did not exists in your style, so I set it to 'breach' because that's a class you had
.breach {
  background-color: lightcoral;
}
.breach:hover {
  background-color: black;
  color: white;
}

.new {
  background-color: greenyellow;
}

The edited and working sandbox : https://plnkr.co/edit/CijuUinXkVUJkRFG

Answered By - maxencedhx
Answer Checked By - - Marie Seifert (ReactFix Admin)