gantt-task-react-powern 0.6.16 → 0.6.19

package/dist/index.modern.js

@@ -315,7 +315,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       minWidth: parseInt(rowWidth) * 0.8,
       maxWidth: parseInt(rowWidth) * 0.8
     }
-  }, "WBS"), React.createElement("div", {
+  }, "ID"), React.createElement("div", {
     className: styles.ganttTable_HeaderSeparator,
     style: {
       height: headerHeight * 0.5,
@@ -327,7 +327,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       minWidth: parseInt(rowWidth) * 0.8,
       maxWidth: parseInt(rowWidth) * 0.8
     }
-  }, "ID"), React.createElement("div", {
+  }, "WBS Code / Activity ID"), React.createElement("div", {
     className: styles.ganttTable_HeaderSeparator,
     style: {
       height: headerHeight * 0.5,
@@ -381,7 +381,72 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       minWidth: parseInt(rowWidth) * 0.6
     },
     title: "Planned End"
-  }, "Actual End")));
+  }, "Actual End"), scheduleType === "main" && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6,
+      maxWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "% Complete"
+  }, "% Complete"), React.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6,
+      maxWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Planned Duration"
+  }, "Planned Duration"), React.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.7,
+      maxWidth: parseInt(rowWidth) * 0.7
+    },
+    title: "Remaining Duration"
+  }, "Remaining Duration"), React.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6,
+      maxWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Actual Duration"
+  }, "Actual Duration"), React.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.8,
+      maxWidth: parseInt(rowWidth) * 0.8
+    },
+    title: "Duration Type"
+  }, "Duration Type"))));
 };
 
 var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
@@ -592,7 +657,61 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions)))));
+    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))), scheduleType === "main" && function () {
+      var _t$progress, _t$durationType;
+
+      var percentComplete = t.percentComplete != null ? t.percentComplete : (_t$progress = t.progress) != null ? _t$progress : 0;
+      var plannedDuration = t.plannedDuration != null ? t.plannedDuration : null;
+      var remainingDuration = plannedDuration != null ? Math.round(plannedDuration - plannedDuration * (percentComplete / 100)) : null;
+
+      var actualDuration = function () {
+        if (!t.actualStart || t.actualStart.getTime() === 0) return null;
+        var endRef = t.actualEnd && t.actualEnd.getTime() > 0 ? t.actualEnd : new Date();
+        return Math.ceil((endRef.getTime() - t.actualStart.getTime()) / (1000 * 60 * 60 * 24));
+      }();
+
+      return React.createElement(React.Fragment, null, React.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.5,
+          maxWidth: parseInt(rowWidth) * 0.5
+        }
+      }, React.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", percentComplete != null ? percentComplete + "%" : "")), React.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.6,
+          maxWidth: parseInt(rowWidth) * 0.6
+        }
+      }, React.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", plannedDuration != null ? plannedDuration : "")), React.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.7,
+          maxWidth: parseInt(rowWidth) * 0.7
+        }
+      }, React.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", remainingDuration != null ? remainingDuration : "")), React.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.6,
+          maxWidth: parseInt(rowWidth) * 0.6
+        }
+      }, React.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", actualDuration != null ? actualDuration : "")), React.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.8,
+          maxWidth: parseInt(rowWidth) * 0.8
+        }
+      }, React.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", (_t$durationType = t.durationType) != null ? _t$durationType : "Activity Calendar")));
+    }()));
   }));
 };
 
@@ -751,6 +870,8 @@ var VerticalScroll = function VerticalScroll(_ref) {
   }));
 };
 
+var styles$4 = {"hideScrollbar":"_38emS"};
+
 var TaskList = function TaskList(_ref) {
   var headerHeight = _ref.headerHeight,
       fontFamily = _ref.fontFamily,
@@ -771,7 +892,9 @@ var TaskList = function TaskList(_ref) {
       TaskListHeader = _ref.TaskListHeader,
       TaskListTable = _ref.TaskListTable,
       taskLabelRenderer = _ref.taskLabelRenderer,
-      onMultiSelect = _ref.onMultiSelect;
+      onMultiSelect = _ref.onMultiSelect,
+      containerWidth = _ref.containerWidth,
+      innerScrollRef = _ref.innerScrollRef;
   var horizontalContainerRef = useRef(null);
 
   var _useState = useState([]),
@@ -949,7 +1072,18 @@ var TaskList = function TaskList(_ref) {
     virtualItems: virtualizer.getVirtualItems()
   };
   return React.createElement("div", {
-    ref: taskListRef
+    ref: taskListRef,
+    style: containerWidth != null ? {
+      width: containerWidth,
+      overflow: "hidden",
+      flexShrink: 0
+    } : {}
+  }, React.createElement("div", {
+    ref: innerScrollRef,
+    className: styles$4.hideScrollbar,
+    style: {
+      overflowX: "auto"
+    }
   }, React.createElement(TaskListHeader, Object.assign({}, headerProps)), React.createElement("div", {
     ref: horizontalContainerRef,
     className: horizontalContainerClass,
@@ -962,10 +1096,10 @@ var TaskList = function TaskList(_ref) {
       width: "100%",
       position: "relative"
     }
-  }, React.createElement(TaskListTable, Object.assign({}, tableProps)))));
+  }, React.createElement(TaskListTable, Object.assign({}, tableProps))))));
 };
 
-var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
+var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
 
 var GridBody = function GridBody(_ref) {
   var tasks = _ref.tasks,
@@ -1046,7 +1180,7 @@ var GridBody = function GridBody(_ref) {
       y1: visibleStartY,
       x2: i * columnWidth,
       y2: visibleEndY,
-      className: styles$4.gridTick
+      className: styles$5.gridTick
     });
   });
   var rowBackgrounds = [];
@@ -1057,7 +1191,7 @@ var GridBody = function GridBody(_ref) {
     y1: visibleStartY,
     x2: svgWidth,
     y2: visibleStartY,
-    className: styles$4.gridRowLine
+    className: styles$5.gridRowLine
   }));
 
   for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
@@ -1066,7 +1200,7 @@ var GridBody = function GridBody(_ref) {
     if (!task) break;
     var y = vi.start;
     var isMilestone = task.type === "milestone";
-    var rowClass = isMilestone ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow;
+    var rowClass = isMilestone ? styles$5.darkerGridRow : scheduleType === "lookAhead" ? styles$5.gridRowLookAhead : styles$5.gridRow;
     rowBackgrounds.push(React.createElement("rect", {
       key: "bg-" + vi.key,
       x: 0,
@@ -1081,7 +1215,7 @@ var GridBody = function GridBody(_ref) {
       y1: y + rowHeight,
       x2: svgWidth,
       y2: y + rowHeight,
-      className: styles$4.gridRowLine
+      className: styles$5.gridRowLine
     }));
   }
 
@@ -1106,7 +1240,7 @@ var Grid = function Grid(props) {
   }, React.createElement(GridBody, Object.assign({}, props)));
 };
 
-var styles$5 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
+var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
 var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
   var value = _ref.value,
@@ -1117,7 +1251,7 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
       yText = _ref.yText,
       _ref$textAnchor = _ref.textAnchor,
       textAnchor = _ref$textAnchor === void 0 ? "middle" : _ref$textAnchor;
-  var textAnchorClass = textAnchor === "start" ? styles$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
+  var textAnchorClass = textAnchor === "start" ? styles$6.textAnchorStart : textAnchor === "middle" ? styles$6.textAnchorMiddle : styles$6.textAnchorEnd;
   return React.createElement("g", {
     className: "calendarTop"
   }, React.createElement("line", {
@@ -1125,13 +1259,13 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     y1: y1Line,
     x2: x1Line,
     y2: y2Line,
-    className: styles$5.calendarTopTick,
+    className: styles$6.calendarTopTick,
     key: value + "line"
   }), React.createElement("text", {
     key: value + "text",
     y: yText,
     x: xText,
-    className: styles$5.calendarTopText + " " + textAnchorClass
+    className: styles$6.calendarTopText + " " + textAnchorClass
   }, value));
 };
 
@@ -1157,7 +1291,7 @@ var Calendar = function Calendar(_ref) {
         key: date.getFullYear(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$5.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
@@ -1198,7 +1332,7 @@ var Calendar = function Calendar(_ref) {
         key: bottomValue + "-" + date.getFullYear(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$5.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
@@ -1240,7 +1374,7 @@ var Calendar = function Calendar(_ref) {
         key: bottomValue + date.getFullYear(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorEnd
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorEnd
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
@@ -1290,7 +1424,7 @@ var Calendar = function Calendar(_ref) {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorStart
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorStart
       }, bottomValue));
 
       if (topValue) {
@@ -1329,7 +1463,7 @@ var Calendar = function Calendar(_ref) {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
       }, bottomValue));
 
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
@@ -1379,7 +1513,7 @@ var Calendar = function Calendar(_ref) {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle,
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle,
         fontFamily: fontFamily
       }, bottomValue));
 
@@ -1415,7 +1549,7 @@ var Calendar = function Calendar(_ref) {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$5.calendarBottomText,
+        className: styles$6.calendarBottomText,
         fontFamily: fontFamily
       }, bottomValue));
 
@@ -1502,7 +1636,7 @@ var Calendar = function Calendar(_ref) {
     y: 0,
     width: columnWidth * dateSetup.dates.length,
     height: headerHeight,
-    className: styles$5.calendarHeader
+    className: styles$6.calendarHeader
   }), bottomValues, " ", topValues);
 };
 
@@ -2154,7 +2288,7 @@ var BarDisplay = function BarDisplay(_ref) {
   }));
 };
 
-var styles$6 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
+var styles$7 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
 
 var BarDateHandle = function BarDateHandle(_ref) {
   var x = _ref.x,
@@ -2168,7 +2302,7 @@ var BarDateHandle = function BarDateHandle(_ref) {
     y: y,
     width: width,
     height: height,
-    className: styles$6.barHandle,
+    className: styles$7.barHandle,
     ry: barCornerRadius,
     rx: barCornerRadius,
     onMouseDown: onMouseDown
@@ -2194,7 +2328,7 @@ var Bar = function Bar(_ref) {
 
   if (type == "planned") {
     if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0 && task.x2 - task.x1 >= 0) return React.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     }, React.createElement(BarDisplay, {
       x: task.x1,
@@ -2238,12 +2372,12 @@ var Bar = function Bar(_ref) {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     });
   } else if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0 && task.actualx2 - task.actualx1 >= 0) {
     return React.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     }, React.createElement(BarDisplay, {
       x: task.actualx1,
@@ -2289,7 +2423,7 @@ var Bar = function Bar(_ref) {
     })));
   } else {
     return React.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     });
   }
@@ -2304,7 +2438,7 @@ var BarSmall = function BarSmall(_ref) {
       isSelected = _ref.isSelected;
   var progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
   return React.createElement("g", {
-    className: styles$6.barWrapper,
+    className: styles$7.barWrapper,
     tabIndex: 0
   }, React.createElement(BarDisplay, {
     x: task.x1,
@@ -2332,7 +2466,7 @@ var BarSmall = function BarSmall(_ref) {
   })));
 };
 
-var styles$7 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
+var styles$8 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
 
 var Milestone = function Milestone(_ref) {
   var task = _ref.task,
@@ -2347,7 +2481,7 @@ var Milestone = function Milestone(_ref) {
 
   return React.createElement("g", {
     tabIndex: 0,
-    className: styles$7.milestoneWrapper
+    className: styles$8.milestoneWrapper
   }, React.createElement("rect", {
     fill: getBarColor(),
     x: task.x1,
@@ -2357,7 +2491,7 @@ var Milestone = function Milestone(_ref) {
     rx: task.barCornerRadius,
     ry: task.barCornerRadius,
     transform: transform,
-    className: styles$7.milestoneBackground,
+    className: styles$8.milestoneBackground,
     onMouseDown: function onMouseDown(e) {
       isDateChangeable && onEventStart("move", task, e, "planned");
     },
@@ -2367,7 +2501,7 @@ var Milestone = function Milestone(_ref) {
   }));
 };
 
-var styles$8 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
+var styles$9 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
 
 var Project = function Project(_ref) {
   var task = _ref.task,
@@ -2379,7 +2513,7 @@ var Project = function Project(_ref) {
   var projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
   return React.createElement("g", {
     tabIndex: 0,
-    className: styles$8.projectWrapper
+    className: styles$9.projectWrapper
   }, React.createElement("rect", {
     fill: barColor,
     x: task.x1,
@@ -2388,7 +2522,7 @@ var Project = function Project(_ref) {
     height: task.height,
     rx: task.barCornerRadius,
     ry: task.barCornerRadius,
-    className: styles$8.projectBackground
+    className: styles$9.projectBackground
   }), React.createElement("rect", {
     x: task.progressX,
     width: task.progressWidth,
@@ -2405,13 +2539,13 @@ var Project = function Project(_ref) {
     height: task.height / 2,
     rx: task.barCornerRadius,
     ry: task.barCornerRadius,
-    className: styles$8.projectTop
+    className: styles$9.projectTop
   }), React.createElement("polygon", {
-    className: styles$8.projectTop,
+    className: styles$9.projectTop,
     points: projectLeftTriangle,
     fill: barColor
   }), React.createElement("polygon", {
-    className: styles$8.projectTop,
+    className: styles$9.projectTop,
     points: projectRightTriangle,
     fill: barColor
   }));
@@ -2851,7 +2985,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
   })));
 };
 
-var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf","alertContainer":"_2AxB2","success":"_1a-EU","warning":"_1TP0x","error":"_2TeAI","alertDismissCheckbox":"_3cBUj","alertCloseButton":"_5jQM6","spinner":"_3HJjy","spin":"_1W2rn"};
+var styles$a = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf","alertContainer":"_2AxB2","success":"_1a-EU","warning":"_1TP0x","error":"_2TeAI","alertDismissCheckbox":"_3cBUj","alertCloseButton":"_5jQM6","spinner":"_3HJjy","spin":"_1W2rn"};
 
 var TaskGantt = function TaskGantt(_ref) {
   var gridProps = _ref.gridProps,
@@ -2894,7 +3028,7 @@ var TaskGantt = function TaskGantt(_ref) {
     }
   }, [scrollX]);
   return React.createElement("div", {
-    className: styles$9.ganttVerticalContainer,
+    className: styles$a.ganttVerticalContainer,
     ref: verticalGanttContainerRef,
     dir: "ltr"
   }, React.createElement("svg", {
@@ -2904,7 +3038,7 @@ var TaskGantt = function TaskGantt(_ref) {
     fontFamily: barProps.fontFamily
   }, React.createElement(Calendar, Object.assign({}, calendarProps))), React.createElement("div", {
     ref: horizontalContainerRef,
-    className: styles$9.horizontalContainer,
+    className: styles$a.horizontalContainer,
     style: ganttHeight ? {
       height: ganttHeight,
       width: gridProps.svgWidth
@@ -2928,7 +3062,7 @@ var TaskGantt = function TaskGantt(_ref) {
   })))));
 };
 
-var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
+var hScrollStyles = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
 
 var HorizontalScroll = function HorizontalScroll(_ref) {
   var scroll = _ref.scroll,
@@ -2947,14 +3081,14 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
     style: {
       margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
     },
-    className: styles$a.scrollWrapper,
+    className: hScrollStyles.scrollWrapper,
     onScroll: onScroll,
     ref: scrollRef
   }, React.createElement("div", {
     style: {
       width: svgWidth
     },
-    className: styles$a.scroll
+    className: hScrollStyles.scroll
   }));
 };
 
@@ -3048,8 +3182,23 @@ var Gantt = function Gantt(_ref) {
       shouldNotShowLoadingOverlay = _ref$shouldNotShowLoa === void 0 ? true : _ref$shouldNotShowLoa;
   var wrapperRef = useRef(null);
   var taskListRef = useRef(null);
+  var isDraggingTable = useRef(false);
+  var dragStartX = useRef(0);
+  var dragStartWidth = useRef(0);
+  var dragMaxWidth = useRef(Infinity);
 
-  var _useState = useState(function () {
+  var _useState = useState(null),
+      tableContainerWidth = _useState[0],
+      setTableContainerWidth = _useState[1];
+
+  var tableInnerScrollRef = useRef(null);
+  var tableHScrollRef = useRef(null);
+
+  var _useState2 = useState(0),
+      tableScrollableWidth = _useState2[0],
+      setTableScrollableWidth = _useState2[1];
+
+  var _useState3 = useState(function () {
     var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
         startDateRange = _ganttDateRange[0],
         endDateRange = _ganttDateRange[1];
@@ -3066,77 +3215,113 @@ var Gantt = function Gantt(_ref) {
       dates: seedDates(startDateRange, endDateRange, viewMode)
     };
   }),
-      dateSetup = _useState[0],
-      setDateSetup = _useState[1];
+      dateSetup = _useState3[0],
+      setDateSetup = _useState3[1];
+
+  var _useState4 = useState(undefined),
+      currentViewDate = _useState4[0],
+      setCurrentViewDate = _useState4[1];
+
+  var _useState5 = useState(0),
+      taskListWidth = _useState5[0],
+      setTaskListWidth = _useState5[1];
+
+  useEffect(function () {
+    if (tableInnerScrollRef.current) {
+      setTableScrollableWidth(tableInnerScrollRef.current.scrollWidth);
+    }
+  }, [taskListWidth, listCellWidth]);
+
+  var handleTableResizeMouseDown = function handleTableResizeMouseDown(e) {
+    var _taskListRef$current$, _taskListRef$current, _tableInnerScrollRef$, _tableInnerScrollRef$2, _wrapperRef$current$o, _wrapperRef$current;
+
+    isDraggingTable.current = true;
+    dragStartX.current = e.clientX;
+    dragStartWidth.current = tableContainerWidth != null ? tableContainerWidth : (_taskListRef$current$ = (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.offsetWidth) != null ? _taskListRef$current$ : 0;
+    dragMaxWidth.current = (_tableInnerScrollRef$ = (_tableInnerScrollRef$2 = tableInnerScrollRef.current) === null || _tableInnerScrollRef$2 === void 0 ? void 0 : _tableInnerScrollRef$2.scrollWidth) != null ? _tableInnerScrollRef$ : Math.max(100, ((_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) != null ? _wrapperRef$current$o : Infinity) - 200);
+    e.preventDefault();
+  };
+
+  useEffect(function () {
+    var onMouseMove = function onMouseMove(e) {
+      if (!isDraggingTable.current) return;
+      var newWidth = Math.min(dragMaxWidth.current, Math.max(100, dragStartWidth.current + (e.clientX - dragStartX.current)));
+      setTableContainerWidth(newWidth);
+      setTaskListWidth(newWidth);
+    };
 
-  var _useState2 = useState(undefined),
-      currentViewDate = _useState2[0],
-      setCurrentViewDate = _useState2[1];
+    var onMouseUp = function onMouseUp() {
+      isDraggingTable.current = false;
+    };
 
-  var _useState3 = useState(0),
-      taskListWidth = _useState3[0],
-      setTaskListWidth = _useState3[1];
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return function () {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
 
-  var _useState4 = useState(0),
-      svgContainerWidth = _useState4[0],
-      setSvgContainerWidth = _useState4[1];
+  var _useState6 = useState(0),
+      svgContainerWidth = _useState6[0],
+      setSvgContainerWidth = _useState6[1];
 
-  var _useState5 = useState(ganttHeight),
-      svgContainerHeight = _useState5[0],
-      setSvgContainerHeight = _useState5[1];
+  var _useState7 = useState(ganttHeight),
+      svgContainerHeight = _useState7[0],
+      setSvgContainerHeight = _useState7[1];
 
-  var _useState6 = useState([]),
-      barTasks = _useState6[0],
-      setBarTasks = _useState6[1];
+  var _useState8 = useState([]),
+      barTasks = _useState8[0],
+      setBarTasks = _useState8[1];
 
   var debounceRef = useRef(null);
 
-  var _useState7 = useState({
+  var _useState9 = useState({
     action: ""
   }),
-      ganttEvent = _useState7[0],
-      setGanttEvent = _useState7[1];
+      ganttEvent = _useState9[0],
+      setGanttEvent = _useState9[1];
 
   var taskHeight = useMemo(function () {
     return rowHeight * barFill / 100;
   }, [rowHeight, barFill]);
 
-  var _useState8 = useState(),
-      selectedTask = _useState8[0],
-      setSelectedTask = _useState8[1];
+  var _useState10 = useState(),
+      selectedTask = _useState10[0],
+      setSelectedTask = _useState10[1];
 
-  var _useState9 = useState(null),
-      failedTask = _useState9[0],
-      setFailedTask = _useState9[1];
+  var _useState11 = useState(null),
+      failedTask = _useState11[0],
+      setFailedTask = _useState11[1];
 
   var svgWidth = columnWidth < 55 ? (dateSetup.dates.length + 0.5) * columnWidth : dateSetup.dates.length * columnWidth;
   var ganttFullHeight = useMemo(function () {
     return barTasks.length * rowHeight;
   }, [barTasks.length, rowHeight]);
 
-  var _useState10 = useState(0),
-      scrollY = _useState10[0],
-      setScrollY = _useState10[1];
+  var _useState12 = useState(0),
+      scrollY = _useState12[0],
+      setScrollY = _useState12[1];
 
-  var _useState11 = useState(-1),
-      scrollX = _useState11[0],
-      setScrollX = _useState11[1];
+  var _useState13 = useState(-1),
+      scrollX = _useState13[0],
+      setScrollX = _useState13[1];
 
-  var _useState12 = useState(false),
-      ignoreScrollEvent = _useState12[0],
-      setIgnoreScrollEvent = _useState12[1];
+  var _useState14 = useState(false),
+      ignoreScrollEvent = _useState14[0],
+      setIgnoreScrollEvent = _useState14[1];
 
-  var _useState13 = useState(0),
-      lastTouchX = _useState13[0],
-      setLastTouchX = _useState13[1];
+  var _useState15 = useState(0),
+      lastTouchX = _useState15[0],
+      setLastTouchX = _useState15[1];
 
-  var _useState14 = useState(0),
-      lastTouchY = _useState14[0],
-      setLastTouchY = _useState14[1];
+  var _useState16 = useState(0),
+      lastTouchY = _useState16[0],
+      setLastTouchY = _useState16[1];
 
-  var _useState15 = useState(false),
-      isProcessing = _useState15[0],
-      setIsProcessing = _useState15[1];
+  var _useState17 = useState(false),
+      isProcessing = _useState17[0],
+      setIsProcessing = _useState17[1];
 
   var buffer = rowHeight * 10;
   var visibleStartY = scrollY - buffer;
@@ -3279,7 +3464,7 @@ var Gantt = function Gantt(_ref) {
     }
   }, [ganttHeight, tasks, headerHeight, rowHeight]);
   useEffect(function () {
-    var _wrapperRef$current, _wrapperRef$current2, _wrapperRef$current3, _wrapperRef$current4;
+    var _wrapperRef$current2, _wrapperRef$current3, _wrapperRef$current4, _wrapperRef$current5;
 
     var handleWheel = function handleWheel(event) {
       if (event.shiftKey || event.deltaX) {
@@ -3353,25 +3538,25 @@ var Gantt = function Gantt(_ref) {
       setIgnoreScrollEvent(true);
     };
 
-    (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("wheel", handleWheel, {
+    (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.addEventListener("wheel", handleWheel, {
       passive: false
     });
-    (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.addEventListener("touchmove", handleTouch, {
+    (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.addEventListener("touchmove", handleTouch, {
       passive: false
     });
-    (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.addEventListener("touchstart", handleLogTouch, {
+    (_wrapperRef$current4 = wrapperRef.current) === null || _wrapperRef$current4 === void 0 ? void 0 : _wrapperRef$current4.addEventListener("touchstart", handleLogTouch, {
       passive: false
     });
-    (_wrapperRef$current4 = wrapperRef.current) === null || _wrapperRef$current4 === void 0 ? void 0 : _wrapperRef$current4.addEventListener("touchend", handleLogTouch, {
+    (_wrapperRef$current5 = wrapperRef.current) === null || _wrapperRef$current5 === void 0 ? void 0 : _wrapperRef$current5.addEventListener("touchend", handleLogTouch, {
       passive: false
     });
     return function () {
-      var _wrapperRef$current5, _wrapperRef$current6, _wrapperRef$current7, _wrapperRef$current8;
+      var _wrapperRef$current6, _wrapperRef$current7, _wrapperRef$current8, _wrapperRef$current9;
 
-      (_wrapperRef$current5 = wrapperRef.current) === null || _wrapperRef$current5 === void 0 ? void 0 : _wrapperRef$current5.removeEventListener("wheel", handleWheel);
-      (_wrapperRef$current6 = wrapperRef.current) === null || _wrapperRef$current6 === void 0 ? void 0 : _wrapperRef$current6.removeEventListener("touchmove", handleTouch);
-      (_wrapperRef$current7 = wrapperRef.current) === null || _wrapperRef$current7 === void 0 ? void 0 : _wrapperRef$current7.removeEventListener("touchend", handleLogTouch);
+      (_wrapperRef$current6 = wrapperRef.current) === null || _wrapperRef$current6 === void 0 ? void 0 : _wrapperRef$current6.removeEventListener("wheel", handleWheel);
+      (_wrapperRef$current7 = wrapperRef.current) === null || _wrapperRef$current7 === void 0 ? void 0 : _wrapperRef$current7.removeEventListener("touchmove", handleTouch);
       (_wrapperRef$current8 = wrapperRef.current) === null || _wrapperRef$current8 === void 0 ? void 0 : _wrapperRef$current8.removeEventListener("touchend", handleLogTouch);
+      (_wrapperRef$current9 = wrapperRef.current) === null || _wrapperRef$current9 === void 0 ? void 0 : _wrapperRef$current9.removeEventListener("touchend", handleLogTouch);
     };
   }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
 
@@ -3534,7 +3719,7 @@ var Gantt = function Gantt(_ref) {
     headerHeight: headerHeight,
     scrollY: scrollY,
     ganttHeight: ganttHeight,
-    horizontalContainerClass: styles$9.horizontalContainer,
+    horizontalContainerClass: styles$a.horizontalContainer,
     selectedTask: selectedTask,
     taskListRef: taskListRef,
     setSelectedTask: handleSelectedTask,
@@ -3543,18 +3728,37 @@ var Gantt = function Gantt(_ref) {
     TaskListHeader: TaskListHeader,
     TaskListTable: TaskListTable,
     taskLabelRenderer: taskLabelRenderer,
-    onMultiSelect: onMultiSelect
+    onMultiSelect: onMultiSelect,
+    containerWidth: tableContainerWidth != null ? tableContainerWidth : undefined,
+    innerScrollRef: tableInnerScrollRef
   };
   return React.createElement("div", {
     style: {
       position: "relative"
     }
   }, React.createElement("div", {
-    className: styles$9.wrapper,
+    className: styles$a.wrapper,
     onKeyDown: handleKeyDown,
     tabIndex: 0,
     ref: wrapperRef
-  }, listCellWidth && React.createElement(TaskList, Object.assign({}, tableProps)), React.createElement(TaskGantt, {
+  }, listCellWidth && React.createElement(TaskList, Object.assign({}, tableProps)), listCellWidth && scheduleType === "main" && React.createElement("div", {
+    style: {
+      width: "20px",
+      cursor: "col-resize",
+      backgroundColor: "#e0e0e0",
+      flexShrink: 0,
+      zIndex: 1,
+      alignSelf: "stretch",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      userSelect: "none",
+      fontSize: "10px",
+      color: "#666",
+      letterSpacing: "-1px"
+    },
+    onMouseDown: handleTableResizeMouseDown
+  }, "\u25C4|\u25BA"), React.createElement(TaskGantt, {
     gridProps: gridProps,
     calendarProps: calendarProps,
     barProps: barProps,
@@ -3608,14 +3812,39 @@ var Gantt = function Gantt(_ref) {
       fontFamily: "Arial, sans-serif"
     }
   }, "Loading..."), React.createElement("div", {
-    className: styles$9.spinner
-  })), React.createElement(HorizontalScroll, {
+    className: styles$a.spinner
+  })), React.createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, listCellWidth && React.createElement("div", {
+    ref: tableHScrollRef,
+    className: hScrollStyles.scrollWrapper,
+    style: {
+      width: taskListWidth + 4,
+      flexShrink: 0
+    },
+    onScroll: function onScroll(e) {
+      if (tableInnerScrollRef.current) {
+        tableInnerScrollRef.current.scrollLeft = e.currentTarget.scrollLeft;
+      }
+    }
+  }, React.createElement("div", {
+    style: {
+      width: tableScrollableWidth
+    }
+  })), React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, React.createElement(HorizontalScroll, {
     svgWidth: svgWidth,
-    taskListWidth: taskListWidth,
+    taskListWidth: 0,
     scroll: scrollX,
     rtl: rtl,
     onScroll: handleScrollX
-  }));
+  }))));
 };
 function topologicalOrderingHelper(taskID, taskMap, sortedTaskList) {
   if (!taskMap[taskID]) return true;
@@ -3677,14 +3906,6 @@ function getCriticalPaths(leafTasks) {
     }
   }
 
-  var printedList = taskChainList.map(function (elem) {
-    var newElem = _extends({}, elem);
-
-    newElem.duration = Math.round(elem.duration / 86400000);
-    return newElem;
-  });
-  console.debug(printedList);
-
   if (taskChainList.length > 0) {
     taskChainList.sort(function (a, b) {
       return b.duration - a.duration;