aggrid does not show group column

Question

I have below code to group columns. But this does not group columns. I am using sample code.

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';


import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  
  const [rowData, setRowData] = useState();

  useEffect(() => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then(result => result.json())
    .then(rowData => setRowData(rowData))
  }, []);

  const defaultColDef = useMemo( ()=> ( {
    resizable: true, 
    enableRowGroup: true
  }), []);

  const [columnDefs, setColumnDefs] = useState([
    { field: 'athlete', rowGroup: true },
    { field: 'age', headerName: 'Age12' },
    { field: 'country' , rowGroup: true},
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
    { field: 'total' }
  ]);

  return (
    <>
       <div className="ag-theme-alpine" style={{height: 700, width: '100%'}}>
           <AgGridReact
               animateRows={true} 
               rowData={rowData}
               columnDefs={columnDefs}
               defaultColDef={defaultColDef}  
               autoGroupColumnDef={{ minWidth: 200 }}
               >
           </AgGridReact>
       </div>
    </>
   );
};
export default App;

AG GRID VERSION

"dependencies": {
    "ag-grid-community": "^25.3.0",
    "ag-grid-enterprise": "^25.3.0",
    "ag-grid-react": "^25.3.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
    

Web Console, i see statements like

ag-grid-community.cjs.js:1732  AG Grid: rowGroup is only valid in ag-grid-enterprise, your column definition should not have rowGroup

From Website: AG Grid Enterprise is a commercial product distributed under our EULA and supported by our technical staff. To evaluate AG Grid Enterprise you don't need our permission – all features are unlocked. To temporarily hide the watermark and browser console errors e-mail us to get a temporary evaluation key.

So how to make the row Group working.

Answer 1

I was missing import statement:

import 'ag-grid-enterprise';

Row Grouping will only work when you use enterprise version. The above statement will enable enterprise version.