Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Material-UI DataGrid row cliccable (and with pointer cursor), without the selection highlight?

Tags:

material-ui

I'm using the community version of DataGrid from Material UI.

I've find the way to respond to row click using onRowClick prop, but I can't find a way to disable the selection highlight of a single cell and make the entire row with a cursor pointer:

<DataGrid disableSelectionOnClick={true} onRowClick={p => console.log('row clicked', p)} />

Isn't this feature available?

enter image description here

like image 336
gremo Avatar asked Dec 29 '25 00:12

gremo


1 Answers

Might be a tad late but I came across the exact same need:

<Datagrid
  ...
  sx={{
    // disable cell selection style
    '.MuiDataGrid-cell:focus': {
      outline: 'none'
    },
    // pointer cursor on ALL rows
    '& .MuiDataGrid-row:hover': {
      cursor: 'pointer'
    }
  }}
/>
like image 110
Yoctoboy Avatar answered Dec 31 '25 00:12

Yoctoboy