AgGrid Customized (Selected) Row Styling

Question

I am trying to add customized styling to every second row in my AgGrid. I am using the following snippet of code in my onGridReady:

gridOptions.getRowStyle = function (params) {
  if (params.node.rowIndex % 2 === 0) {
    return { background: "#f0f1f4" };
};

The issue I am having is I would like to add a variation indicating whether the row is selected or not. Currently the style remains the same either way. What should I add to my code to achieve this?

Thank you in advance for reading and responding.

Answer 1

AgGrid exposes multiple class names of each row elements to describe its current state (ag-row, ag-row-odd, ag-row-selected...). You can take advantage of that information to override the row style if it's currently selected like below:

.ag-theme-alpine .ag-row.ag-row-odd {
  background-color: pink;
}
.ag-theme-alpine .ag-row.ag-row-odd.ag-row-selected {
  background-color: red;
}

Live Demo