Editable group cell in ag grid

Question

Using editable: true makes all cells editable on double click except group cell. I want group cell also editable.

I tried to make group cell editable programmatically with no success.

this.gridApi.startEditingCell({
  rowIndex:0,
  colKey: 'ag-Grid-AutoColumn'
});

Here is the minimal version. In this I want group cell Toyota, Ford, Porsche to be editable.

import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.css";
import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine.css";
import "./styles.css";

import React, { useState } from "react";
import { AgGridColumn, AgGridReact } from "ag-grid-react";
import "ag-grid-enterprise";

export default function App() {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const [rowData, setRowData] = useState([
    { make: "Toyota", model: "Celica", price: 350000 },
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        rowSelection="multiple"
        groupSelectsChildren={true}
        autoGroupColumnDef={{
          headerName: "Model",
          field: "model",
          cellRenderer: "agGroupCellRenderer",
          editable: true,
          cellRendererParams: {
            checkbox: true
          }
        }}
      >
        <AgGridColumn
          field="make"
          sortable={true}
          filter={true}
          checkboxSelection={true}
          rowGroup={true}
          hide={true}
        ></AgGridColumn>
        <AgGridColumn hide={true} field="model"></AgGridColumn>
        <AgGridColumn hide={true} field="price"></AgGridColumn>
      </AgGridReact>
    </div>
  );
}

Answer 1

Set GridOptions.enableGroupEdit to true to make row groups editable

<AgGridReact
  enableGroupEdit
  autoGroupColumnDef={{
    headerName: "Model",
    field: "model",
    editable: true,
  }}
  onCellEditingStopped={(e) => {
    const { newValue, node, api } = e;
    if (node.group) {
      node.groupData["ag-Grid-AutoColumn"] = newValue;
      api.refreshCells({
        force: true,
        rowNodes: [node]
      });
    }
  }}
  {...}
/>

Live Demo