AgGridReact component not updating when autoGroupColumnDef changes

Question

I'm using ag-Grid with React to test their enterprise row grouping feature. I want to change the row grouping column name during runtime, but I haven't been able to do this.

When I make changes to AgGridReact's columnDefs prop, the changes are reflected in the table. But changes to the autoGroupColumnDef prop aren't rendered, even though the debug logs show that the change was detected. Here's an example in TypeScript (using React hooks for state):

import React, { FC, useState } from 'react';
import 'ag-grid-enterprise';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

const AgGridTest: FC = () => {
  const rowData = [
    { col1: 'a', col2: 0, col3: 0 },
    { col1: 'b', col2: 1, col3: 1 },
    { col1: 'c', col2: 2, col3: 0 },
    { col1: 'd', col2: 3, col3: 1 },
    { col1: 'a', col2: 4, col3: 0 },
    { col1: 'b', col2: 5, col3: 1 },
    { col1: 'c', col2: 6, col3: 0 },
    { col1: 'd', col2: 7, col3: 1 },
  ];
  const [columnDefs, setColumnDefs] = useState([
    { headerName: 'Column 1', field: 'col1', rowGroup: true }, // initial group column
    { headerName: 'Column 2', field: 'col2', rowGroup: false },
    { headerName: 'Column 3', field: 'col3', rowGroup: false },
  ]);

  const [autoGroupColumnDef, setAutoGroupColumnDef] = useState(
    {headerName: 'col1 Initial'} // auto group column name is 'col1 Initial' to start
  );

  const groupByColumn = (field: string): void => {
    // this successfully changes the grouping column...
    setColumnDefs(
      prevColumnDefs => prevColumnDefs.map(
        colDef => colDef.field === field ? 
          {...colDef, rowGroup: true} :
          {...colDef, rowGroup: false}
      )
    );
    // ...but this won't change the auto group column name!
    setAutoGroupColumnDef({
      headerName: `${field} Group Column`,
    });
  }

  return (
    <div className="ag-theme-balham" style={{ height: '300px' }}>
      <button onClick={() => groupByColumn('col1')}>Group by Column 1</button>
      <button onClick={() => groupByColumn('col2')}>Group by Column 2</button>
      <AgGridReact 
        rowData={rowData}
        columnDefs={columnDefs}
        autoGroupColumnDef={autoGroupColumnDef}
        debug // enable debug logs
      />
    </div>
  );
}

const App: React.FC = () => <AgGridTest />

export default App;

I tried calling the grid API's api.refreshHeader but that didn't work either:

const AgGridTest: FC = () => {
  // ...

  // store the api in an instance variable
  // when the on ready event makes it available
  const api = useRef<GridApi>();
  const onGridReady = (params: GridReadyEvent) => {
    api.current = params.api;
  }

  const groupByColumn = (field: string): void => {
    // ... re-assign the grouping cols ...
  }

  useEffect(() => {
    // run this after grouping changes have been rendered
    gridApi.current && gridApi.current.refreshHeader(); // doesn't work
  });

  return (
    <div>
      <AgGridReact
        onGridReady={onGridReady}
        // ...
      />
    </div>
  );
}

I tried looking for an API function to set the autoColumnGroupDef but I couldn't find one. The documentation only mentions setting properties through gridOptions. The API has a function for updating regular column definitions: api.setColumnDefs. This is what AgGridReact calls when the columnDefs prop changes (relevant code snippets here and here). But when the autoGroupColumnDef property is changed, AgGridReact simply overwrites the autoGroupColumnDef property in the gridOptions object (relevant code snippet). There doesn't seem to be any associated setter function.

There doesn't even seem to be a way to get at the auto group column objects. columnApi.getAllColumns/getColumnGroup only return regular columns. The auto group column list is kept separately in a private instance variable in columnController (relevant code snippet), which has a public getPrimaryAndSecondaryAndAutoColumns accessor exposed, except that we can't access the columnController API.

Any ideas on how can I modify the auto group column names at runtime? Or do I have to disable them and create my own group columns?

This question was asked here and here but they never received answers (and I don't understand the comment in the second question).

Unknown Unknown · Accepted Answer · 2019-08-17T17:23:16

As you are probably aware, ag-grid is pure js, and the React and Angular versions are wrappers around that.

I've been using the Angular version for about a year, and customizing it heavily, and I've found that many of the gridOptions, even though they are bound properties, have no effect after initial instantiation of the grid. I suspect that autoGroupColumnDef is one of these.

So, I would try creating your own column groups, as per the link that you referenced.

If that doesn't work, the (ugly) alternative is to destroy the grid, and then recreate it with the new gridOptions reflecting your new autoGroupColumnDef

One other hard-won piece of advice: If you use the setColumnDefs API to update the column definitions, it works fine, BUT, if you later want save and restore the grid state, getting the grid state from the API yields column names with "_1" appended to them, and if you set the column state with that, you get an error about the columns not being found. The solution is to set the columnDefs to an empty array first, and then set your actual columnDefs.

AgGridReact component not updating when autoGroupColumnDef changes

3 Answers

tl;dr

If you provide colIds but leave deltaColumnMode false...

If you don't provide any colIds and leave deltaColumnMode false...

If you provide colIds and set deltaColumnMode to true...