gantt-task-react-v 1.7.8 → 1.7.9

package/dist/gantt-task-react.es.js

@@ -5693,35 +5693,26 @@ const TaskListTableHeadersDefaultInner = ({
 }) => {
   const pinnedStyles = useMemo(() => {
     const result = {};
-    let leftOffset = 0;
-    if (canMoveTasks) {
-      leftOffset = 24;
-    }
+    const base = {
+      position: "relative",
+      zIndex: 3,
+      backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+    };
     for (let i = 0; i < columns.length; i++) {
       if (columns[i].pinned === "left") {
         result[i] = {
-          position: "sticky",
-          left: leftOffset,
-          zIndex: 3,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          ...base,
+          transform: "translateX(var(--pinned-translate-left, 0px))"
         };
-        leftOffset += columns[i].width;
-      }
-    }
-    let rightOffset = 0;
-    for (let i = columns.length - 1; i >= 0; i--) {
-      if (columns[i].pinned === "right") {
+      } else if (columns[i].pinned === "right") {
         result[i] = {
-          position: "sticky",
-          right: rightOffset,
-          zIndex: 3,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          ...base,
+          transform: "translateX(var(--pinned-translate-right, 0px))"
         };
-        rightOffset += columns[i].width;
       }
     }
     return result;
-  }, [columns, canMoveTasks]);
+  }, [columns]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -10496,10 +10487,7 @@ const TaskListTableRowInner = forwardRef(
             ...pinnedBase,
             transform: "translateX(var(--pinned-translate-left, 0px))"
           };
-        }
-      }
-      for (let i = columns.length - 1; i >= 0; i--) {
-        if (columns[i].pinned === "right") {
+        } else if (columns[i].pinned === "right") {
           result[i] = {
             ...pinnedBase,
             transform: "translateX(var(--pinned-translate-right, 0px))"
@@ -11195,10 +11183,13 @@ const TaskListInner = ({
     },
     [internalColumnVisibilityChange, onColumnVisibilityChange]
   );
-  const columns = useMemo(
-    () => allColumns.filter((col) => !col.hidden),
-    [allColumns]
-  );
+  const columns = useMemo(() => {
+    const visible = allColumns.filter((col) => !col.hidden);
+    const left = visible.filter((col) => col.pinned === "left");
+    const middle = visible.filter((col) => !col.pinned);
+    const right = visible.filter((col) => col.pinned === "right");
+    return [...left, ...middle, ...right];
+  }, [allColumns]);
   const horizontalScrollRef = useRef(null);
   const setHorizontalScrollRef = useCallback(
     (el) => {
@@ -11217,11 +11208,12 @@ const TaskListInner = ({
     const update = () => {
       const sl = scrollEl.scrollLeft;
       const maxSl = scrollEl.scrollWidth - scrollEl.clientWidth;
-      containerEl.style.setProperty("--pinned-translate-left", `${sl}px`);
-      containerEl.style.setProperty(
-        "--pinned-translate-right",
-        `${sl - maxSl}px`
-      );
+      const leftVal = `${sl}px`;
+      const rightVal = `${sl - maxSl}px`;
+      scrollEl.style.setProperty("--pinned-translate-left", leftVal);
+      scrollEl.style.setProperty("--pinned-translate-right", rightVal);
+      containerEl.style.setProperty("--pinned-translate-left", leftVal);
+      containerEl.style.setProperty("--pinned-translate-right", rightVal);
     };
     update();
     scrollEl.addEventListener("scroll", update, { passive: true });

package/dist/gantt-task-react.umd.js

@@ -5710,35 +5710,26 @@
   }) => {
     const pinnedStyles = React.useMemo(() => {
       const result = {};
-      let leftOffset = 0;
-      if (canMoveTasks) {
-        leftOffset = 24;
-      }
+      const base = {
+        position: "relative",
+        zIndex: 3,
+        backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+      };
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            position: "sticky",
-            left: leftOffset,
-            zIndex: 3,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            ...base,
+            transform: "translateX(var(--pinned-translate-left, 0px))"
           };
-          leftOffset += columns[i].width;
-        }
-      }
-      let rightOffset = 0;
-      for (let i = columns.length - 1; i >= 0; i--) {
-        if (columns[i].pinned === "right") {
+        } else if (columns[i].pinned === "right") {
           result[i] = {
-            position: "sticky",
-            right: rightOffset,
-            zIndex: 3,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            ...base,
+            transform: "translateX(var(--pinned-translate-right, 0px))"
           };
-          rightOffset += columns[i].width;
         }
       }
       return result;
-    }, [columns, canMoveTasks]);
+    }, [columns]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -10513,10 +10504,7 @@
               ...pinnedBase,
               transform: "translateX(var(--pinned-translate-left, 0px))"
             };
-          }
-        }
-        for (let i = columns.length - 1; i >= 0; i--) {
-          if (columns[i].pinned === "right") {
+          } else if (columns[i].pinned === "right") {
             result[i] = {
               ...pinnedBase,
               transform: "translateX(var(--pinned-translate-right, 0px))"
@@ -11212,10 +11200,13 @@
       },
       [internalColumnVisibilityChange, onColumnVisibilityChange]
     );
-    const columns = React.useMemo(
-      () => allColumns.filter((col) => !col.hidden),
-      [allColumns]
-    );
+    const columns = React.useMemo(() => {
+      const visible = allColumns.filter((col) => !col.hidden);
+      const left = visible.filter((col) => col.pinned === "left");
+      const middle = visible.filter((col) => !col.pinned);
+      const right = visible.filter((col) => col.pinned === "right");
+      return [...left, ...middle, ...right];
+    }, [allColumns]);
     const horizontalScrollRef = React.useRef(null);
     const setHorizontalScrollRef = React.useCallback(
       (el) => {
@@ -11234,11 +11225,12 @@
       const update = () => {
         const sl = scrollEl.scrollLeft;
         const maxSl = scrollEl.scrollWidth - scrollEl.clientWidth;
-        containerEl.style.setProperty("--pinned-translate-left", `${sl}px`);
-        containerEl.style.setProperty(
-          "--pinned-translate-right",
-          `${sl - maxSl}px`
-        );
+        const leftVal = `${sl}px`;
+        const rightVal = `${sl - maxSl}px`;
+        scrollEl.style.setProperty("--pinned-translate-left", leftVal);
+        scrollEl.style.setProperty("--pinned-translate-right", rightVal);
+        containerEl.style.setProperty("--pinned-translate-left", leftVal);
+        containerEl.style.setProperty("--pinned-translate-right", rightVal);
       };
       update();
       scrollEl.addEventListener("scroll", update, { passive: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",