[DataGrid] Add a property to define the selection mode (row, cell or both)

[doberkofler]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I understand that the data grid currently only allows to use a cell based selection mode.
It would be very helpful to also have an option to only select a complete row and not the individual cells.

Examples 🌈

No response

Motivation 🔦

In most use cases a grid is used to select one or multiple rows and the cell level is not really important.
Especially when using the keyboard to walk up and down in row selection mode the selected row should move up/down until the last visible row is reached and then start scrolling.

Order ID 💳 (optional)

No response

[m4theushw]

By default, the grid allows only rows to be selected, like you expect. The blue border you see highlights the focused cell. The cell selection mode is opt-in and only available on Premium.

[doberkofler]

@m4theushw I'm not using the unstable_cellSelection property but still see cell section.
Also when using the MIT version, I still see cell selection.

[flaviendelangle]

What you are describing is the focus of the cell, which is different from the selection

Cell selection:

Row selection:

---

But if we are talking about the focus, this makes me think about #2429

[doberkofler]

@flaviendelangle Thank you for clarifying and yes, I'm referring to the cell focus.
I'm not using the unstable_cellSelection property but still see the focus on cells.
The SR #2429 is quite similar, but I would suggest to generally differentiate between a row and cell based selection model as used in other grid components like for example dhtml grid.
The row based selection should allow to navigate (also using keyboard shortcuts) the same way as currently the cell focus does, but only change the selection.

[m4theushw]

The SR #2429 is quite similar, but I would suggest to generally differentiate between a row and cell based selection model as used in other grid components like for example dhtml grid.

Thanks for the suggestion. When cell selection was implemented we reused the same styles from row selection. The only differentiation exists when selecting cells from a selected row. In the image below, 2 cells are selected, while the row is also selected, and the focus is on "Roy Hunter".

About this issue, I'll close it. As we explained above, the blue outline is the focused cell and the proper cell selection is not enabled by default. For a prop to disable this outline, please subscribe to #2429. For now, to remove the outline you can follow the instructions from #2429 (comment)

[doberkofler]

@m4theushw I did already test the suggestion in #2429, but does not really solve the problem. When disabling the cell focus as suggested, the grid does select the row when clicking in one of the cells as expected but it no longer moves when using the keyboard navigation.

The idea of this SR is not to just remove the cell focus but to replace the cell selection with a row selection but keep the navigation with mouse, touch and keyboard intact.