What am I doing wrong with the ag-grid in react? - reactjs

Question

I'm trying to make the the ag-grid group selectable if say for example we have the care maker and you can select the parent and everything underneath that parent also gets selected.
I've looked into the ag-grid documentation but it looks like I'm doing everything right.
Here's my code below:
import React, { useState } from 'react';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
const DummyGrid = () => {
const [gridApi, setGridApi] = useState(null);
const columnDefs = [
{
headerName: 'Make', field: 'make', checkboxSelection: true , rowGroup: true, groupSelectsChildren: true
},
{
headerName: 'Model', field: 'model'
},
{
headerName: 'Price', field: 'price'
}
]
const onGridReady = (params) => {
setGridApi(params.api);
}
const rowData = [
{ make: 'Honda', model: 'Chev', price: 6000 },
{ make: 'Honda', model: 'Civic', price: 120000 },
{ make: 'Toyota', model: 'Celica', price: 5000 },
{ make: 'Mitsubishi', model: 'GTR', price: 5000 }
]
const handleClick = () => {
const selectedNodes = gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringRepresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
console.log(`The Data selected: ${selectedDataStringRepresentation}`);
}
return(
<div className="ag-theme-balham"
style={{
width: 600,
height: 600
}}>
<button onClick={handleClick}>Click this!</button>
<AgGridReact
rowData = {rowData}
columnDefs={columnDefs}
rowSelection="multiple"
onGridReady={onGridReady}
/>
</div>
);
};
export default DummyGrid;
As you can see from the output below that they're not grouping even though they the same maker. What am I doing wrong?

Answer 1

2 things you're doing wrong.
First, you need to import the RowGroupingModule module and pass it to your grid as modules:
import { RowGroupingModule } from '#ag-grid-enterprise/row-grouping';
modules={[RowGroupingModule]}
Secondly, you need to set groupSelectsChildren on the grid itself, not on your column definition:
groupSelectsChildren={true}
Demo.