Row ordering feature breaks if react-dnd is around about material-react-table HOT 8 CLOSED

A minimal sandbox will help for sure. Good luck for your investigation 👍

from material-react-table.

Looks like others have run into this as well. React DnD hijacks all dragging events by default. Looks like they have a solution here?

react-dnd/react-dnd#3304

from material-react-table.

Maked my codesandbox worked but not my real app use case, don't know why... Already spent too much time on this, I went for react-beautiful-dnd and it works like a charm 👍

from material-react-table.

Closing, as this is an issue caused by another library, with working workarounds available

from material-react-table.

@PeretEtienne its been a while but wanted a clarification on your last statement,
Did you use react-beautiful-dnd instead of react-dnd in that other part of the project so it would not break the material react table row dnd native functionality or did you use react-beautiful-dnd for the material react table itself?

Currently I'm having the same issue as you did but I'm using @hello-pangea/dnd a fork of react-beautifull-dnd that supports react18 and the material react table row native dnd functionality is not working even when following the examples in the documentation to the T including with my case of having row-ordering with row-selection:
material-react-table.dev/?path=/story/features-row-ordering-examples--row-ordering-with-select

its very odd in my case since I'm sure react-beautifull-dnd api does not overlap with the native HTML dnd api and it seems like thats what material react table is using

from material-react-table.

Hi ! I switched from react-dnd to react-beautiful-dnd for the container of my tables. I did not replaced the lib used by material-react-table itself.

It looks something like this now :

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Box } from '@mui/material';

const Component = () => {

  const renderCard = ([blockName, block], index) => {
    return (
      <Draggable key={blockName} draggableId={blockName} index={index}>
        {(provided, snapshot) => (
          <ReportCard
            id={blockName}
            block={block}
            provided={provided}
            snapshot={snapshot}
          />
        )}
      </Draggable>
    );
  };

  // ...

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <Box ref={provided.innerRef} {...provided.droppableProps}>
            {reportBlocksEntries.map(renderCard)}
            {provided.placeholder}
          </Box>
        )}
      </Droppable>
    </DragDropContext>
  );
};

Tables are in ReportCard and work correctly

from material-react-table.

@PeretEtienne thanks for the speedy reply!
I guess I have to investigate more on why its not working as intended, for now when I try to drag it gives me the "not-allowed" cursor and the row is stuck in its place with the faint transparent striped border.

my plan now is to do a mini project to isolate this feature and see what happens.

from material-react-table.

@KevinVandy I found the issue and its because I'm running my application in Tauri not sure why but its not working in the desktop application port but when I run it on the browser the functionality works without any issues

CC: @KevinVandy any Idea why Tauri is clashing with the dnd api?

edit:
Apparently its a known issue in tauri:
tauri-apps/tauri#2014

from material-react-table.