AG Grid - Suppress row selection inside a particular column/cell

Question

Using AG Grid, i need to make a table with row selection on click, but where clicking on certain cells will NOT cause the row to be selected.

The best idea I've had so far is to disable on-click row selection when the mouse hovers over the non-selecting cell. Something like:

gridOptions.onCellMouseOver = (event) => {
 if (/*cell is from non-select column*/ )
   this.gridOptions.suppressRowClickSelection = true;
}

gridOptions.onCellMouseOut = (event) => {
 if (/*cell is from non-select column*/ )
   this.gridOptions.suppressRowClickSelection = false;
}

The only issue with this is that onCellMouseOver and Out do not seem to trigger in a timely fashion; If you quickly move from selecting a row, to clicking inside the no-select cell, the row selection will still trigger. I have an additional onCellClicked function which fires and shows that gridOptions.suppressRowClickSelection is set to true as expected, but seems like the property is not set in time when the clicks come in too fast.

If anyone knows a way around this onMouseOver timing issue, I'd love to know. Or, if there is a better way overall to implement this functionality, I'm all ear.

Thanks

Answer 1

Here's one way of doing it:

this.gridOptions = {
    suppressRowClickSelection: true,
    onCellClicked: (e) => {
        if (e.column.colId !== 'name') { // cell is from non-select column
            e.node.setSelected(true);
        }
    }
};

Basically, we manually select the row only when clicking cells that match the criteria.