ag-grid (react) change rowStyle dynamically based on state

Question

I need to change the rowStyle of few rows based on the "state"

const [highlightRowData, setHighlightRowData] = useState(0);

lets say this gets changed dynamically by some user action outside the grid.

this is my implementation of rowStyle:

const rowStyle = (params) => {
    if (params.data.someData === highlightRowData) {
      return { background: "red" };
    }
    return { background: "yellow" };
};

but this state change doesn't get reflected in rowStyle.

ag-grid.com/javascript-grid-refresh ag-grid.com/javascript-grid-row-styles You'll have to use gridApi for that. Aggrid would have an earlier copy of rowStyle callback. Check and see if you can rebind it. — Pavan
rowStyle seems to keep a local copy of props/state. I couldn't find any way to refresh them through gridApi. — user2727410

wctiger wctiger · Accepted Answer · 2020-05-29T03:02:01

Not sure if you find an answer already, but like Pavan mentioned in the comment - you can checkout the gridApi.redrawRows() function described in the ag-grid doc in this link https://www.ag-grid.com/javascript-grid-refresh/#redraw-rows.

To achieve your goal here, you need to call this function after you set your highlightRowData state. As you are using hook it may look like this:

  useEffect(() => {
    // assume you have a gridApi reference here. If not yet, maybe you can hold it in a ref by useRef
    gridApi.redrawRows();
  }, [highlightRowData]);

ag-grid (react) change rowStyle dynamically based on state

1 Answers