material-ui DataGrid - how to separate selecting the row checkbox from onRowClick

Question

I am using a DataGrid to manage a service configuration. I would like to use the auto-generated row checkboxes to manage multiple delete operations, but would like to use the onRowClick event to feed row data to a modal dialog form for editing. My onRowClick handler works just fine and populates the modal exactly the way I want it to. Unfortunately, clicking on the row also selects the row -- in other words, the checkbox for the row clicked is selected. I would like the row to be selected only when the checkbox itself is clicked, not when the row is clicked.

My DataGrid declaration looks like this.

                    <DataGrid 
                        columns={this.columns} 
                        rows={fmConfigs}                              
                        pageSize={10} 
                        checkboxSelection 
                        autoHeight
                        onRowClick={(rowData) => this.handleClickOpenFmConfigForm(rowData.row)} 
                />

Normally, I would expect there be a second argument to the onRowClick handler to represent the event, so I could call something like e.stopPropagation(), but the only thing passed is an object of type GridRowParams, for which there is no documentation. I was hoping that maybe the event object was buried in there somewhere but I can't find it. When I print the object to the console, I can see that there is a lot of data -- that's how I was able to find the row data I needed to pass to my form -- but I do not see the event.

Does anyone have any idea how this can be done?

Answer 1

add disableSelectionOnClick={true} to the DataGrid component and according to the doc , the selection on click on a row or cell would be disabled.

<DataGrid
        disableSelectionOnClick={true}
        rows={rows}
        columns={columns}
        pageSize={5}
        checkboxSelection
      />

sandbox