fix DnD incompatibility with obsidian

Author: RafaelGB

src/components/Table.tsx

@@ -91,6 +91,7 @@ export function Table(tableData: TableDataType) {
   );
   const [persistSizingTimeout, setPersistSizingTimeout] = React.useState(null);
   // Drag and drop
+  const DnDRef = React.useRef(null);
   const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(
     columns.map((c) => c.id)
   );
@@ -315,10 +316,13 @@ export function Table(tableData: TableDataType) {
                 <div
                   key={`${headerGroup.id}-${headerGroupIndex}`}
                   className={`${c("tr header-group")}`}
+                  ref={DnDRef}
                 >
                   <DndProvider
                     key={`${headerGroup.id}-${headerGroupIndex}-dnd-provider`}
                     backend={HTML5Backend}
+                    debugMode={global.enable_debug_mode}
+                    context={DnDRef}
                   >
                     {headerGroup.headers
                       .filter(

src/components/TableHeader.tsx

@@ -35,7 +35,7 @@ export default function TableHeader(headerProps: TableHeaderProps) {
     view.diskConfig.reorderColumns(newColumnOrder);
   }
 
-  const [{ isDragging, handlerId }, drag] = useDrag(
+  const [{ isDragging, handlerId }, drag, dragPreview] = useDrag(
     () => ({
       type: DnDConfiguration.DRAG_TYPE,
       item: { id, originalIndex },

src/helpers/Constants.ts

@@ -218,7 +218,7 @@ export const CellSizeOptions = Object.freeze({
 })
 
 export const DnDConfiguration = Object.freeze({
-  DRAG_TYPE: "column",
+  DRAG_TYPE: "dbFolderColumn",
 });
 
 export const ResizeConfiguration = Object.freeze({