search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.32k forks source link

[data grid] How to deselect Row in onRowClick callback in DataGridPro? #14912

Open MarcusKuehn opened 1 month ago

MarcusKuehn commented 1 month ago

The problem in depth

https://codesandbox.io/p/sandbox/admiring-thunder-m5nf8t

We wanted to build a small DataGrid, where you can select a Row and deselect it by simply left clicking. We thought we can just manipulate the selection with the details.api but found that we are than not able to deselect the row whatsoever (even with Ctrl+leftClick).

Is it even possible to manipulate the default Behaviour of the DataGrid that you can select/deselect a row by just left clicking?

Your environment

`npx @mui/envinfo` ``` System: OS: macOS 15.0.1 Binaries: Node: 20.15.0 - ~/Library/pnpm/node npm: 10.7.0 - ~/Library/pnpm/npm pnpm: 9.11.0 - ~/Library/pnpm/pnpm Browsers: Chrome: 129.0.6668.91 Edge: 129.0.2792.79 Safari: 18.0.1 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/icons-material: ^6.1.3 => 6.1.3 @mui/lab: 6.0.0-beta.10 => 6.0.0-beta.10 @mui/material: ^6.1.3 => 6.1.3 @mui/x-charts-pro: 7.0.0-beta.3 => 7.0.0-beta.3 @mui/x-data-grid-pro: 7.19.0 => 7.19.0 @mui/x-date-pickers-pro: 7.19.0 => 7.19.0 @mui/x-license: ^7.18.0 => 7.18.0 @mui/x-tree-view-pro: ^7.19.0 => 7.19.0 @toolpad/core: ^0.7.0 => 0.7.0 @types/react: ^18.3.10 => 18.3.10 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.0 => 18.3.1 typescript: ^5.6.3 => 5.6.3 ```

Search keywords: DataGrid Order ID: 85157

cherniavskii commented 1 month ago

Hi @MarcusKuehn It seems that after you manipulate row selection in the onRowClick handler, the default handler kicks in and keeps the row selected. For custom selection behavior, I would recommend using the controlled row selection model. Here is a working demo: https://codesandbox.io/p/sandbox/old-firefly-m4xw49 Is this what you're looking for?

cherniavskii commented 1 month ago

I feel like it would make sense to make the row deselection on click a default behavior šŸ¤” What do you think @mui/xgrid ?

MarcusKuehn commented 1 month ago

Hi @MarcusKuehn It seems that after you manipulate row selection in the onRowClick handler, the default handler kicks in and keeps the row selected. For custom selection behavior, I would recommend using the controlled row selection model. Here is a working demo: https://codesandbox.io/p/sandbox/old-firefly-m4xw49 Is this what you're looking for?

This is exactly what we were looking for. Thanks for the fast reply.

michelengelen commented 1 month ago

I feel like it would make sense to make the row deselection on click a default behavior šŸ¤” What do you think @mui/xgrid ?

Since everybody seemingly agrees I'll add this to the board! šŸ‘šŸ¼

cherniavskii commented 1 month ago

Added to https://github.com/mui/mui-x/issues/13188