Adding Drag and Drop to a nested tables

[dmitryATgrace]

Hi there,

I am trying to add drag and drop(using this guide) to the nested tables and it is working fine as long as you keep your nested table closed. but as soon you open your nested table the width of the drag handler increases 10x. Also, when you are trying to move the row snapshot does not include nested tables. Please see the video attached:

Screen.Recording.2024-11-15.at.6.36.28.PM.mov

I am using

"@hello-pangea/dnd": "^16.6.0",
"@mantine/core": "^7.13.3",
"@mantine/hooks": "^7.13.3",
"mantine-datatable": "^7.12.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"

here is my rowFactory:

rowFactory={({ record, index, rowProps, children }) => {
 return (
  <Draggable
     key={record.id}
     draggableId={record.id.toString()}
     index={index}
   >
      {(provided) => (
          <DataTableDraggableRow
             {...rowProps}
             {...provided.draggableProps}
          >
            {/** custom drag handle */}
             <TableTd
               {...provided.dragHandleProps}
               ref={provided.innerRef}
             >
               <IconGripVertical size={16} />
           </TableTd>
           {children}
        </DataTableDraggableRow>
      )}
    </Draggable>
   );
}}