AG Grid, Capture the event on click of chevron - reactjs

Question

Ag-grid provides onCellClicked event for when a cell is clicked. But I noticed that it doesn't trigger when we click the chevron. I need to capture this event for analytics as a user might click the chevron directly rather than the cell itself. Any idea how to achieve this or what event to use here? I am using detailRenderer to render child rows, if that helps. Here is one of the columnDefs item:
{
headerName: "Line Item",
field: "displayLineNumber",
width: "100px",
sortable: false,
expandable: true,
onCellClicked: (event) => {
event.node.setExpanded(!event.node.expanded);
if (event.node.expanded === true) {
DataLayerUtils.pushEvent(
"click",
{
name: "Open Line Item",
type: "button",
},
{
click: {
category: "Quote Detail Table Interactions",
},
}
);
} else {
DataLayerUtils.pushEvent(
"click",
{
name: "Collapse Line Item",
type: "button",
},
{
click: {
category: "Quote Detail Table Interactions",
},
}
);
}
},
rowClass: ({ node, data }) => {
return `cmp-product-lines-grid__row ${
!data?.children || data.children.length === 0
? "cmp-product-lines-grid__row--notExpandable"
: ""
}`;
},
detailRenderer: ({ data }) => (
<section className="cmp-product-lines-grid__row cmp-product-lines-grid__row--expanded">
<ProductLinesChildGrid
gridProps={gridProps}
license={gridProps.agGridLicenseKey}
columnDefiniton={
whiteLabelMode ? whiteLabelCols() : quoteDetailsCols()
}
data={data.children}
onModelUpdateFinished={() => {
markupChanged(mutableGridData);
}}
/>
</section>
),
},

Answer 1

There's two ways to achieve this:
Implement the Grid Event rowGroupOpened (see: https://www.ag-grid.com/react-data-grid/grid-events/#reference-rowGrouping-rowGroupOpened)
This will be triggered whenever the user opens a group node.
onRowGroupOpened={(params) =>
console.log('onRowGroupOpened', params.expanded)
}
Implement the Grid Event cellMouseDown (see: https://www.ag-grid.com/react-data-grid/grid-events/#reference-selection-cellMouseDown) to capture the chevron click event.
This will be triggered only when the user clicks the expand chevron
onCellMouseDown={(params) => {
const isMasterRowGroupExpanded = params.event.target.classList.contains(
'ag-icon-tree-closed'
);
if (isMasterRowGroupExpanded) {
console.log('onCellMouseDown', params.value);
}
}}
See both of these approaches implemented in the following plunkr.