gantt-task-react-powern 0.6.16 → 0.6.19

package/dist/index.js

@@ -316,7 +316,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       minWidth: parseInt(rowWidth) * 0.8,
       maxWidth: parseInt(rowWidth) * 0.8
     }
-  }, "WBS"), React__default.createElement("div", {
+  }, "ID"), React__default.createElement("div", {
     className: styles.ganttTable_HeaderSeparator,
     style: {
       height: headerHeight * 0.5,
@@ -328,7 +328,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       minWidth: parseInt(rowWidth) * 0.8,
       maxWidth: parseInt(rowWidth) * 0.8
     }
-  }, "ID"), React__default.createElement("div", {
+  }, "WBS Code / Activity ID"), React__default.createElement("div", {
     className: styles.ganttTable_HeaderSeparator,
     style: {
       height: headerHeight * 0.5,
@@ -382,7 +382,72 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       minWidth: parseInt(rowWidth) * 0.6
     },
     title: "Planned End"
-  }, "Actual End")));
+  }, "Actual End"), scheduleType === "main" && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6,
+      maxWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "% Complete"
+  }, "% Complete"), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6,
+      maxWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Planned Duration"
+  }, "Planned Duration"), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.7,
+      maxWidth: parseInt(rowWidth) * 0.7
+    },
+    title: "Remaining Duration"
+  }, "Remaining Duration"), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6,
+      maxWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Actual Duration"
+  }, "Actual Duration"), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), React__default.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"};
@@ -593,7 +658,61 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React__default.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__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.5,
+          maxWidth: parseInt(rowWidth) * 0.5
+        }
+      }, React__default.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", percentComplete != null ? percentComplete + "%" : "")), React__default.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.6,
+          maxWidth: parseInt(rowWidth) * 0.6
+        }
+      }, React__default.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", plannedDuration != null ? plannedDuration : "")), React__default.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.7,
+          maxWidth: parseInt(rowWidth) * 0.7
+        }
+      }, React__default.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", remainingDuration != null ? remainingDuration : "")), React__default.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.6,
+          maxWidth: parseInt(rowWidth) * 0.6
+        }
+      }, React__default.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", actualDuration != null ? actualDuration : "")), React__default.createElement("div", {
+        className: styles$1.taskListCell,
+        style: {
+          minWidth: parseInt(rowWidth) * 0.8,
+          maxWidth: parseInt(rowWidth) * 0.8
+        }
+      }, React__default.createElement("div", {
+        className: styles$1.taskListText
+      }, "\xA0", (_t$durationType = t.durationType) != null ? _t$durationType : "Activity Calendar")));
+    }()));
   }));
 };
 
@@ -752,6 +871,8 @@ var VerticalScroll = function VerticalScroll(_ref) {
   }));
 };
 
+var styles$4 = {"hideScrollbar":"_38emS"};
+
 var TaskList = function TaskList(_ref) {
   var headerHeight = _ref.headerHeight,
       fontFamily = _ref.fontFamily,
@@ -772,7 +893,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 = React.useRef(null);
 
   var _useState = React.useState([]),
@@ -950,7 +1073,18 @@ var TaskList = function TaskList(_ref) {
     virtualItems: virtualizer.getVirtualItems()
   };
   return React__default.createElement("div", {
-    ref: taskListRef
+    ref: taskListRef,
+    style: containerWidth != null ? {
+      width: containerWidth,
+      overflow: "hidden",
+      flexShrink: 0
+    } : {}
+  }, React__default.createElement("div", {
+    ref: innerScrollRef,
+    className: styles$4.hideScrollbar,
+    style: {
+      overflowX: "auto"
+    }
   }, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
     ref: horizontalContainerRef,
     className: horizontalContainerClass,
@@ -963,10 +1097,10 @@ var TaskList = function TaskList(_ref) {
       width: "100%",
       position: "relative"
     }
-  }, React__default.createElement(TaskListTable, Object.assign({}, tableProps)))));
+  }, React__default.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,
@@ -1047,7 +1181,7 @@ var GridBody = function GridBody(_ref) {
       y1: visibleStartY,
       x2: i * columnWidth,
       y2: visibleEndY,
-      className: styles$4.gridTick
+      className: styles$5.gridTick
     });
   });
   var rowBackgrounds = [];
@@ -1058,7 +1192,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;) {
@@ -1067,7 +1201,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__default.createElement("rect", {
       key: "bg-" + vi.key,
       x: 0,
@@ -1082,7 +1216,7 @@ var GridBody = function GridBody(_ref) {
       y1: y + rowHeight,
       x2: svgWidth,
       y2: y + rowHeight,
-      className: styles$4.gridRowLine
+      className: styles$5.gridRowLine
     }));
   }
 
@@ -1107,7 +1241,7 @@ var Grid = function Grid(props) {
   }, React__default.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,
@@ -1118,7 +1252,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__default.createElement("g", {
     className: "calendarTop"
   }, React__default.createElement("line", {
@@ -1126,13 +1260,13 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     y1: y1Line,
     x2: x1Line,
     y2: y2Line,
-    className: styles$5.calendarTopTick,
+    className: styles$6.calendarTopTick,
     key: value + "line"
   }), React__default.createElement("text", {
     key: value + "text",
     y: yText,
     x: xText,
-    className: styles$5.calendarTopText + " " + textAnchorClass
+    className: styles$6.calendarTopText + " " + textAnchorClass
   }, value));
 };
 
@@ -1158,7 +1292,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()) {
@@ -1199,7 +1333,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()) {
@@ -1241,7 +1375,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()) {
@@ -1291,7 +1425,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) {
@@ -1330,7 +1464,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()) {
@@ -1380,7 +1514,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));
 
@@ -1416,7 +1550,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));
 
@@ -1503,7 +1637,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);
 };
 
@@ -2155,7 +2289,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,
@@ -2169,7 +2303,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
@@ -2195,7 +2329,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__default.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     }, React__default.createElement(BarDisplay, {
       x: task.x1,
@@ -2239,12 +2373,12 @@ var Bar = function Bar(_ref) {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React__default.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__default.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     }, React__default.createElement(BarDisplay, {
       x: task.actualx1,
@@ -2290,7 +2424,7 @@ var Bar = function Bar(_ref) {
     })));
   } else {
     return React__default.createElement("g", {
-      className: styles$6.barWrapper,
+      className: styles$7.barWrapper,
       tabIndex: 0
     });
   }
@@ -2305,7 +2439,7 @@ var BarSmall = function BarSmall(_ref) {
       isSelected = _ref.isSelected;
   var progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
   return React__default.createElement("g", {
-    className: styles$6.barWrapper,
+    className: styles$7.barWrapper,
     tabIndex: 0
   }, React__default.createElement(BarDisplay, {
     x: task.x1,
@@ -2333,7 +2467,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,
@@ -2348,7 +2482,7 @@ var Milestone = function Milestone(_ref) {
 
   return React__default.createElement("g", {
     tabIndex: 0,
-    className: styles$7.milestoneWrapper
+    className: styles$8.milestoneWrapper
   }, React__default.createElement("rect", {
     fill: getBarColor(),
     x: task.x1,
@@ -2358,7 +2492,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");
     },
@@ -2368,7 +2502,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,
@@ -2380,7 +2514,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__default.createElement("g", {
     tabIndex: 0,
-    className: styles$8.projectWrapper
+    className: styles$9.projectWrapper
   }, React__default.createElement("rect", {
     fill: barColor,
     x: task.x1,
@@ -2389,7 +2523,7 @@ var Project = function Project(_ref) {
     height: task.height,
     rx: task.barCornerRadius,
     ry: task.barCornerRadius,
-    className: styles$8.projectBackground
+    className: styles$9.projectBackground
   }), React__default.createElement("rect", {
     x: task.progressX,
     width: task.progressWidth,
@@ -2406,13 +2540,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__default.createElement("polygon", {
-    className: styles$8.projectTop,
+    className: styles$9.projectTop,
     points: projectLeftTriangle,
     fill: barColor
   }), React__default.createElement("polygon", {
-    className: styles$8.projectTop,
+    className: styles$9.projectTop,
     points: projectRightTriangle,
     fill: barColor
   }));
@@ -2852,7 +2986,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,
@@ -2895,7 +3029,7 @@ var TaskGantt = function TaskGantt(_ref) {
     }
   }, [scrollX]);
   return React__default.createElement("div", {
-    className: styles$9.ganttVerticalContainer,
+    className: styles$a.ganttVerticalContainer,
     ref: verticalGanttContainerRef,
     dir: "ltr"
   }, React__default.createElement("svg", {
@@ -2905,7 +3039,7 @@ var TaskGantt = function TaskGantt(_ref) {
     fontFamily: barProps.fontFamily
   }, React__default.createElement(Calendar, Object.assign({}, calendarProps))), React__default.createElement("div", {
     ref: horizontalContainerRef,
-    className: styles$9.horizontalContainer,
+    className: styles$a.horizontalContainer,
     style: ganttHeight ? {
       height: ganttHeight,
       width: gridProps.svgWidth
@@ -2929,7 +3063,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,
@@ -2948,14 +3082,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__default.createElement("div", {
     style: {
       width: svgWidth
     },
-    className: styles$a.scroll
+    className: hScrollStyles.scroll
   }));
 };
 
@@ -3049,8 +3183,23 @@ var Gantt = function Gantt(_ref) {
       shouldNotShowLoadingOverlay = _ref$shouldNotShowLoa === void 0 ? true : _ref$shouldNotShowLoa;
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
+  var isDraggingTable = React.useRef(false);
+  var dragStartX = React.useRef(0);
+  var dragStartWidth = React.useRef(0);
+  var dragMaxWidth = React.useRef(Infinity);
 
-  var _useState = React.useState(function () {
+  var _useState = React.useState(null),
+      tableContainerWidth = _useState[0],
+      setTableContainerWidth = _useState[1];
+
+  var tableInnerScrollRef = React.useRef(null);
+  var tableHScrollRef = React.useRef(null);
+
+  var _useState2 = React.useState(0),
+      tableScrollableWidth = _useState2[0],
+      setTableScrollableWidth = _useState2[1];
+
+  var _useState3 = React.useState(function () {
     var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
         startDateRange = _ganttDateRange[0],
         endDateRange = _ganttDateRange[1];
@@ -3067,77 +3216,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 = React.useState(undefined),
+      currentViewDate = _useState4[0],
+      setCurrentViewDate = _useState4[1];
+
+  var _useState5 = React.useState(0),
+      taskListWidth = _useState5[0],
+      setTaskListWidth = _useState5[1];
+
+  React.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();
+  };
+
+  React.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 = React.useState(undefined),
-      currentViewDate = _useState2[0],
-      setCurrentViewDate = _useState2[1];
+    var onMouseUp = function onMouseUp() {
+      isDraggingTable.current = false;
+    };
 
-  var _useState3 = React.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 = React.useState(0),
-      svgContainerWidth = _useState4[0],
-      setSvgContainerWidth = _useState4[1];
+  var _useState6 = React.useState(0),
+      svgContainerWidth = _useState6[0],
+      setSvgContainerWidth = _useState6[1];
 
-  var _useState5 = React.useState(ganttHeight),
-      svgContainerHeight = _useState5[0],
-      setSvgContainerHeight = _useState5[1];
+  var _useState7 = React.useState(ganttHeight),
+      svgContainerHeight = _useState7[0],
+      setSvgContainerHeight = _useState7[1];
 
-  var _useState6 = React.useState([]),
-      barTasks = _useState6[0],
-      setBarTasks = _useState6[1];
+  var _useState8 = React.useState([]),
+      barTasks = _useState8[0],
+      setBarTasks = _useState8[1];
 
   var debounceRef = React.useRef(null);
 
-  var _useState7 = React.useState({
+  var _useState9 = React.useState({
     action: ""
   }),
-      ganttEvent = _useState7[0],
-      setGanttEvent = _useState7[1];
+      ganttEvent = _useState9[0],
+      setGanttEvent = _useState9[1];
 
   var taskHeight = React.useMemo(function () {
     return rowHeight * barFill / 100;
   }, [rowHeight, barFill]);
 
-  var _useState8 = React.useState(),
-      selectedTask = _useState8[0],
-      setSelectedTask = _useState8[1];
+  var _useState10 = React.useState(),
+      selectedTask = _useState10[0],
+      setSelectedTask = _useState10[1];
 
-  var _useState9 = React.useState(null),
-      failedTask = _useState9[0],
-      setFailedTask = _useState9[1];
+  var _useState11 = React.useState(null),
+      failedTask = _useState11[0],
+      setFailedTask = _useState11[1];
 
   var svgWidth = columnWidth < 55 ? (dateSetup.dates.length + 0.5) * columnWidth : dateSetup.dates.length * columnWidth;
   var ganttFullHeight = React.useMemo(function () {
     return barTasks.length * rowHeight;
   }, [barTasks.length, rowHeight]);
 
-  var _useState10 = React.useState(0),
-      scrollY = _useState10[0],
-      setScrollY = _useState10[1];
+  var _useState12 = React.useState(0),
+      scrollY = _useState12[0],
+      setScrollY = _useState12[1];
 
-  var _useState11 = React.useState(-1),
-      scrollX = _useState11[0],
-      setScrollX = _useState11[1];
+  var _useState13 = React.useState(-1),
+      scrollX = _useState13[0],
+      setScrollX = _useState13[1];
 
-  var _useState12 = React.useState(false),
-      ignoreScrollEvent = _useState12[0],
-      setIgnoreScrollEvent = _useState12[1];
+  var _useState14 = React.useState(false),
+      ignoreScrollEvent = _useState14[0],
+      setIgnoreScrollEvent = _useState14[1];
 
-  var _useState13 = React.useState(0),
-      lastTouchX = _useState13[0],
-      setLastTouchX = _useState13[1];
+  var _useState15 = React.useState(0),
+      lastTouchX = _useState15[0],
+      setLastTouchX = _useState15[1];
 
-  var _useState14 = React.useState(0),
-      lastTouchY = _useState14[0],
-      setLastTouchY = _useState14[1];
+  var _useState16 = React.useState(0),
+      lastTouchY = _useState16[0],
+      setLastTouchY = _useState16[1];
 
-  var _useState15 = React.useState(false),
-      isProcessing = _useState15[0],
-      setIsProcessing = _useState15[1];
+  var _useState17 = React.useState(false),
+      isProcessing = _useState17[0],
+      setIsProcessing = _useState17[1];
 
   var buffer = rowHeight * 10;
   var visibleStartY = scrollY - buffer;
@@ -3280,7 +3465,7 @@ var Gantt = function Gantt(_ref) {
     }
   }, [ganttHeight, tasks, headerHeight, rowHeight]);
   React.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) {
@@ -3354,25 +3539,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]);
 
@@ -3535,7 +3720,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,
@@ -3544,18 +3729,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__default.createElement("div", {
     style: {
       position: "relative"
     }
   }, React__default.createElement("div", {
-    className: styles$9.wrapper,
+    className: styles$a.wrapper,
     onKeyDown: handleKeyDown,
     tabIndex: 0,
     ref: wrapperRef
-  }, listCellWidth && React__default.createElement(TaskList, Object.assign({}, tableProps)), React__default.createElement(TaskGantt, {
+  }, listCellWidth && React__default.createElement(TaskList, Object.assign({}, tableProps)), listCellWidth && scheduleType === "main" && React__default.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__default.createElement(TaskGantt, {
     gridProps: gridProps,
     calendarProps: calendarProps,
     barProps: barProps,
@@ -3609,14 +3813,39 @@ var Gantt = function Gantt(_ref) {
       fontFamily: "Arial, sans-serif"
     }
   }, "Loading..."), React__default.createElement("div", {
-    className: styles$9.spinner
-  })), React__default.createElement(HorizontalScroll, {
+    className: styles$a.spinner
+  })), React__default.createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, listCellWidth && React__default.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__default.createElement("div", {
+    style: {
+      width: tableScrollableWidth
+    }
+  })), React__default.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, React__default.createElement(HorizontalScroll, {
     svgWidth: svgWidth,
-    taskListWidth: taskListWidth,
+    taskListWidth: 0,
     scroll: scrollX,
     rtl: rtl,
     onScroll: handleScrollX
-  }));
+  }))));
 };
 function topologicalOrderingHelper(taskID, taskMap, sortedTaskList) {
   if (!taskMap[taskID]) return true;
@@ -3678,14 +3907,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;