[data grid] Column reorder does not work on tablet/mobile

[lucal-mms]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/affectionate-star-kfd8qj (Example from official docs: https://mui.com/x/react-data-grid/column-ordering/)

Steps:

1. Open link
2. Open rendered component in a new window
3. Press F12 and select tablet/mobile view mode
4. Try to reorder columns by dragging the headers but nothing happens, no icon is present for reordering via an icon

Current behavior

When trying to drag-and-drop columns on mobile/tablet to reorder them, nothing happens. There is no icon present to reorder by dragging that icon either.

I even went as far as to clone the source code to try and see and there's an icon for column reorder that's not used:

Found in filegridIconSlotsComponent.ts .

Expected behavior

Column reorder should work on tablet/mobile too. Either add an icon which can be dragged/dropped by the user via tap hold, or add the possibility to drag-and-drop column headers like on bigger devices (laptop/desktop).

Context

One of the reasons we chose and paid forMUI PRO was because of this feature. We have several users that use the app on tablet/mobile in landscape mode for quick access of data on the go (in meetings for example, when you don't have your laptop on hand).

Your environment

No response

Search keywords: column reorder tablet mobile Order ID: 89922

Search keywords:

[dosubot[bot]]

Hi @lucal-mms, I'm here to help you with any bugs, questions, or contributions you have. Let's work together to solve this issue!

I found some similar issues and discussions related to column reordering on mobile/tablet devices:

1. [DataGridPro] Column reordering does not work on touchscreen (open) - This issue discusses the lack of support for column reordering on touch devices and suggests using pointer events and setPointerCapture to handle touch interactions. You can find more details here ^[1].

2. [Data Grid] Support row reordering on touchscreen (open) - This issue is marked as a feature request to add support for row reordering on touch devices. More information is available here ^[2].

3. [data grid] Column reordering drag and drop not working in mobile (closed) - This issue was closed as a duplicate of the first issue mentioned above. Details can be found here ^[3].

4. [DataGridPro] Support columns reorder on mobile (closed) - This issue was also closed as a duplicate of the first issue. More information is available here ^[4].

For handling touch events in the Data Grid component, the useGridColumnReorder hook manages touch events related to column reordering. Event handlers like handleDragStart, handleDragEnter, handleDragOver, and handleDragEnd are used to manage the drag-and-drop behavior for columns. These handlers are registered using the useGridApiEventHandler function.

Here is a relevant code snippet showing the integration:

useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleDragStart);
useGridApiEventHandler(apiRef, 'columnHeaderDragEnter', handleDragEnter);
useGridApiEventHandler(apiRef, 'columnHeaderDragOver', handleDragOver);
useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleDragEnd);
useGridApiEventHandler(apiRef, 'cellDragEnter', handleDragEnter);
useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
useGridApiOptionHandler(apiRef, 'columnOrderChange', props.onColumnOrderChange);

For touch events related to resizing, the useGridColumnResize hook includes methods like handleTouchStart, handleTouchMove, and handleTouchEnd to manage touch interactions for resizing:

const handleTouchStart = useEventCallback((event: any) => {
  const cellSeparator = findParentElementFromClassName(
    event.target,
    gridClasses['columnSeparator--resizable'],
  ) as HTMLElement | null;
  if (!cellSeparator) {
    return;
  }
  const touch = event.changedTouches[0];
  if (touch != null) {
    touchId.current = touch.identifier;
  }
  const columnHeaderElement = findParentElementFromClassName(
    event.target,
    gridClasses.columnHeader,
  ) as HTMLDivElement;
  const field = getFieldFromHeaderElem(columnHeaderElement);
  const colDef = apiRef.current.getColumn(field);
  storeReferences(colDef, cellSeparator, touch.clientX);
  const doc = ownerDocument(event.currentTarget as HTMLElement);
  doc.addEventListener('touchmove', handleTouchMove);
  doc.addEventListener('touchend', handleTouchEnd);
});

const handleTouchMove = useEventCallback((nativeEvent: any) => {
  const finger = trackFinger(nativeEvent, touchId.current);
  if (!finger) {
    return;
  }
  let newWidth = computeNewWidth(
    initialOffsetToSeparator.current!,
    (finger as CursorCoordinates).x,
    refs.columnHeaderElement!.getBoundingClientRect(),
    resizeDirection.current!,
  );
  newWidth = clamp(newWidth, refs.colDef!.minWidth!, refs.colDef!.maxWidth!);
  updateWidth(newWidth);
  const params: GridColumnResizeParams = {
    element: refs.columnHeaderElement,
    colDef: refs.colDef!,
    width: newWidth,
  };
  apiRef.current.publishEvent('columnResize', params, nativeEvent);
});

const handleTouchEnd = useEventCallback((nativeEvent: any) => {
  const finger = trackFinger(nativeEvent, touchId.current);
  if (!finger) {
    return;
  }
  finishResize(nativeEvent);
});

These handlers ensure that touch events are properly managed to support both column reordering and resizing features in the Data Grid component ^[5][6].

To continue talking to Dosu, mention @dosu.

[lucal-mms]

There should be an out-of-the-box solution for this! Every other functionality already works on tablet/mobile

[michelengelen]

This feature is currently not implemented. Do we plan to built this @cherniavskii, given the tree view now has the drag and drop ready?

[wingbui]

Yes, this feature should be added to drag columns on touch screen such as tablets. I temporarily used Ag-Grid because it supported drag-and-drop column on touch screen. The downside is Ag-Grid package is quite heavy. I will switch back to MUI when this feature is implemented for touch screen.

[michelengelen]

Since this touches the same problem as #9330 I will close this as a duplicate. Please consider upvoting it to increase visibility. 👍🏼

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@lucal-mms: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.