working!

Author: RafaelGB

.gitignore

@@ -13,4 +13,7 @@ main.js
 
 # obsidian
 data.json
-.DS_Store
+.DS_Store
+
+# VSCode
+*.code-workspace

src/components/Table.tsx

@@ -25,7 +25,7 @@ import { LOGGER } from "services/Logger";
 import Cell from "components/Cell";
 import Header from "components/Header";
 import GlobalFilter from "components/reducers/GlobalFilter";
-import DraggableStyle from "components/styles/DragableStyle";
+import { useDraggableInPortal } from "components/portals/UseDraggableInPortal";
 
 const defaultColumn = {
   minWidth: 50,
@@ -208,6 +208,7 @@ export function Table(initialState: TableDataType){
     }
     // Manage DnD
     const currentColOrder = React.useRef(null);
+    const renderDraggable = useDraggableInPortal();
     // Manage input of new row
     const [inputNewRow, setInputNewRow] = React.useState('');
     const newRowRef = React.useRef(null);
@@ -249,12 +250,17 @@ export function Table(initialState: TableDataType){
                   currentColOrder.current = null;
                 }}
               >
-              <Droppable key={`Droppable-${i}`} droppableId="droppable" direction="horizontal">
+              <Droppable 
+                key={`Droppable-${i}`}
+                droppableId="droppable" 
+                direction="horizontal"
+              >
                 {(droppableProvided, snapshot) => (
                   <div 
+                    key={`div-Droppable-${i}`}
                     {...headerGroup.getHeaderGroupProps()} 
                     ref={droppableProvided.innerRef}
-                    className='tr'
+                    className='tr header-group'
                   >
                     {headerGroup.headers.map((column,index) => (
 
@@ -264,24 +270,18 @@ export function Table(initialState: TableDataType){
                       index={index}
                       isDragDisabled={(column as any).isMetadata}
                     >
-                      {(provided, snapshot) => {
+                      {renderDraggable((provided) => {
                         return (
                           <div
                             {...column.getHeaderProps()}
-                            className='th noselect'
+                            className='th noselect header'
                           >
                             <div
+                              key={`div-Draggable-${column.id}`}
                               {...provided.draggableProps}
                               {...provided.dragHandleProps}
                               // {...extraProps}
                               ref={provided.innerRef}
-                              style={{
-                                ...DraggableStyle({
-                                  dragableProps: snapshot,
-                                  draggableStyle: provided.draggableProps.style
-                                })
-                                // ...style
-                              }}
                             >
                               {column.render("Header")}
                               {/* Use column.getResizerProps to hook up the events correctly */}
@@ -295,7 +295,7 @@ export function Table(initialState: TableDataType){
                             </div>
                           </div>
                         );
-                      }}
+                      })}
                     </Draggable>
                   ))}
                     {droppableProvided.placeholder}

src/components/portals/UseDraggableInPortal.ts

@@ -0,0 +1,32 @@
+import { DraggableProvided, DraggingStyle } from 'react-beautiful-dnd'
+import { ReactElement, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+export const useDraggableInPortal = () => {
+  const element = useRef<HTMLDivElement>(document.createElement('div')).current
+
+  useEffect(() => {
+    if (element) {
+      element.style.pointerEvents = 'none'
+      element.style.position = 'absolute'
+      element.style.height = '100%'
+      element.style.width = '100%'
+      element.style.top = '0'
+
+      document.body.appendChild(element)
+
+      return () => {
+        document.body.removeChild(element)
+      }
+    }
+  }, [element])
+
+  return (render: (provided: DraggableProvided) => ReactElement) => (provided: DraggableProvided) => {
+    const result = render(provided)
+    const style = provided.draggableProps.style as DraggingStyle
+    if (style.position === 'fixed') {
+      return createPortal(result, element)
+    }
+    return result
+  }
+}

src/components/styles/DragableStyle.ts

@@ -297,6 +297,7 @@ html {
 */
 .dbfolder-table-container tr input {
   background: var(--background-modifier-box-shadow);
+}
 
 .resizer {
   display: inline-block;
@@ -314,3 +315,8 @@ html {
 .isResizing {
   background: rgb(182, 119, 119);
 }
+
+.draggable {
+  top: auto !important;
+  left: auto !important;
+}