title: AgGridReact component not updating when autoGroupColumnDef changes
body: <p>I'm using ag-Grid with React to test their enterprise <a href="https://www.ag-grid.com/javascript-grid-grouping" rel="nofollow noreferrer">row grouping</a> feature. I want to change the row grouping column name during runtime, but I haven't been able to do this.</p>
  
  <p>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):</p>
  
  <pre class="lang-js prettyprint-override"><code>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 = () =&gt; {
    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 =&gt; {
      // this successfully changes the grouping column...
      setColumnDefs(
        prevColumnDefs =&gt; prevColumnDefs.map(
          colDef =&gt; 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 (
      &lt;div className="ag-theme-balham" style={{ height: '300px' }}&gt;
        &lt;button onClick={() =&gt; groupByColumn('col1')}&gt;Group by Column 1&lt;/button&gt;
        &lt;button onClick={() =&gt; groupByColumn('col2')}&gt;Group by Column 2&lt;/button&gt;
        &lt;AgGridReact 
          rowData={rowData}
          columnDefs={columnDefs}
          autoGroupColumnDef={autoGroupColumnDef}
          debug // enable debug logs
        /&gt;
      &lt;/div&gt;
    );
  }
  
  const App: React.FC = () =&gt; &lt;AgGridTest /&gt;
  
  export default App;
  </code></pre>
  
  <p>I tried calling the grid API's <a href="https://www.ag-grid.com/javascript-grid-api/#refresh" rel="nofollow noreferrer">api.refreshHeader</a> but that didn't work either:</p>
  
  <pre class="lang-js prettyprint-override"><code>const AgGridTest: FC = () =&gt; {
    // ...
  
    // store the api in an instance variable
    // when the on ready event makes it available
    const api = useRef&lt;GridApi&gt;();
    const onGridReady = (params: GridReadyEvent) =&gt; {
      api.current = params.api;
    }
  
    const groupByColumn = (field: string): void =&gt; {
      // ... re-assign the grouping cols ...
    }
  
    useEffect(() =&gt; {
      // run this after grouping changes have been rendered
      gridApi.current &amp;&amp; gridApi.current.refreshHeader(); // doesn't work
    });
  
    return (
      &lt;div&gt;
        &lt;AgGridReact
          onGridReady={onGridReady}
          // ...
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I tried looking for an API function to set the autoColumnGroupDef but I couldn't find one. The <a href="https://www.ag-grid.com/javascript-grid-grouping/#configuring-auto-column" rel="nofollow noreferrer">documentation</a> only mentions setting properties through gridOptions. The API has a function for updating regular column definitions: <a href="https://www.ag-grid.com/javascript-grid-api/#columns" rel="nofollow noreferrer">api.setColumnDefs</a>. This is what AgGridReact calls when the columnDefs prop changes (relevant code snippets <a href="https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-react/src/agGridReact.ts#L163-L170" rel="nofollow noreferrer">here</a> and <a href="https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/components/componentUtil.ts#L163-L165" rel="nofollow noreferrer">here</a>). But when the autoGroupColumnDef property is changed, AgGridReact simply overwrites the autoGroupColumnDef property in the gridOptions object (<a href="https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/components/componentUtil.ts#L115-L122" rel="nofollow noreferrer">relevant code snippet</a>). There doesn't seem to be any associated setter function.</p>
  
  <p>There doesn't even seem to be a way to get at the auto group column objects. <a href="https://www.ag-grid.com/javascript-grid-column-api/" rel="nofollow noreferrer">columnApi.getAllColumns/getColumnGroup</a> only return regular columns. The auto group column list is kept separately in a private instance variable in columnController (<a href="https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/columnController/columnController.ts#L143" rel="nofollow noreferrer">relevant code snippet</a>), which has a public getPrimaryAndSecondaryAndAutoColumns accessor exposed, except that we can't access the columnController API.</p>
  
  <p>Any ideas on how can I modify the auto group column names at runtime? Or do I have to disable them and <a href="https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup" rel="nofollow noreferrer">create my own group columns</a>?</p>
  
  <p>This question was asked <a href="https://stackoverflow.com/questions/56385704/how-to-customize-autogroupcolumndefs-headergroup-cell">here</a> and <a href="https://stackoverflow.com/questions/56982299/updating-autogroupcolumndef-object-doesnt-update-the-table">here</a> but they never received answers (and I don't understand the comment in the second question).</p>