Merge pull request #1395 from gregnb/ddFix

Fix 1393 / Draggable column with no select column don't work correctly if there's a left margin
gregnb · Jul 9, 2020 · cf13efb · cf13efb
2 parents 468c9c7 + 37cec0e
commit cf13efb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
@@ -77,6 +77,8 @@
     "prismjs": "^1.20.0",
     "raw-loader": "^4.0.1",
     "react": "^16.13.0",
+    "react-dnd-test-backend": "^11.1.3",
+    "react-dnd-test-utils": "^11.1.3",
     "react-dom": "^16.13.0",
     "react-router-dom": "^5.0.1",
     "react-waypoint": "^9.0.3",

diff --git a/src/hooks/useColumnDrop.js b/src/hooks/useColumnDrop.js
@@ -6,10 +6,25 @@ import { useDrop } from 'react-dnd';
 
 const getColModel = (headCellRefs, columnOrder, columns) => {
   let colModel = [];
-  let selectCellHead = headCellRefs[0] ? headCellRefs[0] : { offsetParent: 0, offsetWidth: 0, offsetLeft: 0 };
+  let leftMostCell = headCellRefs[0] ? headCellRefs[0] : null; // left most cell is the select cell, if it exists
+
+  if (leftMostCell === null) {
+    leftMostCell = { offsetLeft: Infinity };
+    let headCells = Object.entries(headCellRefs);
+    headCells.forEach(([key, item], idx) => {
+      if (item && item.offsetLeft < leftMostCell.offsetLeft) {
+        leftMostCell = item;
+      }
+    });
+
+    if (leftMostCell.offsetLeft === Infinity) {
+      leftMostCell = { offsetParent: 0, offsetWidth: 0, offsetLeft: 0 };
+    }
+  }
+
   let ii = 0,
     parentOffsetLeft = 0,
-    offsetParent = selectCellHead.offsetParent;
+    offsetParent = leftMostCell.offsetParent;
   while (offsetParent) {
     parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0);
     offsetParent = offsetParent.offsetParent;
@@ -20,21 +35,26 @@ const getColModel = (headCellRefs, columnOrder, columns) => {
     }
   }
 
-  colModel[0] = {
-    left: parentOffsetLeft + selectCellHead.offsetLeft,
-    width: selectCellHead.offsetWidth,
-    columnIndex: null,
-    ref: selectCellHead,
-  };
+  // if the select cell is present, make sure it is apart of the column model
+  if (headCellRefs[0]) {
+    colModel[0] = {
+      left: parentOffsetLeft + leftMostCell.offsetLeft,
+      width: leftMostCell.offsetWidth,
+      columnIndex: null,
+      ref: leftMostCell,
+    };
+  }
 
   columnOrder.forEach((colIdx, idx) => {
     let col = headCellRefs[colIdx + 1];
     let cmIndx = colModel.length - 1;
     if (columns[colIdx] && columns[colIdx].display !== 'true') {
       // skip
     } else {
+      let prevLeft =
+        cmIndx !== -1 ? colModel[cmIndx].left + colModel[cmIndx].width : parentOffsetLeft + leftMostCell.offsetLeft;
       colModel.push({
-        left: colModel[cmIndx].left + colModel[cmIndx].width,
+        left: prevLeft,
         width: col.offsetWidth,
         columnIndex: colIdx,
         ref: col,