ag-grid（反应）根据 state 动态更改 rowStyle

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.

Answer 1

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]);