[data grid] Column reordering does not work on touchscreen

[nikita-agg]

Order ID or Support key 💳 (optional)

55910

The problem in depth 🔍

I am creating a configurable tables for our users where they can set their column orders as they see fit. We have a lot of users using our product in iPad and they can't reorder columns on ipad.
I even checked the code sandbox provided in Mui docs. Even there reordering is not working. Do we need to pass some special props to make it work?

Link to live example:
https://codesandbox.io/s/2zggjy?file=/demo.tsx

Steps:

1. Open data grid pro in iPad
2. Column reordering is not working (Tried long press and drag)

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: macOS 12.6.3
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6.1
  npmPackages:
    @mui/icons-material: ^5.0.1 => 5.8.4 
    @mui/lab: 5.0.0-alpha.67 => 5.0.0-alpha.67 
    @mui/material: ^5.2.2 => 5.9.0 
    @mui/private-theming:  5.9.0 
    @mui/styled-engine-sc: ^5.1.0 => 5.8.0 
    @mui/styles: ^5.0.1 => 5.9.0 
    @mui/system: 5.6.0 => 5.6.0 
    @mui/utils:  5.9.0 
    @mui/x-data-grid: 5.12.3 => 5.12.3 
    @mui/x-data-grid-pro: ^5.12.3 => 5.17.15 
    @mui/x-license-pro: ^5.12.3 => 5.17.12 
    @types/react: ^17.0.0 => 17.0.47 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.3 => 5.3.5 
    typescript: ^4.1.2 => 4.7.4 

[m4theushw]

Column reordering is based on the HTML5 drag'n'drop API. Unfortunately, this API is only supported on desktop browsers for now. We should listen to the touch events on mobile instead, like what https://react-dnd.github.io/react-dnd/docs/overview does.

[nikita-agg]

Column reordering is based on the HTML5 drag'n'drop API. Unfortunately, this API is only supported on desktop browsers for now. We should listen to the touch events on mobile instead, like what https://react-dnd.github.io/react-dnd/docs/overview does.

As per this, https://caniuse.com/?search=drag, its supported for chrome android and safari ios but column reordering is not working there as well.

[m4theushw]

Initially I thought that draggable was kind of experimental on mobile but testing the example from https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html in my Android phone worked. It seems to be an issue with React not supporting it well because I created an example without the DataGrid and also didn't work. The demo from react-dnd/react-dnd#3544 also doesn't work on mobile.

[nikita-agg]

Initially I thought that draggable was kind of experimental on mobile but testing the example from https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html in my Android phone worked. It seems to be an issue with React not supporting it well because I created an example without the DataGrid and also didn't work. The demo from react-dnd/react-dnd#3544 also doesn't work on mobile.

So, right now we don't have much support for drag and drop on mobile/ipads with react? Does data grid exposes some props which i can use to listen to touch events?

[m4theushw]

So, right now we don't have much support for drag and drop on mobile/ipads with react?

No, Android is also affected.

Does data grid exposes some props which i can use to listen to touch events?

Also no, but you can attach listeners to the DataGrid and filter the events keeping only those that come from the column headers.

---

While that, I've working on #9394 to fix the column reordering on mobile devices. Could you test the preview from this PR to see if it works now? It appears that the HTML5 drag'n'drop API behaves differently between desktop and mobile.

[nikita-agg]

So, right now we don't have much support for drag and drop on mobile/ipads with react?

No, Android is also affected.

Does data grid exposes some props which i can use to listen to touch events?

Also no, but you can attach listeners to the DataGrid and filter the events keeping only those that come from the column headers.

While that, I've working on #9394 to fix the column reordering on mobile devices. Could you test the preview from this PR to see if it works now? It appears that the HTML5 drag'n'drop API behaves differently between desktop and mobile.

I was able to test few scenarios. Here's my experience with it:
In iPhone & iPad, chrome, it's working fine.
In iPhone & iPad, safari, drag and drop is working but as soon as i drop a column, it's redirecting me to search engine with column name searched.
It not working for me in chrome browser ipad

[cherniavskii]

We need a general solution for drag and drop on touch screens – for column reordering, row reordering, and pivot panel.
We will need this for the Tree View and potentially row grouping by drag & drop in the Data Grid.
We discussed this during the backlog grooming and we want to create a custom implementation of d&d in house rather than using a third-party library.

[m4theushw]

Hey @cherniavskii, recently I had to develop a drag-and-drop functionality for a side project in vanilla JS and since I also needed to support touch-devices I think I have something to share here. First thing I did was to ditch the HTML draggable attribute and instead rely only on pointer events. These events are part of a new API and remove the need to listen to touch and mouse events separately. Second thing was to call setPointerCapture on the first pointer event to capture all subsequent events. Calling this method is handy because we don't need to attach events to document anymore to support dragging even when the mouse is outside the DataGrid. Lastly, since the target of the pointer events is always the same when setPointerCapture is used, I call elementFromPoint to get the true target and determine where the user wants to drop the dragged element. I hope these suggestions help to improve the column reordering. For the UX, I took as inspiration the interface of GitHub Projects. They use https://docs.dndkit.com/ but with some customizations to add a guideline (they call it "sash") showing the new position of the dragged element if dropped. I couldn't find any library, specially in vanilla JS, that reproduces this behavior.

[cherniavskii]

Thanks, @m4theushw, I appreciate your input!

rely only on pointer events. These events are part of a new API and remove the need to listen to touch and mouse events separately. Second thing was to call setPointerCapture on the first pointer event to capture all subsequent events. Calling this method is handy because we don't need to attach events to document anymore to support dragging even when the mouse is outside the DataGrid.

I used this for the resize handle in https://github.com/cherniavskii/mui-x/blob/pivoting/packages/x-data-grid-premium/src/hooks/utils/useResize.ts
Previously, I used mouse events and attached event handlers to document. With pointer events and pointer capture, it's more isolated now, and works on touch screen 👍🏻

For the UX, I took as inspiration the interface of GitHub Projects.

Since you didn't use draggable attribute, did you have to replicate the drag image?

I've played with d&d for the pivoting panel in #9877 – I used draggable and drag events, but it doesn't work on touch screens.
You can check the preview here: https://deploy-preview-9877--material-ui-x.netlify.app/x/react-data-grid/pivoting/

[m4theushw]

Since you didn't use draggable attribute, did you have to replicate the drag image?

I don't show an image of the element being dragged, but a "ghost" of it. Most spreadsheet apps behave like that, e.g. Airtable:

In the DataGrid I think this might be better because it doesn't require a re-render of the rows when a column is moved. You can just have an absolute-positioned container extending the full height and update its left position when the cursor is moved.

[cherniavskii]

I don't show an image of the element being dragged, but a "ghost" of it.

Got it 👍🏻
This makes sense for column reordering.

[LimmaPaulus]

Are there any updates on this? Column reordering on mobile devices is crucial for my customers.

Proposed workaround: Add reordering functionality using 'up' and 'down' arrow buttons in the column preferences panel?