How to prevent onRowClicked when using a cellRenderer in AgGridReact - ag-grid-react

Question

When using your own cell renderer for e.g. an action column - with links or buttons in it -, AgGridReact still triggers a onRowClicked event when you click on one of the links or buttons. event.stopPropagation and event.preventDefault do not help.
// list of rowActions ...
function RowActionsRenderer(props) {
let row = props.data;
return <div>{
rowActions.map((actionDef, index) =>
<Button onClick={(event) => {
event.stopPropagation();
event.preventDefault();
//_processAction(actionDef, row)
}}>{label(actionDef.name)}</Button>
)
}</div>;
}
Definition of cellRenderer:
// ...
columnDefs.push({
headerName: 'actions',
field: '-actions-',
width: 120,
sortable: false,
filter: false,
cellRenderer: 'rowActionsRenderer'
});
// ...
frameworkComponents: {
rowActionsRenderer: RowActionsRenderer
},
Registration of event listening:
onRowClicked={(row) => {
// always runs event when when clicked on button in the '-actions-' column !!!
}}
Now, how do you prevent onRowClicked being called when clicking anything in the '-actions-' column?

Answer 1

There are some rather complicated low level calls to the AgGrid api I like to avoid.
So my proposed solution would be:
First, do not listen to row clicks.
Second listen to cell clicks and filter out column id '-actions-'
onCellClicked={(cell) => {
if (cell.column.getColId() === '-actions-') {
return;
}
let row = cell.data;
// process row data ...
}