Column state in ag-grid is out of sync

After upgrading ag-grid from 26 to 29, I started to have some problems with ColumnState.
Could you explain what I am doing wrong or what change has been applied to 29 so that it won’t work anymore?
I expect getColumnState to return the same as what we recently saved by applyColumnState.

So here is my grid:

function useGridState(): {
     onGridReady: (param: GridReadyEvent) => void;
} => {

  const gridApi = useRef<GridApi | null>(null);
  const columnApi = useRef<ColumnApi | null>(null);

  const onGridReady = (params: GridReadyEvent) => {
    gridApi.current = params.api;
    columnApi.current = params.columnApi;

    const result = columnApi.current.applyColumnState({
      state: NEW_SORT_ORDER,
    });

    // SUCCESS: column state is exactly NEW_SORT_ORDER
    console.log("ready NEW_SORT_ORDER", columnApi.current.getColumnState())
  };

   return { onGridReady };
}

function MyGrid() {
   const { onGridReady } = useGridState();

   const handleSortModelChange = (event: SortChangedEvent) => {

     // FAILED: Here I am expecting the NEW_SORT_ORDER
     // which was saved onGridReady
     // but this state is empty
     console.log("newState", event.columnApi.getColumnState())
   };

   return (
      <Grid onGridReady={onGridReady} onSortChanged={handleSortModelChanged} />
   )
}

So the logic is next:

  • I am setting up NEW_SORT_ORDER when the grid is ready, and applyColumnState automatically triggers onSortChanged;
  • Inside onSortChanged I am getting columnApi from params and expected state to be the same as in onGridReady but they are different;

What the problem here could be?
Is it possible that I am calling different columnApi in my component and in my hook?

Br, Igor

Leave a Comment