Add style if group row is open, in AgGrid

Question

I use AgGrid and can't find in the documentation how to stylize group row, if group row is open

Tried use this func, but did't get expecting result

const getRowClass = (params) => {
    if (params.node.expanded === false) {
      return "group_close";
    }
    if (params.node.expanded === true) {
      return "group_open";
    }
  };

Answer 1

You can use the customise ag-grid global style by create style sheet file and importing in your ag-grid component

index.tsx

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

const getRowClass = (params: RowClassParams) => {
    if (!params.node.expanded) {
      return "group_close";
    }
    if (params.node.expanded) {
      return "group_open"; 
    }
};

const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);

return(
<div style={gridStyle} className="ag-theme-alpine">
  <AgGridReact/>
</div>
)

custom.css

.ag-theme-alpine {
  --ag-grid-size: 10px;
  --ag-list-item-height: 40px;
  ... 
}
.group_open {
  ...
}

.group_close {
  ...
}

[ag-grid]Row class rules with style

Hope it helps :)