I am working with both the enterprise and community editions of Ag-Grid in a React TypeScript setup. The application allows users to dynamically update data on the Ag-Grid table, with features like column and row filtering, grouping, sorting, and pivoting.

I am successfully saving the following states:

Column State
Filter Model
Pivot Mode
Toggle Tool Panel
In my setup, I have a search bar that sets variables for an API call, which loads the rowData into Ag-Grid. Additionally, I have a sidebar that reloads the previously saved states. The sidebar first triggers the API call to fetch the data and then loads the saved state.

The issue arises after the initial load of the Ag-Grid table, which works as expected. However, on the second trigger—whether it’s from a change in the search bar variables or from reloading the grid via the sidebar—the Ag-Grid table does not re-render. Logging shows that the rowData is being reset, but the table itself doesn’t refresh. I’ve tried using redraw and refresh options, but they haven’t resolved the issue.

Notably, I am using the onGridReady function to set the rowData, rather than useEffect.

Is there a way to ensure that the Ag-Grid re-renders correctly after the rowData is updated?