skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. Unfortunately you can’t group rows without enterprise features, here’s similar question
    Is there a way to group rows in ag-grid without the enterprise version?

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search