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
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.
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?