fix(AnalyticalTable): insert reordered column in the correct place (#626)

Author: vbersch

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -4452,9 +4452,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
     >
       <div
         class="AnalyticalTable-th-0"
-        data-column-id="age"
+        data-column-id="name"
         draggable="true"
-        id="age"
+        id="name"
         role="columnheader"
         style="position: relative; width: 150px; cursor: pointer;"
       >
@@ -4463,9 +4463,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         >
           <span
             class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-            title="Age"
+            title="Name"
           >
-            Age
+            Name
           </span>
           <div
             class="TableColumnHeader-iconContainer-0"
@@ -4510,9 +4510,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       />
       <div
         class="AnalyticalTable-th-0"
-        data-column-id="name"
+        data-column-id="age"
         draggable="true"
-        id="name"
+        id="age"
         role="columnheader"
         style="position: relative; width: 150px; cursor: pointer;"
       >
@@ -4521,9 +4521,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         >
           <span
             class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-            title="Name"
+            title="Age"
           >
-            Name
+            Age
           </span>
           <div
             class="TableColumnHeader-iconContainer-0"
@@ -4707,9 +4707,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0"
-              title="40"
+              title="Fra"
             >
-              40
+              Fra
             </span>
           </div>
           <div
@@ -4721,9 +4721,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0"
-              title="Fra"
+              title="40"
             >
-              Fra
+              40
             </span>
           </div>
           <div
@@ -4770,9 +4770,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0"
-              title="20"
+              title="bla"
             >
-              20
+              bla
             </span>
           </div>
           <div
@@ -4784,9 +4784,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0"
-              title="bla"
+              title="20"
             >
-              bla
+              20
             </span>
           </div>
           <div

packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts

@@ -42,7 +42,10 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo, c
       const draggedColIdx = internalColumnOrder.findIndex((col) => col === draggedColId);
 
       const tempCols = [...internalColumnOrder];
-      tempCols.splice(droppedColIdx, 0, tempCols.splice(draggedColIdx, 1)[0]);
+
+      const targetIndex = droppedColIdx > draggedColIdx ? droppedColIdx - 1 : droppedColIdx;
+
+      tempCols.splice(targetIndex, 0, tempCols.splice(draggedColIdx, 1)[0]);
       setColumnOrder(tempCols);
 
       const columnsNewOrder = tempCols.map((tempColId) => columns.find((col) => getColumnId(col) === tempColId));
@@ -53,7 +56,7 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo, c
         })
       );
     },
-    [columnOrder, onColumnsReordered]
+    [columnOrder, onColumnsReordered, columns]
   );
 
   const handleOnDragEnd = useCallback(() => {