gantt-task-react-v 1.7.4 → 1.7.6

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

@@ -5703,7 +5703,8 @@ const TaskListTableHeadersDefaultInner = ({
           position: "sticky",
           left: leftOffset,
           zIndex: 2,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+          paddingRight: 8
         };
         leftOffset += columns[i].width;
       }
@@ -5715,7 +5716,8 @@ const TaskListTableHeadersDefaultInner = ({
           position: "sticky",
           right: rightOffset,
           zIndex: 2,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+          paddingLeft: 8
         };
         rightOffset += columns[i].width;
       }
@@ -10475,13 +10477,21 @@ const TaskListTableRowInner = forwardRef(
     }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
     const pinnedStyles = useMemo(() => {
       const result = {};
+      const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
             position: "relative",
             transform: "translateX(var(--pinned-translate-left, 0px))",
             zIndex: 2,
-            backgroundColor: "inherit"
+            backgroundColor: pinnedBg,
+            // box-shadow + clip-path create a bulletproof opaque cover that
+            // extends 10px past the cell's right edge, hiding any content
+            // that scrolls underneath.  clip-path trims the shadow to
+            // exactly the cell bounds plus the 10px overhang.
+            boxShadow: `0 0 0 9999px ${pinnedBg}`,
+            clipPath: "inset(0px -10px 0px 0px)",
+            paddingRight: 10
           };
         }
       }
@@ -10491,12 +10501,15 @@ const TaskListTableRowInner = forwardRef(
             position: "relative",
             transform: "translateX(var(--pinned-translate-right, 0px))",
             zIndex: 2,
-            backgroundColor: "inherit"
+            backgroundColor: pinnedBg,
+            boxShadow: `0 0 0 9999px ${pinnedBg}`,
+            clipPath: "inset(0px 0px 0px -10px)",
+            paddingLeft: 10
           };
         }
       }
       return result;
-    }, [columns]);
+    }, [columns, backgroundColor]);
     return /* @__PURE__ */ jsxs(
       "div",
       {

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

@@ -5720,7 +5720,8 @@
             position: "sticky",
             left: leftOffset,
             zIndex: 2,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+            paddingRight: 8
           };
           leftOffset += columns[i].width;
         }
@@ -5732,7 +5733,8 @@
             position: "sticky",
             right: rightOffset,
             zIndex: 2,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+            paddingLeft: 8
           };
           rightOffset += columns[i].width;
         }
@@ -10492,13 +10494,21 @@
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
       const pinnedStyles = React.useMemo(() => {
         const result = {};
+        const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
         for (let i = 0; i < columns.length; i++) {
           if (columns[i].pinned === "left") {
             result[i] = {
               position: "relative",
               transform: "translateX(var(--pinned-translate-left, 0px))",
               zIndex: 2,
-              backgroundColor: "inherit"
+              backgroundColor: pinnedBg,
+              // box-shadow + clip-path create a bulletproof opaque cover that
+              // extends 10px past the cell's right edge, hiding any content
+              // that scrolls underneath.  clip-path trims the shadow to
+              // exactly the cell bounds plus the 10px overhang.
+              boxShadow: `0 0 0 9999px ${pinnedBg}`,
+              clipPath: "inset(0px -10px 0px 0px)",
+              paddingRight: 10
             };
           }
         }
@@ -10508,12 +10518,15 @@
               position: "relative",
               transform: "translateX(var(--pinned-translate-right, 0px))",
               zIndex: 2,
-              backgroundColor: "inherit"
+              backgroundColor: pinnedBg,
+              boxShadow: `0 0 0 9999px ${pinnedBg}`,
+              clipPath: "inset(0px 0px 0px -10px)",
+              paddingLeft: 10
             };
           }
         }
         return result;
-      }, [columns]);
+      }, [columns, backgroundColor]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {

package/package.json

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