[data grid] Support diagonal scrolling

[Janpot]

Summary

trying to scroll diagonally (e.g. with the trackpad). But the grid only scrolls in one direction at a time, either horizontally or vertically, it's a very jarring experience when I want to move diagonally:

Screen.Recording.2024-06-19.at.16.44.56.mov

https://mui.com/x/react-data-grid/

It would be great if I could scroll the grid in both directions at the same time. i.e. scroll diagonally.

I just noticed there is an issue #11230 And it makes sense that for small deviations from the main axes you may not want to have the drift. Maybe it makes sense to measure the angle that is being scrolled from one of the main axes and snap to that axis as long as this angle stays under a certain threshold?

Examples

I know it's not 100% the same use case, but Google Sheets can do it:

Screen.Recording.2024-06-19.at.16.44.36.mov

• https://handsontable.com/demo
• https://fast-grid.vercel.app/

Motivation

This would greatly increase the UX as it would require less distance to scroll and the grid responsiveness would closer resemble what I'm doing physically with my trackpad.

Search keywords: datagrid scroll diagonaly

[michelengelen]

👍🏼

[oliviertassinari]

Oh, it's interesting, #11230 is about going in the opposite direction.

As an end-user, this Google Sheet behavior is one of the UX aspects of this product that I have the most pain with. I get lost in the sheet, not knowing anymore which column I'm under, way too often.
I can't find a grid in https://www.notion.so/mui-org/data-grid-Data-Grid-component-7e0d4fb7a10943c9aac340198684197c that behaves this way.

• https://www.infragistics.com/products/ignite-ui-angular is close not a bit different
• https://fast-grid.vercel.app/ is probably the closest to embodying this issue.

It feels annoying to use on my end. I think it would be great to gather more end-users perspectives on this (e.g. team members). Otherwise, I think that closing with "status: expected behavior" label is a good default 😄

[Janpot]

It feels annoying to use on my end.

Strange, on desktop it does exactly what I intend, it doesn't deviate at all for me with the macbook trackpad when I scroll and let go. Yet when I intentionally scroll diagonally without letting go it follows my movement exactly. Very intuitive, love this UX. It feels different on phone screen though 🤔

in my opinion there could be room for both, I believe we should craft the right UX for the exact intention of the user. It's very off putting that the X grid doesn't follow my precise motion on the trackpad, but it's also off putting when a grid scrolls uncontrolled in both directions. The proposal therefore is: allow diagonal movement as long as the fingers are touching the screen/trackpad, restrict to horizontal/vertical when the fingers are off the screen/trackpad.

[oliviertassinari]

@Janpot If I understand things correctly:

• Today the scroll container of the data grid behaves like a native scroll container. This means that it's impossible to scroll in a diagonal.
• This issue asks to be able to scroll in a diagonal. It's about making it work when holding the fingers on the trackpad.
  When triggering inertia scrolling, it shouldn't allow a slight diagonal scroll. For example, Figma canvas allows this more easily than Google Sheet canvas.

---

What I suspect would be 👌 on desktop (but only a guess, only playing with this could confirm it's great or poor):

• If people build a data table: keep the current behavior.

• If people build a spreadsheet, they are likely to have many small columns that columns by themselves are ok to ignore. e.g. https://handsontable.com/demo. Expose a prop that enables this behavior:

  • if the scroll is slow (a few px/sec) or at an angle that is very clearly not 0° or 90°, the diagonal scroll is allowed. Likely that angel limit should be based on the scroll speed. Today. Google Sheet allows diagonal scrolls for way too multiple small angels IMHO.
  • otherwise, the diagonal scroll is not allowed.

  (this would be instead of either the finger is on the track page or not).

It feels different on phone screen though 🤔

I guess it's because it's harder to maintain a straight-line movement with the thumb than with the middle finger + one next to it (there is one less bone articulation, 5 vs. 3 rotation axes with the hand). It might also be because the screen is much smaller, so it's harder to do one big scroll down and one big scroll right without being lost; you have to do multiple scroll down and scroll right to get to the destination, annoying.

Now, on mobile, a native iOS scroll allows diagonal scrolling and Android doesn't. I could see us implementing the same "spreadsheet" behavior as proposed above for mobile.