gantt-task-react - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/helpers/bar-helper.d.ts

 import { Task } from "../types/public-types";
 import { BarTask } from "../types/bar-task";
-export declare const convertToBarTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, barFill: number, headerHeight: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask[];
-export declare const convertToBarTask: (task: Task, index: number, dates: Date[], dateDelta: number, columnWidth: number, rowHeight: number, taskHeight: number, headerHeight: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask;
+export declare const convertToBarTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, barFill: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask[];
+export declare const convertToBarTask: (task: Task, index: number, dates: Date[], dateDelta: number, columnWidth: number, rowHeight: number, taskHeight: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask;
 export declare const taskXCoordinate: (xDate: Date, dates: Date[], dateDelta: number, columnWidth: number) => number;
-export declare const taskYCoordinate: (index: number, rowHeight: number, taskHeight: number, headerHeight: number) => number;
+export declare const taskYCoordinate: (index: number, rowHeight: number, taskHeight: number) => number;
 export declare const progressWithByParams: (taskX1: number, taskX2: number, progress: number) => number;
@@ -8,0 +8,0 @@ export declare const progressByProgressWidth: (progressWidth: number, barTask: BarTask) => number;

dist/index.d.ts

@@ -1,3 +0,3 @@
-export { Gantt } from "./components/Gantt/gantt";
+export { Gantt } from "./components/gantt/gantt";
 export { ViewMode } from "./types/public-types";
 export type { GanttProps, Task, StylingOption, DisplayOption, EventOption, } from "./types/public-types";

dist/index.js

@@ -196,4 +196,236 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var styles = {"gridRow":"_Mh3e0","gridHeader":"_UMdHN","gridRowLine":"_b2wly","gridTick":"_OGXLT"};
+var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
+var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
+  var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rowWidth = _ref.rowWidth;
+  return React__default.createElement("div", {
+    className: styles.ganttTable,
+    style: {
+      fontFamily: fontFamily,
+      fontSize: fontSize
+    }
+  }, React__default.createElement("div", {
+    className: styles.ganttTable_Header,
+    style: {
+      height: headerHeight - 2
+    }
+  }, React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: rowWidth
+    }
+  }, "\xA0Name"), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.2
+    }
+  }), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: rowWidth
+    }
+  }, "\xA0From"), 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: rowWidth
+    }
+  }, "\xA0To")));
+};
+
+var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3"};
+
+var TaskListTableDefault = function TaskListTableDefault(_ref) {
+  var rowHeight = _ref.rowHeight,
+      rowWidth = _ref.rowWidth,
+      tasks = _ref.tasks,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      locale = _ref.locale;
+  var dateTimeOptions = {
+    weekday: "short",
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  };
+  return React__default.createElement("div", {
+    className: styles$1.taskListWrapper,
+    style: {
+      fontFamily: fontFamily,
+      fontSize: fontSize
+    }
+  }, tasks.map(function (t) {
+    return React__default.createElement("div", {
+      className: styles$1.taskListTableRow,
+      style: {
+        height: rowHeight
+      },
+      key: t.id + "row"
+    }, React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: rowWidth,
+        maxWidth: rowWidth
+      }
+    }, "\xA0", t.name), React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: rowWidth
+      }
+    }, "\xA0", t.start.toLocaleDateString(locale, dateTimeOptions)), React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: rowWidth
+      }
+    }, "\xA0", t.end.toLocaleDateString(locale, dateTimeOptions)));
+  }));
+};
+
+var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParagraph":"_29NTg","tooltipDetailsContainer":"_25P-K"};
+
+var Tooltip = function Tooltip(_ref) {
+  var x = _ref.x,
+      rowHeight = _ref.rowHeight,
+      svgHeight = _ref.svgHeight,
+      task = _ref.task,
+      fontSize = _ref.fontSize,
+      fontFamily = _ref.fontFamily,
+      TooltipContent = _ref.TooltipContent;
+  var tooltipRef = React.useRef(null);
+
+  var _useState = React.useState(1000),
+      toolWidth = _useState[0],
+      setToolWidth = _useState[1];
+
+  var _useState2 = React.useState((task.index - 1) * rowHeight),
+      relatedY = _useState2[0],
+      setRelatedY = _useState2[1];
+
+  React.useEffect(function () {
+    if (tooltipRef.current) {
+      var tooltipHeight = tooltipRef.current.offsetHeight;
+      var tooltipY = task.index * rowHeight + rowHeight;
+
+      if (tooltipHeight > tooltipY) {
+        setRelatedY(tooltipHeight * 0.5);
+      } else if (tooltipY + tooltipHeight > svgHeight) {
+        setRelatedY(svgHeight - tooltipHeight * 1.05);
+      }
+
+      setToolWidth(tooltipRef.current.scrollWidth * 1.1);
+    }
+  }, [tooltipRef, task]);
+  return React__default.createElement("foreignObject", {
+    x: x,
+    y: relatedY,
+    width: toolWidth,
+    height: 1000
+  }, React__default.createElement("div", {
+    ref: tooltipRef,
+    className: styles$2.tooltipDetailsContainer
+  }, React__default.createElement(TooltipContent, {
+    task: task,
+    fontSize: fontSize,
+    fontFamily: fontFamily
+  })));
+};
+var StandardTooltipContent = function StandardTooltipContent(_ref2) {
+  var task = _ref2.task,
+      fontSize = _ref2.fontSize,
+      fontFamily = _ref2.fontFamily;
+  var style = {
+    fontSize: fontSize,
+    fontFamily: fontFamily
+  };
+  return React__default.createElement("div", {
+    className: styles$2.tooltipDefaultContainer,
+    style: style
+  }, React__default.createElement("b", {
+    style: {
+      fontSize: fontSize + 6
+    }
+  }, task.name + ": " + task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), React__default.createElement("p", {
+    className: styles$2.tooltipDefaultContainerParagraph
+  }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
+    className: styles$2.tooltipDefaultContainerParagraph
+  }, !!task.progress && "Progress: " + task.progress + " %"));
+};
+
+var styles$3 = {"scroll":"_3f9LK"};
+
+var Scroll = function Scroll(_ref) {
+  var ganttHeight = _ref.ganttHeight,
+      ganttFullHeight = _ref.ganttFullHeight,
+      headerHeight = _ref.headerHeight,
+      onScroll = _ref.onScroll;
+  return React__default.createElement("div", {
+    style: {
+      height: ganttHeight,
+      marginTop: headerHeight
+    },
+    className: styles$3.scroll,
+    onScroll: onScroll
+  }, React__default.createElement("div", {
+    style: {
+      height: ganttFullHeight,
+      width: 1
+    }
+  }));
+};
+
+var TaskList = function TaskList(_ref) {
+  var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rowWidth = _ref.rowWidth,
+      rowHeight = _ref.rowHeight,
+      scroll = _ref.scroll,
+      tasks = _ref.tasks,
+      locale = _ref.locale,
+      ganttHeight = _ref.ganttHeight,
+      horizontalContainerClass = _ref.horizontalContainerClass,
+      TaskListHeader = _ref.TaskListHeader,
+      TaskListTable = _ref.TaskListTable;
+  var horizontalContainerRef = React.useRef(null);
+  React.useEffect(function () {
+    if (horizontalContainerRef.current) {
+      horizontalContainerRef.current.scrollTop = scroll;
+    }
+  }, [scroll]);
+  var headerProps = {
+    headerHeight: headerHeight,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    rowWidth: rowWidth
+  };
+  var tableProps = {
+    rowHeight: rowHeight,
+    rowWidth: rowWidth,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    tasks: tasks,
+    locale: locale
+  };
+  return React__default.createElement("div", null, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
+    ref: horizontalContainerRef,
+    className: horizontalContainerClass,
+    style: ganttHeight ? {
+      height: ganttHeight
+    } : {}
+  }, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
+};
+
+var styles$4 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf"};
+
+var styles$5 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK"};
+
 var GridBody = function GridBody(_ref) {
@@ -203,9 +435,15 @@ var tasks = _ref.tasks,
       rowHeight = _ref.rowHeight,
-      headerHeight = _ref.headerHeight,
       gridWidth = _ref.gridWidth,
       columnWidth = _ref.columnWidth,
       todayColor = _ref.todayColor;
-  var y = headerHeight;
+  var y = 0;
   var gridRows = [];
-  var rowLines = [];
+  var rowLines = [React__default.createElement("line", {
+    key: "RowLineFirst",
+    x: "0",
+    y1: 0,
+    x2: gridWidth,
+    y2: 0,
+    className: styles$5.gridRowLine
+  })];
 
@@ -220,3 +458,3 @@ for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
       height: rowHeight,
-      className: styles.gridRow
+      className: styles$5.gridRow
     }));
@@ -229,3 +467,3 @@ rowLines.push(React__default.createElement("line", {
       y2: y + rowHeight,
-      className: styles.gridRowLine
+      className: styles$5.gridRowLine
     }));
@@ -245,6 +483,6 @@ y += rowHeight;
       x1: tickX,
-      y1: headerHeight,
+      y1: 0,
       x2: tickX,
       y2: y,
-      className: styles.gridTick
+      className: styles$5.gridTick
     }));
@@ -278,21 +516,9 @@
 
-var GridHeader = function GridHeader(_ref) {
-  var gridWidth = _ref.gridWidth,
-      headerHeight = _ref.headerHeight;
-  return React__default.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: gridWidth,
-    height: headerHeight,
-    className: styles.gridHeader
-  });
-};
-
 var Grid = function Grid(props) {
   return React__default.createElement("g", {
     className: "grid"
-  }, React__default.createElement(GridHeader, Object.assign({}, props)), React__default.createElement(GridBody, Object.assign({}, props)));
+  }, React__default.createElement(GridBody, Object.assign({}, props)));
 };
 
-var styles$1 = {"calendarBottomText":"_3mT2F","calendarTopTick":"_YErfM","calendarTopText":"_25YmP"};
+var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX"};
 
@@ -313,3 +539,3 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     y2: y2Line,
-    className: styles$1.calendarTopTick,
+    className: styles$6.calendarTopTick,
     key: value + "line"
@@ -320,3 +546,3 @@ }), React__default.createElement("text", {
     x: xText,
-    className: styles$1.calendarTopText
+    className: styles$6.calendarTopText
   }, value));
@@ -347,3 +573,3 @@ };
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$1.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
@@ -371,3 +597,3 @@
     var bottomValues = [];
-    var weeksCount = 0;
+    var weeksCount = 1;
     var topDefaultHeight = headerHeight * 0.5;
@@ -388,3 +614,3 @@
         x: columnWidth * i,
-        className: styles$1.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
@@ -426,3 +652,3 @@
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$1.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
@@ -433,3 +659,3 @@
         topValues.push(React__default.createElement(TopPartOfCalendar, {
-          key: topValue,
+          key: topValue + date.getFullYear(),
           value: topValue,
@@ -463,3 +689,3 @@ x1Line: columnWidth * (i + 1),
         x: columnWidth * i,
-        className: styles$1.calendarBottomText,
+        className: styles$6.calendarBottomText,
         fontFamily: fontFamily
@@ -471,3 +697,3 @@ }, bottomValue));
         topValues.push(React__default.createElement(TopPartOfCalendar, {
-          key: topValue,
+          key: topValue + date.getFullYear(),
           value: topValue,
@@ -523,103 +749,16 @@ x1Line: columnWidth * i + ticks * columnWidth,
     fontFamily: fontFamily
-  }, bottomValues, " ", topValues);
-};
-
-var styles$2 = {"barWrapper":"_nceC7","barHandle":"_1C4hH","barLabel":"_1Azmc","barLabelOutside":"_1i9jR","barBackground":"_AiPgJ"};
-
-var BarProgressHandle = function BarProgressHandle(_ref) {
-  var progressPoint = _ref.progressPoint,
-      onMouseDown = _ref.onMouseDown;
-  return React__default.createElement("polygon", {
-    className: styles$2.barHandle,
-    points: progressPoint,
-    onMouseDown: onMouseDown
-  });
-};
-
-var BarDateHandle = function BarDateHandle(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      barCornerRadius = _ref.barCornerRadius,
-      onMouseDown = _ref.onMouseDown;
-  return React__default.createElement("rect", {
-    x: x,
-    y: y,
-    width: width,
-    height: height,
-    className: styles$2.barHandle,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    onMouseDown: onMouseDown
-  });
-};
-
-var BarDisplay = function BarDisplay(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      isSelected = _ref.isSelected,
-      progressWidth = _ref.progressWidth,
-      barCornerRadius = _ref.barCornerRadius,
-      text = _ref.text,
-      hasChild = _ref.hasChild,
-      arrowIndent = _ref.arrowIndent,
-      styles = _ref.styles,
-      onMouseDown = _ref.onMouseDown;
-  var textRef = React.useRef(null);
-
-  var _useState = React.useState(true),
-      isTextInside = _useState[0],
-      setIsTextInside = _useState[1];
-
-  React.useEffect(function () {
-    if (textRef.current) setIsTextInside(textRef.current.getBBox().width < width);
-  }, [textRef, width]);
-
-  var getProcessColor = function getProcessColor() {
-    return isSelected ? styles.progressSelectedColor : styles.progressColor;
-  };
-
-  var getBarColor = function getBarColor() {
-    return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
-  };
-
-  var getX = function getX() {
-    return isTextInside ? x + width * 0.5 : x + width + arrowIndent * +hasChild + arrowIndent * 0.2;
-  };
-
-  return React__default.createElement("g", {
-    onMouseDown: onMouseDown
   }, React__default.createElement("rect", {
-    x: x,
-    width: width,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getBarColor(),
-    className: styles$2.barBackground
-  }), React__default.createElement("rect", {
-    x: x,
-    width: progressWidth,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getProcessColor()
-  }), React__default.createElement("text", {
-    x: getX(),
-    y: y + height * 0.5,
-    className: isTextInside ? styles$2.barLabel :  styles$2.barLabelOutside,
-    ref: textRef
-  }, text));
+    x: 0,
+    y: 0,
+    width: columnWidth * dates.length,
+    height: headerHeight,
+    className: styles$6.calendarHeader
+  }), bottomValues, " ", topValues);
 };
 
-var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
   var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
   var taskHeight = rowHeight * barFill / 100;
   var barTasks = tasks.map(function (t, i) {
-    return convertToBarTask(t, i, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
+    return convertToBarTask(t, i, dates, dateDelta, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
   });
@@ -644,6 +783,6 @@ barTasks = barTasks.map(function (task, i) {
 };
-var convertToBarTask = function convertToBarTask(task, index, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBarTask = function convertToBarTask(task, index, dates, dateDelta, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
   var x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
   var x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
-  var y = taskYCoordinate(index, rowHeight, taskHeight, headerHeight);
+  var y = taskYCoordinate(index, rowHeight, taskHeight);
 
@@ -674,4 +813,4 @@ var styles = _extends({
 };
-var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight, headerHeight) {
-  var y = index * rowHeight + headerHeight + (rowHeight - taskHeight) / 2;
+var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight) {
+  var y = index * rowHeight + (rowHeight - taskHeight) / 2;
   return y;
@@ -787,2 +926,95 @@ };
 
+var styles$7 = {"barWrapper":"_1gfz9","barHandle":"_I78P8","barLabel":"_1nTVz","barLabelOutside":"_h9J4Q","barBackground":"_3xu5M"};
+
+var BarDisplay = function BarDisplay(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      isSelected = _ref.isSelected,
+      progressWidth = _ref.progressWidth,
+      barCornerRadius = _ref.barCornerRadius,
+      text = _ref.text,
+      hasChild = _ref.hasChild,
+      arrowIndent = _ref.arrowIndent,
+      styles = _ref.styles,
+      onMouseDown = _ref.onMouseDown;
+  var textRef = React.useRef(null);
+
+  var _useState = React.useState(true),
+      isTextInside = _useState[0],
+      setIsTextInside = _useState[1];
+
+  React.useEffect(function () {
+    if (textRef.current) setIsTextInside(textRef.current.getBBox().width < width);
+  }, [textRef, width]);
+
+  var getProcessColor = function getProcessColor() {
+    return isSelected ? styles.progressSelectedColor : styles.progressColor;
+  };
+
+  var getBarColor = function getBarColor() {
+    return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
+  };
+
+  var getX = function getX() {
+    return isTextInside ? x + width * 0.5 : x + width + arrowIndent * +hasChild + arrowIndent * 0.2;
+  };
+
+  return React__default.createElement("g", {
+    onMouseDown: onMouseDown
+  }, React__default.createElement("rect", {
+    x: x,
+    width: width,
+    y: y,
+    height: height,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: getBarColor(),
+    className: styles$7.barBackground
+  }), React__default.createElement("rect", {
+    x: x,
+    width: progressWidth,
+    y: y,
+    height: height,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: getProcessColor()
+  }), React__default.createElement("text", {
+    x: getX(),
+    y: y + height * 0.5,
+    className: isTextInside ? styles$7.barLabel :  styles$7.barLabelOutside,
+    ref: textRef
+  }, text));
+};
+
+var BarDateHandle = function BarDateHandle(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      barCornerRadius = _ref.barCornerRadius,
+      onMouseDown = _ref.onMouseDown;
+  return React__default.createElement("rect", {
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    className: styles$7.barHandle,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    onMouseDown: onMouseDown
+  });
+};
+
+var BarProgressHandle = function BarProgressHandle(_ref) {
+  var progressPoint = _ref.progressPoint,
+      onMouseDown = _ref.onMouseDown;
+  return React__default.createElement("polygon", {
+    className: styles$7.barHandle,
+    points: progressPoint,
+    onMouseDown: onMouseDown
+  });
+};
+
 var Bar = function Bar(_ref) {
@@ -803,3 +1035,3 @@ var task = _ref.task,
   return React__default.createElement("g", {
-    className: styles$2.barWrapper,
+    className: styles$7.barWrapper,
     onDoubleClick: function onDoubleClick(e) {
@@ -893,59 +1125,2 @@ onEventStart(e, "dblclick", task);
 
-var styles$3 = {"tooltipDefaultContainer":"_uW0nC","tooltipDefaultContainerParagraph":"_DcYxn","tooltipDetailsContainer":"_12ytY"};
-
-var Tooltip = function Tooltip(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      task = _ref.task,
-      fontSize = _ref.fontSize,
-      fontFamily = _ref.fontFamily,
-      _ref$getTooltipConten = _ref.getTooltipContent,
-      getTooltipContent = _ref$getTooltipConten === void 0 ? getStandardTooltipContent : _ref$getTooltipConten;
-  var tooltipRef = React.useRef(null);
-
-  var _useState = React.useState(1000),
-      toolWidth = _useState[0],
-      setToolWidth = _useState[1];
-
-  var _useState2 = React.useState(y),
-      relatedY = _useState2[0],
-      setRelatedY = _useState2[1];
-
-  React.useEffect(function () {
-    if (tooltipRef.current) {
-      var height = tooltipRef.current.offsetHeight + tooltipRef.current.offsetHeight * 0.15;
-      setRelatedY(y - height);
-      setToolWidth(tooltipRef.current.scrollWidth * 1.1);
-    }
-  }, [tooltipRef, y]);
-  return React__default.createElement("foreignObject", {
-    x: x,
-    y: relatedY,
-    width: toolWidth,
-    height: 1000
-  }, React__default.createElement("div", {
-    ref: tooltipRef,
-    className: styles$3.tooltipDetailsContainer
-  }, getTooltipContent(task, fontSize, fontFamily)));
-};
-
-var getStandardTooltipContent = function getStandardTooltipContent(task, fontSize, fontFamily) {
-  var style = {
-    fontSize: fontSize,
-    fontFamily: fontFamily
-  };
-  return React__default.createElement("div", {
-    className: styles$3.tooltipDefaultContainer,
-    style: style
-  }, React__default.createElement("b", {
-    style: {
-      fontSize: fontSize + 6
-    }
-  }, task.name + ": " + task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), React__default.createElement("p", {
-    className: styles$3.tooltipDefaultContainerParagraph
-  }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
-    className: styles$3.tooltipDefaultContainerParagraph
-  }, "Progress: " + task.progress + " %"));
-};
-
 function isKeyboardEvent(event) {
@@ -955,3 +1130,3 @@ return event.key !== undefined;
 
-var GanttContent = function GanttContent(_ref) {
+var TaskGanttContent = function TaskGanttContent(_ref) {
   var _svg$current;
@@ -969,6 +1144,6 @@
       barBackgroundSelectedColor = _ref.barBackgroundSelectedColor,
-      headerHeight = _ref.headerHeight,
       handleWidth = _ref.handleWidth,
       timeStep = _ref.timeStep,
       svg = _ref.svg,
+      svgHeight = _ref.svgHeight,
       arrowColor = _ref.arrowColor,
@@ -983,4 +1158,4 @@ arrowIndent = _ref.arrowIndent,
       onTaskDelete = _ref.onTaskDelete,
-      getTooltipContent = _ref.getTooltipContent;
-  var point = (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
+      TooltipContent = _ref.TooltipContent;
+  var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
@@ -1015,4 +1190,4 @@ var _useState = React.useState({
   React.useEffect(function () {
-    setBarTasks(convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
-  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, headerHeight, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
+    setBarTasks(convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
+  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
 
@@ -1029,5 +1204,3 @@ var handleBarEventStart = function handleBarEventStart(event, action, selectedTask) {
                     var newTasks = barTasks.filter(function (t) {
-                      var _barEvent$selectedTas;
-
-                      return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
+                      return t.id !== selectedTask.id;
                     });
@@ -1060,3 +1233,3 @@ onTasksDateChange(newTasks);
 
-          if (!svg.current || !point) return;
+          if (!(svg === null || svg === void 0 ? void 0 : svg.current) || !point) return;
           point.x = event.clientX;
@@ -1088,6 +1261,6 @@ var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
 
-        if (!barEvent.selectedTask || !point || !svg.current) return Promise.resolve();
+        if (!barEvent.selectedTask || !point || !(svg === null || svg === void 0 ? void 0 : svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform((_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
+        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
 
@@ -1128,6 +1301,6 @@ var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, barEvent.action, barEvent.selectedTask, xStep, timeStep, initEventX1Delta),
             action = barEvent.action;
-        if (!selectedTask || !point || !svg.current) return Promise.resolve();
+        if (!selectedTask || !point || !(svg === null || svg === void 0 ? void 0 : svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
 
@@ -1162,3 +1335,3 @@ var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, selectedTask, xStep, timeStep, initEventX1Delta),
 
-    if (!isMoving && (barEvent.action === "move" || barEvent.action === "end" || barEvent.action === "start" || barEvent.action === "progress") && svg.current) {
+    if (!isMoving && (barEvent.action === "move" || barEvent.action === "end" || barEvent.action === "start" || barEvent.action === "progress") && (svg === null || svg === void 0 ? void 0 : svg.current)) {
       svg.current.addEventListener("mousemove", handleMouseMove);
@@ -1195,3 +1368,3 @@ svg.current.addEventListener("mouseup", handleMouseUp);
       isDateChangeable: !!onDateChange && !task.isDisabled,
-      isDelete: !!onTaskDelete && !task.isDisabled,
+      isDelete: !task.isDisabled,
       onEventStart: handleBarEventStart,
@@ -1204,10 +1377,54 @@ key: task.id
     x: barEvent.selectedTask.x2 + arrowIndent + arrowIndent * 0.5,
-    y: barEvent.selectedTask.y + rowHeight,
+    rowHeight: rowHeight,
+    svgHeight: svgHeight,
     task: barEvent.selectedTask,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    getTooltipContent: getTooltipContent
+    TooltipContent: TooltipContent
   })));
 };
 
+var TaskGantt = function TaskGantt(_ref) {
+  var gridProps = _ref.gridProps,
+      calendarProps = _ref.calendarProps,
+      barProps = _ref.barProps,
+      ganttHeight = _ref.ganttHeight,
+      scroll = _ref.scroll;
+  var ganttSVGRef = React.useRef(null);
+  var horizontalContainerRef = React.useRef(null);
+
+  var newBarProps = _extends({}, barProps, {
+    svg: ganttSVGRef
+  });
+
+  React.useEffect(function () {
+    if (horizontalContainerRef.current) {
+      horizontalContainerRef.current.scrollTop = scroll;
+    }
+  }, [scroll]);
+  return React__default.createElement("div", {
+    className: styles$4.ganttVerticalContainer
+  }, React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: gridProps.gridWidth,
+    height: calendarProps.headerHeight,
+    fontFamily: barProps.fontFamily
+  }, React__default.createElement(Calendar, Object.assign({}, calendarProps))), React__default.createElement("div", {
+    ref: horizontalContainerRef,
+    className: styles$4.horizontalContainer,
+    style: ganttHeight ? {
+      height: ganttHeight,
+      width: gridProps.gridWidth
+    } : {
+      width: gridProps.gridWidth
+    }
+  }, React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: gridProps.gridWidth,
+    height: barProps.rowHeight * barProps.tasks.length,
+    fontFamily: barProps.fontFamily,
+    ref: ganttSVGRef
+  }, React__default.createElement(Grid, Object.assign({}, gridProps)), React__default.createElement(TaskGanttContent, Object.assign({}, newBarProps)))));
+};
+
 var Gantt = function Gantt(_ref) {
@@ -1219,4 +1436,8 @@ var tasks = _ref.tasks,
       columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
+      _ref$listCellWidth = _ref.listCellWidth,
+      listCellWidth = _ref$listCellWidth === void 0 ? "150px" : _ref$listCellWidth,
       _ref$rowHeight = _ref.rowHeight,
       rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
+      _ref$ganttHeight = _ref.ganttHeight,
+      ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
       _ref$viewMode = _ref.viewMode,
@@ -1252,8 +1473,12 @@ viewMode = _ref$viewMode === void 0 ? exports.ViewMode.Day : _ref$viewMode,
       todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
+      _ref$TooltipContent = _ref.TooltipContent,
+      TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
+      _ref$TaskListHeader = _ref.TaskListHeader,
+      TaskListHeader = _ref$TaskListHeader === void 0 ? TaskListHeaderDefault : _ref$TaskListHeader,
+      _ref$TaskListTable = _ref.TaskListTable,
+      TaskListTable = _ref$TaskListTable === void 0 ? TaskListTableDefault : _ref$TaskListTable,
       onDateChange = _ref.onDateChange,
       onProgressChange = _ref.onProgressChange,
       onDoubleClick = _ref.onDoubleClick,
-      onTaskDelete = _ref.onTaskDelete,
-      getTooltipContent = _ref.getTooltipContent;
-  var svg = React.useRef(null);
+      onTaskDelete = _ref.onTaskDelete;
 
@@ -1264,2 +1489,6 @@ var _useState = React.useState(tasks),
 
+  var _useState2 = React.useState(0),
+      scroll = _useState2[0],
+      setScroll = _useState2[1];
+
   var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
@@ -1270,13 +1499,18 @@ startDate = _ganttDateRange[0],
   var dates = seedDates(startDate, endDate, viewMode);
+  var svgHeight = rowHeight * tasks.length;
+  var gridWidth = dates.length * columnWidth;
 
-  var handleOnTasksChange = function handleOnTasksChange(tasks) {
+  var onTasksDateChange = function onTasksDateChange(tasks) {
     setGanttTasks(tasks);
   };
 
+  var handleScroll = function handleScroll(event) {
+    setScroll(event.currentTarget.scrollTop);
+  };
+
   var gridProps = {
     columnWidth: columnWidth,
-    gridWidth: dates.length * columnWidth,
+    gridWidth: gridWidth,
     tasks: ganttTasks,
     rowHeight: rowHeight,
-    headerHeight: headerHeight,
     dates: dates,
@@ -1305,3 +1539,2 @@ todayColor: todayColor
     barBackgroundSelectedColor: barBackgroundSelectedColor,
-    headerHeight: headerHeight,
     handleWidth: handleWidth,
@@ -1313,4 +1546,4 @@ arrowColor: arrowColor,
     arrowIndent: arrowIndent,
-    svg: svg,
-    onTasksDateChange: handleOnTasksChange,
+    svgHeight: svgHeight,
+    onTasksDateChange: onTasksDateChange,
     onDateChange: onDateChange,
@@ -1320,11 +1553,32 @@ onProgressChange: onProgressChange,
     onTaskDelete: onTaskDelete,
-    getTooltipContent: getTooltipContent
+    TooltipContent: TooltipContent
   };
-  return React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: columnWidth * dates.length,
-    height: headerHeight + rowHeight * tasks.length,
+  var tableProps = {
+    rowHeight: rowHeight,
+    rowWidth: listCellWidth,
     fontFamily: fontFamily,
-    ref: svg
-  }, React__default.createElement(Grid, Object.assign({}, gridProps)), React__default.createElement(Calendar, Object.assign({}, calendarProps)), React__default.createElement(GanttContent, Object.assign({}, barProps)));
+    fontSize: fontSize,
+    tasks: ganttTasks,
+    locale: locale,
+    headerHeight: headerHeight,
+    scroll: scroll,
+    ganttHeight: ganttHeight,
+    horizontalContainerClass: styles$4.horizontalContainer,
+    TaskListHeader: TaskListHeader,
+    TaskListTable: TaskListTable
+  };
+  return React__default.createElement("div", {
+    className: styles$4.wrapper
+  }, listCellWidth && React__default.createElement(TaskList, Object.assign({}, tableProps)), React__default.createElement(TaskGantt, {
+    gridProps: gridProps,
+    calendarProps: calendarProps,
+    barProps: barProps,
+    ganttHeight: ganttHeight,
+    scroll: scroll
+  }), React__default.createElement(Scroll, {
+    ganttFullHeight: ganttTasks.length * rowHeight,
+    ganttHeight: ganttHeight,
+    headerHeight: headerHeight,
+    onScroll: handleScroll
+  }));
 };
@@ -1331,0 +1585,0 @@

dist/index.modern.js

@@ -195,4 +195,236 @@ import React, { useRef, useState, useEffect } from 'react';
 
-var styles = {"gridRow":"_Mh3e0","gridHeader":"_UMdHN","gridRowLine":"_b2wly","gridTick":"_OGXLT"};
+var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
+var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
+  var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rowWidth = _ref.rowWidth;
+  return React.createElement("div", {
+    className: styles.ganttTable,
+    style: {
+      fontFamily: fontFamily,
+      fontSize: fontSize
+    }
+  }, React.createElement("div", {
+    className: styles.ganttTable_Header,
+    style: {
+      height: headerHeight - 2
+    }
+  }, React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: rowWidth
+    }
+  }, "\xA0Name"), React.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.2
+    }
+  }), React.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: rowWidth
+    }
+  }, "\xA0From"), 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: rowWidth
+    }
+  }, "\xA0To")));
+};
+
+var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3"};
+
+var TaskListTableDefault = function TaskListTableDefault(_ref) {
+  var rowHeight = _ref.rowHeight,
+      rowWidth = _ref.rowWidth,
+      tasks = _ref.tasks,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      locale = _ref.locale;
+  var dateTimeOptions = {
+    weekday: "short",
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  };
+  return React.createElement("div", {
+    className: styles$1.taskListWrapper,
+    style: {
+      fontFamily: fontFamily,
+      fontSize: fontSize
+    }
+  }, tasks.map(function (t) {
+    return React.createElement("div", {
+      className: styles$1.taskListTableRow,
+      style: {
+        height: rowHeight
+      },
+      key: t.id + "row"
+    }, React.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: rowWidth,
+        maxWidth: rowWidth
+      }
+    }, "\xA0", t.name), React.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: rowWidth
+      }
+    }, "\xA0", t.start.toLocaleDateString(locale, dateTimeOptions)), React.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: rowWidth
+      }
+    }, "\xA0", t.end.toLocaleDateString(locale, dateTimeOptions)));
+  }));
+};
+
+var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParagraph":"_29NTg","tooltipDetailsContainer":"_25P-K"};
+
+var Tooltip = function Tooltip(_ref) {
+  var x = _ref.x,
+      rowHeight = _ref.rowHeight,
+      svgHeight = _ref.svgHeight,
+      task = _ref.task,
+      fontSize = _ref.fontSize,
+      fontFamily = _ref.fontFamily,
+      TooltipContent = _ref.TooltipContent;
+  var tooltipRef = useRef(null);
+
+  var _useState = useState(1000),
+      toolWidth = _useState[0],
+      setToolWidth = _useState[1];
+
+  var _useState2 = useState((task.index - 1) * rowHeight),
+      relatedY = _useState2[0],
+      setRelatedY = _useState2[1];
+
+  useEffect(function () {
+    if (tooltipRef.current) {
+      var tooltipHeight = tooltipRef.current.offsetHeight;
+      var tooltipY = task.index * rowHeight + rowHeight;
+
+      if (tooltipHeight > tooltipY) {
+        setRelatedY(tooltipHeight * 0.5);
+      } else if (tooltipY + tooltipHeight > svgHeight) {
+        setRelatedY(svgHeight - tooltipHeight * 1.05);
+      }
+
+      setToolWidth(tooltipRef.current.scrollWidth * 1.1);
+    }
+  }, [tooltipRef, task]);
+  return React.createElement("foreignObject", {
+    x: x,
+    y: relatedY,
+    width: toolWidth,
+    height: 1000
+  }, React.createElement("div", {
+    ref: tooltipRef,
+    className: styles$2.tooltipDetailsContainer
+  }, React.createElement(TooltipContent, {
+    task: task,
+    fontSize: fontSize,
+    fontFamily: fontFamily
+  })));
+};
+var StandardTooltipContent = function StandardTooltipContent(_ref2) {
+  var task = _ref2.task,
+      fontSize = _ref2.fontSize,
+      fontFamily = _ref2.fontFamily;
+  var style = {
+    fontSize: fontSize,
+    fontFamily: fontFamily
+  };
+  return React.createElement("div", {
+    className: styles$2.tooltipDefaultContainer,
+    style: style
+  }, React.createElement("b", {
+    style: {
+      fontSize: fontSize + 6
+    }
+  }, task.name + ": " + task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), React.createElement("p", {
+    className: styles$2.tooltipDefaultContainerParagraph
+  }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React.createElement("p", {
+    className: styles$2.tooltipDefaultContainerParagraph
+  }, !!task.progress && "Progress: " + task.progress + " %"));
+};
+
+var styles$3 = {"scroll":"_3f9LK"};
+
+var Scroll = function Scroll(_ref) {
+  var ganttHeight = _ref.ganttHeight,
+      ganttFullHeight = _ref.ganttFullHeight,
+      headerHeight = _ref.headerHeight,
+      onScroll = _ref.onScroll;
+  return React.createElement("div", {
+    style: {
+      height: ganttHeight,
+      marginTop: headerHeight
+    },
+    className: styles$3.scroll,
+    onScroll: onScroll
+  }, React.createElement("div", {
+    style: {
+      height: ganttFullHeight,
+      width: 1
+    }
+  }));
+};
+
+var TaskList = function TaskList(_ref) {
+  var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rowWidth = _ref.rowWidth,
+      rowHeight = _ref.rowHeight,
+      scroll = _ref.scroll,
+      tasks = _ref.tasks,
+      locale = _ref.locale,
+      ganttHeight = _ref.ganttHeight,
+      horizontalContainerClass = _ref.horizontalContainerClass,
+      TaskListHeader = _ref.TaskListHeader,
+      TaskListTable = _ref.TaskListTable;
+  var horizontalContainerRef = useRef(null);
+  useEffect(function () {
+    if (horizontalContainerRef.current) {
+      horizontalContainerRef.current.scrollTop = scroll;
+    }
+  }, [scroll]);
+  var headerProps = {
+    headerHeight: headerHeight,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    rowWidth: rowWidth
+  };
+  var tableProps = {
+    rowHeight: rowHeight,
+    rowWidth: rowWidth,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    tasks: tasks,
+    locale: locale
+  };
+  return React.createElement("div", null, React.createElement(TaskListHeader, Object.assign({}, headerProps)), React.createElement("div", {
+    ref: horizontalContainerRef,
+    className: horizontalContainerClass,
+    style: ganttHeight ? {
+      height: ganttHeight
+    } : {}
+  }, React.createElement(TaskListTable, Object.assign({}, tableProps))));
+};
+
+var styles$4 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf"};
+
+var styles$5 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK"};
+
 var GridBody = function GridBody(_ref) {
@@ -202,9 +434,15 @@ var tasks = _ref.tasks,
       rowHeight = _ref.rowHeight,
-      headerHeight = _ref.headerHeight,
       gridWidth = _ref.gridWidth,
       columnWidth = _ref.columnWidth,
       todayColor = _ref.todayColor;
-  var y = headerHeight;
+  var y = 0;
   var gridRows = [];
-  var rowLines = [];
+  var rowLines = [React.createElement("line", {
+    key: "RowLineFirst",
+    x: "0",
+    y1: 0,
+    x2: gridWidth,
+    y2: 0,
+    className: styles$5.gridRowLine
+  })];
 
@@ -219,3 +457,3 @@ for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
       height: rowHeight,
-      className: styles.gridRow
+      className: styles$5.gridRow
     }));
@@ -228,3 +466,3 @@ rowLines.push(React.createElement("line", {
       y2: y + rowHeight,
-      className: styles.gridRowLine
+      className: styles$5.gridRowLine
     }));
@@ -244,6 +482,6 @@ y += rowHeight;
       x1: tickX,
-      y1: headerHeight,
+      y1: 0,
       x2: tickX,
       y2: y,
-      className: styles.gridTick
+      className: styles$5.gridTick
     }));
@@ -277,21 +515,9 @@
 
-var GridHeader = function GridHeader(_ref) {
-  var gridWidth = _ref.gridWidth,
-      headerHeight = _ref.headerHeight;
-  return React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: gridWidth,
-    height: headerHeight,
-    className: styles.gridHeader
-  });
-};
-
 var Grid = function Grid(props) {
   return React.createElement("g", {
     className: "grid"
-  }, React.createElement(GridHeader, Object.assign({}, props)), React.createElement(GridBody, Object.assign({}, props)));
+  }, React.createElement(GridBody, Object.assign({}, props)));
 };
 
-var styles$1 = {"calendarBottomText":"_3mT2F","calendarTopTick":"_YErfM","calendarTopText":"_25YmP"};
+var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX"};
 
@@ -312,3 +538,3 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     y2: y2Line,
-    className: styles$1.calendarTopTick,
+    className: styles$6.calendarTopTick,
     key: value + "line"
@@ -319,3 +545,3 @@ }), React.createElement("text", {
     x: xText,
-    className: styles$1.calendarTopText
+    className: styles$6.calendarTopText
   }, value));
@@ -346,3 +572,3 @@ };
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$1.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
@@ -370,3 +596,3 @@
     var bottomValues = [];
-    var weeksCount = 0;
+    var weeksCount = 1;
     var topDefaultHeight = headerHeight * 0.5;
@@ -387,3 +613,3 @@
         x: columnWidth * i,
-        className: styles$1.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
@@ -425,3 +651,3 @@
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$1.calendarBottomText
+        className: styles$6.calendarBottomText
       }, bottomValue));
@@ -432,3 +658,3 @@
         topValues.push(React.createElement(TopPartOfCalendar, {
-          key: topValue,
+          key: topValue + date.getFullYear(),
           value: topValue,
@@ -462,3 +688,3 @@ x1Line: columnWidth * (i + 1),
         x: columnWidth * i,
-        className: styles$1.calendarBottomText,
+        className: styles$6.calendarBottomText,
         fontFamily: fontFamily
@@ -470,3 +696,3 @@ }, bottomValue));
         topValues.push(React.createElement(TopPartOfCalendar, {
-          key: topValue,
+          key: topValue + date.getFullYear(),
           value: topValue,
@@ -522,103 +748,16 @@ x1Line: columnWidth * i + ticks * columnWidth,
     fontFamily: fontFamily
-  }, bottomValues, " ", topValues);
-};
-
-var styles$2 = {"barWrapper":"_nceC7","barHandle":"_1C4hH","barLabel":"_1Azmc","barLabelOutside":"_1i9jR","barBackground":"_AiPgJ"};
-
-var BarProgressHandle = function BarProgressHandle(_ref) {
-  var progressPoint = _ref.progressPoint,
-      onMouseDown = _ref.onMouseDown;
-  return React.createElement("polygon", {
-    className: styles$2.barHandle,
-    points: progressPoint,
-    onMouseDown: onMouseDown
-  });
-};
-
-var BarDateHandle = function BarDateHandle(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      barCornerRadius = _ref.barCornerRadius,
-      onMouseDown = _ref.onMouseDown;
-  return React.createElement("rect", {
-    x: x,
-    y: y,
-    width: width,
-    height: height,
-    className: styles$2.barHandle,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    onMouseDown: onMouseDown
-  });
-};
-
-var BarDisplay = function BarDisplay(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      isSelected = _ref.isSelected,
-      progressWidth = _ref.progressWidth,
-      barCornerRadius = _ref.barCornerRadius,
-      text = _ref.text,
-      hasChild = _ref.hasChild,
-      arrowIndent = _ref.arrowIndent,
-      styles = _ref.styles,
-      onMouseDown = _ref.onMouseDown;
-  var textRef = useRef(null);
-
-  var _useState = useState(true),
-      isTextInside = _useState[0],
-      setIsTextInside = _useState[1];
-
-  useEffect(function () {
-    if (textRef.current) setIsTextInside(textRef.current.getBBox().width < width);
-  }, [textRef, width]);
-
-  var getProcessColor = function getProcessColor() {
-    return isSelected ? styles.progressSelectedColor : styles.progressColor;
-  };
-
-  var getBarColor = function getBarColor() {
-    return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
-  };
-
-  var getX = function getX() {
-    return isTextInside ? x + width * 0.5 : x + width + arrowIndent * +hasChild + arrowIndent * 0.2;
-  };
-
-  return React.createElement("g", {
-    onMouseDown: onMouseDown
   }, React.createElement("rect", {
-    x: x,
-    width: width,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getBarColor(),
-    className: styles$2.barBackground
-  }), React.createElement("rect", {
-    x: x,
-    width: progressWidth,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getProcessColor()
-  }), React.createElement("text", {
-    x: getX(),
-    y: y + height * 0.5,
-    className: isTextInside ? styles$2.barLabel :  styles$2.barLabelOutside,
-    ref: textRef
-  }, text));
+    x: 0,
+    y: 0,
+    width: columnWidth * dates.length,
+    height: headerHeight,
+    className: styles$6.calendarHeader
+  }), bottomValues, " ", topValues);
 };
 
-var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
   var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
   var taskHeight = rowHeight * barFill / 100;
   var barTasks = tasks.map(function (t, i) {
-    return convertToBarTask(t, i, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
+    return convertToBarTask(t, i, dates, dateDelta, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
   });
@@ -643,6 +782,6 @@ barTasks = barTasks.map(function (task, i) {
 };
-var convertToBarTask = function convertToBarTask(task, index, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBarTask = function convertToBarTask(task, index, dates, dateDelta, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
   var x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
   var x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
-  var y = taskYCoordinate(index, rowHeight, taskHeight, headerHeight);
+  var y = taskYCoordinate(index, rowHeight, taskHeight);
 
@@ -673,4 +812,4 @@ var styles = _extends({
 };
-var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight, headerHeight) {
-  var y = index * rowHeight + headerHeight + (rowHeight - taskHeight) / 2;
+var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight) {
+  var y = index * rowHeight + (rowHeight - taskHeight) / 2;
   return y;
@@ -786,2 +925,95 @@ };
 
+var styles$7 = {"barWrapper":"_1gfz9","barHandle":"_I78P8","barLabel":"_1nTVz","barLabelOutside":"_h9J4Q","barBackground":"_3xu5M"};
+
+var BarDisplay = function BarDisplay(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      isSelected = _ref.isSelected,
+      progressWidth = _ref.progressWidth,
+      barCornerRadius = _ref.barCornerRadius,
+      text = _ref.text,
+      hasChild = _ref.hasChild,
+      arrowIndent = _ref.arrowIndent,
+      styles = _ref.styles,
+      onMouseDown = _ref.onMouseDown;
+  var textRef = useRef(null);
+
+  var _useState = useState(true),
+      isTextInside = _useState[0],
+      setIsTextInside = _useState[1];
+
+  useEffect(function () {
+    if (textRef.current) setIsTextInside(textRef.current.getBBox().width < width);
+  }, [textRef, width]);
+
+  var getProcessColor = function getProcessColor() {
+    return isSelected ? styles.progressSelectedColor : styles.progressColor;
+  };
+
+  var getBarColor = function getBarColor() {
+    return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
+  };
+
+  var getX = function getX() {
+    return isTextInside ? x + width * 0.5 : x + width + arrowIndent * +hasChild + arrowIndent * 0.2;
+  };
+
+  return React.createElement("g", {
+    onMouseDown: onMouseDown
+  }, React.createElement("rect", {
+    x: x,
+    width: width,
+    y: y,
+    height: height,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: getBarColor(),
+    className: styles$7.barBackground
+  }), React.createElement("rect", {
+    x: x,
+    width: progressWidth,
+    y: y,
+    height: height,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: getProcessColor()
+  }), React.createElement("text", {
+    x: getX(),
+    y: y + height * 0.5,
+    className: isTextInside ? styles$7.barLabel :  styles$7.barLabelOutside,
+    ref: textRef
+  }, text));
+};
+
+var BarDateHandle = function BarDateHandle(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      barCornerRadius = _ref.barCornerRadius,
+      onMouseDown = _ref.onMouseDown;
+  return React.createElement("rect", {
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    className: styles$7.barHandle,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    onMouseDown: onMouseDown
+  });
+};
+
+var BarProgressHandle = function BarProgressHandle(_ref) {
+  var progressPoint = _ref.progressPoint,
+      onMouseDown = _ref.onMouseDown;
+  return React.createElement("polygon", {
+    className: styles$7.barHandle,
+    points: progressPoint,
+    onMouseDown: onMouseDown
+  });
+};
+
 var Bar = function Bar(_ref) {
@@ -802,3 +1034,3 @@ var task = _ref.task,
   return React.createElement("g", {
-    className: styles$2.barWrapper,
+    className: styles$7.barWrapper,
     onDoubleClick: function onDoubleClick(e) {
@@ -892,59 +1124,2 @@ onEventStart(e, "dblclick", task);
 
-var styles$3 = {"tooltipDefaultContainer":"_uW0nC","tooltipDefaultContainerParagraph":"_DcYxn","tooltipDetailsContainer":"_12ytY"};
-
-var Tooltip = function Tooltip(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      task = _ref.task,
-      fontSize = _ref.fontSize,
-      fontFamily = _ref.fontFamily,
-      _ref$getTooltipConten = _ref.getTooltipContent,
-      getTooltipContent = _ref$getTooltipConten === void 0 ? getStandardTooltipContent : _ref$getTooltipConten;
-  var tooltipRef = useRef(null);
-
-  var _useState = useState(1000),
-      toolWidth = _useState[0],
-      setToolWidth = _useState[1];
-
-  var _useState2 = useState(y),
-      relatedY = _useState2[0],
-      setRelatedY = _useState2[1];
-
-  useEffect(function () {
-    if (tooltipRef.current) {
-      var height = tooltipRef.current.offsetHeight + tooltipRef.current.offsetHeight * 0.15;
-      setRelatedY(y - height);
-      setToolWidth(tooltipRef.current.scrollWidth * 1.1);
-    }
-  }, [tooltipRef, y]);
-  return React.createElement("foreignObject", {
-    x: x,
-    y: relatedY,
-    width: toolWidth,
-    height: 1000
-  }, React.createElement("div", {
-    ref: tooltipRef,
-    className: styles$3.tooltipDetailsContainer
-  }, getTooltipContent(task, fontSize, fontFamily)));
-};
-
-var getStandardTooltipContent = function getStandardTooltipContent(task, fontSize, fontFamily) {
-  var style = {
-    fontSize: fontSize,
-    fontFamily: fontFamily
-  };
-  return React.createElement("div", {
-    className: styles$3.tooltipDefaultContainer,
-    style: style
-  }, React.createElement("b", {
-    style: {
-      fontSize: fontSize + 6
-    }
-  }, task.name + ": " + task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), React.createElement("p", {
-    className: styles$3.tooltipDefaultContainerParagraph
-  }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React.createElement("p", {
-    className: styles$3.tooltipDefaultContainerParagraph
-  }, "Progress: " + task.progress + " %"));
-};
-
 function isKeyboardEvent(event) {
@@ -954,3 +1129,3 @@ return event.key !== undefined;
 
-var GanttContent = function GanttContent(_ref) {
+var TaskGanttContent = function TaskGanttContent(_ref) {
   var _svg$current;
@@ -968,6 +1143,6 @@
       barBackgroundSelectedColor = _ref.barBackgroundSelectedColor,
-      headerHeight = _ref.headerHeight,
       handleWidth = _ref.handleWidth,
       timeStep = _ref.timeStep,
       svg = _ref.svg,
+      svgHeight = _ref.svgHeight,
       arrowColor = _ref.arrowColor,
@@ -982,4 +1157,4 @@ arrowIndent = _ref.arrowIndent,
       onTaskDelete = _ref.onTaskDelete,
-      getTooltipContent = _ref.getTooltipContent;
-  var point = (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
+      TooltipContent = _ref.TooltipContent;
+  var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
@@ -1014,4 +1189,4 @@ var _useState = useState({
   useEffect(function () {
-    setBarTasks(convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
-  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, headerHeight, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
+    setBarTasks(convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
+  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
 
@@ -1028,5 +1203,3 @@ var handleBarEventStart = function handleBarEventStart(event, action, selectedTask) {
                     var newTasks = barTasks.filter(function (t) {
-                      var _barEvent$selectedTas;
-
-                      return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
+                      return t.id !== selectedTask.id;
                     });
@@ -1059,3 +1232,3 @@ onTasksDateChange(newTasks);
 
-          if (!svg.current || !point) return;
+          if (!(svg === null || svg === void 0 ? void 0 : svg.current) || !point) return;
           point.x = event.clientX;
@@ -1087,6 +1260,6 @@ var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
 
-        if (!barEvent.selectedTask || !point || !svg.current) return Promise.resolve();
+        if (!barEvent.selectedTask || !point || !(svg === null || svg === void 0 ? void 0 : svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform((_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
+        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
 
@@ -1127,6 +1300,6 @@ var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, barEvent.action, barEvent.selectedTask, xStep, timeStep, initEventX1Delta),
             action = barEvent.action;
-        if (!selectedTask || !point || !svg.current) return Promise.resolve();
+        if (!selectedTask || !point || !(svg === null || svg === void 0 ? void 0 : svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
 
@@ -1161,3 +1334,3 @@ var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, selectedTask, xStep, timeStep, initEventX1Delta),
 
-    if (!isMoving && (barEvent.action === "move" || barEvent.action === "end" || barEvent.action === "start" || barEvent.action === "progress") && svg.current) {
+    if (!isMoving && (barEvent.action === "move" || barEvent.action === "end" || barEvent.action === "start" || barEvent.action === "progress") && (svg === null || svg === void 0 ? void 0 : svg.current)) {
       svg.current.addEventListener("mousemove", handleMouseMove);
@@ -1194,3 +1367,3 @@ svg.current.addEventListener("mouseup", handleMouseUp);
       isDateChangeable: !!onDateChange && !task.isDisabled,
-      isDelete: !!onTaskDelete && !task.isDisabled,
+      isDelete: !task.isDisabled,
       onEventStart: handleBarEventStart,
@@ -1203,10 +1376,54 @@ key: task.id
     x: barEvent.selectedTask.x2 + arrowIndent + arrowIndent * 0.5,
-    y: barEvent.selectedTask.y + rowHeight,
+    rowHeight: rowHeight,
+    svgHeight: svgHeight,
     task: barEvent.selectedTask,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    getTooltipContent: getTooltipContent
+    TooltipContent: TooltipContent
   })));
 };
 
+var TaskGantt = function TaskGantt(_ref) {
+  var gridProps = _ref.gridProps,
+      calendarProps = _ref.calendarProps,
+      barProps = _ref.barProps,
+      ganttHeight = _ref.ganttHeight,
+      scroll = _ref.scroll;
+  var ganttSVGRef = useRef(null);
+  var horizontalContainerRef = useRef(null);
+
+  var newBarProps = _extends({}, barProps, {
+    svg: ganttSVGRef
+  });
+
+  useEffect(function () {
+    if (horizontalContainerRef.current) {
+      horizontalContainerRef.current.scrollTop = scroll;
+    }
+  }, [scroll]);
+  return React.createElement("div", {
+    className: styles$4.ganttVerticalContainer
+  }, React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: gridProps.gridWidth,
+    height: calendarProps.headerHeight,
+    fontFamily: barProps.fontFamily
+  }, React.createElement(Calendar, Object.assign({}, calendarProps))), React.createElement("div", {
+    ref: horizontalContainerRef,
+    className: styles$4.horizontalContainer,
+    style: ganttHeight ? {
+      height: ganttHeight,
+      width: gridProps.gridWidth
+    } : {
+      width: gridProps.gridWidth
+    }
+  }, React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: gridProps.gridWidth,
+    height: barProps.rowHeight * barProps.tasks.length,
+    fontFamily: barProps.fontFamily,
+    ref: ganttSVGRef
+  }, React.createElement(Grid, Object.assign({}, gridProps)), React.createElement(TaskGanttContent, Object.assign({}, newBarProps)))));
+};
+
 var Gantt = function Gantt(_ref) {
@@ -1218,4 +1435,8 @@ var tasks = _ref.tasks,
       columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
+      _ref$listCellWidth = _ref.listCellWidth,
+      listCellWidth = _ref$listCellWidth === void 0 ? "150px" : _ref$listCellWidth,
       _ref$rowHeight = _ref.rowHeight,
       rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
+      _ref$ganttHeight = _ref.ganttHeight,
+      ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
       _ref$viewMode = _ref.viewMode,
@@ -1251,8 +1472,12 @@ viewMode = _ref$viewMode === void 0 ? ViewMode.Day : _ref$viewMode,
       todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
+      _ref$TooltipContent = _ref.TooltipContent,
+      TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
+      _ref$TaskListHeader = _ref.TaskListHeader,
+      TaskListHeader = _ref$TaskListHeader === void 0 ? TaskListHeaderDefault : _ref$TaskListHeader,
+      _ref$TaskListTable = _ref.TaskListTable,
+      TaskListTable = _ref$TaskListTable === void 0 ? TaskListTableDefault : _ref$TaskListTable,
       onDateChange = _ref.onDateChange,
       onProgressChange = _ref.onProgressChange,
       onDoubleClick = _ref.onDoubleClick,
-      onTaskDelete = _ref.onTaskDelete,
-      getTooltipContent = _ref.getTooltipContent;
-  var svg = useRef(null);
+      onTaskDelete = _ref.onTaskDelete;
 
@@ -1263,2 +1488,6 @@ var _useState = useState(tasks),
 
+  var _useState2 = useState(0),
+      scroll = _useState2[0],
+      setScroll = _useState2[1];
+
   var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
@@ -1269,13 +1498,18 @@ startDate = _ganttDateRange[0],
   var dates = seedDates(startDate, endDate, viewMode);
+  var svgHeight = rowHeight * tasks.length;
+  var gridWidth = dates.length * columnWidth;
 
-  var handleOnTasksChange = function handleOnTasksChange(tasks) {
+  var onTasksDateChange = function onTasksDateChange(tasks) {
     setGanttTasks(tasks);
   };
 
+  var handleScroll = function handleScroll(event) {
+    setScroll(event.currentTarget.scrollTop);
+  };
+
   var gridProps = {
     columnWidth: columnWidth,
-    gridWidth: dates.length * columnWidth,
+    gridWidth: gridWidth,
     tasks: ganttTasks,
     rowHeight: rowHeight,
-    headerHeight: headerHeight,
     dates: dates,
@@ -1304,3 +1538,2 @@ todayColor: todayColor
     barBackgroundSelectedColor: barBackgroundSelectedColor,
-    headerHeight: headerHeight,
     handleWidth: handleWidth,
@@ -1312,4 +1545,4 @@ arrowColor: arrowColor,
     arrowIndent: arrowIndent,
-    svg: svg,
-    onTasksDateChange: handleOnTasksChange,
+    svgHeight: svgHeight,
+    onTasksDateChange: onTasksDateChange,
     onDateChange: onDateChange,
@@ -1319,11 +1552,32 @@ onProgressChange: onProgressChange,
     onTaskDelete: onTaskDelete,
-    getTooltipContent: getTooltipContent
+    TooltipContent: TooltipContent
   };
-  return React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: columnWidth * dates.length,
-    height: headerHeight + rowHeight * tasks.length,
+  var tableProps = {
+    rowHeight: rowHeight,
+    rowWidth: listCellWidth,
     fontFamily: fontFamily,
-    ref: svg
-  }, React.createElement(Grid, Object.assign({}, gridProps)), React.createElement(Calendar, Object.assign({}, calendarProps)), React.createElement(GanttContent, Object.assign({}, barProps)));
+    fontSize: fontSize,
+    tasks: ganttTasks,
+    locale: locale,
+    headerHeight: headerHeight,
+    scroll: scroll,
+    ganttHeight: ganttHeight,
+    horizontalContainerClass: styles$4.horizontalContainer,
+    TaskListHeader: TaskListHeader,
+    TaskListTable: TaskListTable
+  };
+  return React.createElement("div", {
+    className: styles$4.wrapper
+  }, listCellWidth && React.createElement(TaskList, Object.assign({}, tableProps)), React.createElement(TaskGantt, {
+    gridProps: gridProps,
+    calendarProps: calendarProps,
+    barProps: barProps,
+    ganttHeight: ganttHeight,
+    scroll: scroll
+  }), React.createElement(Scroll, {
+    ganttFullHeight: ganttTasks.length * rowHeight,
+    ganttHeight: ganttHeight,
+    headerHeight: headerHeight,
+    onScroll: handleScroll
+  }));
 };
@@ -1330,0 +1584,0 @@

dist/types/public-types.d.ts

@@ -48,3 +48,5 @@ /// <reference types="react" />
     columnWidth?: number;
+    listCellWidth?: string;
     rowHeight?: number;
+    ganttHeight?: number;
     barCornerRadius?: number;
@@ -66,3 +68,21 @@ handleWidth?: number;
     todayColor?: string;
-    getTooltipContent?: (task: Task, fontSize: string, fontFamily: string) => JSX.Element;
+    TooltipContent?: React.FC<{
+        task: Task;
+        fontSize: string;
+        fontFamily: string;
+    }>;
+    TaskListHeader?: React.FC<{
+        headerHeight: number;
+        rowWidth: string;
+        fontFamily: string;
+        fontSize: string;
+    }>;
+    TaskListTable?: React.FC<{
+        rowHeight: number;
+        rowWidth: string;
+        fontFamily: string;
+        fontSize: string;
+        locale: string;
+        tasks: Task[];
+    }>;
 }
@@ -69,0 +89,0 @@ export interface GanttProps extends EventOption, DisplayOption, StylingOption {

package.json

 {
   "name": "gantt-task-react",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Interactive Gantt Chart for React with TypeScript.",
@@ -5,0 +5,0 @@ "author": "MaTeMaTuK <[e-mail]>",

README.md

@@ -87,39 +87,46 @@ # gantt-task-react
 
-| Parameter Name             | Type   | Description                                                             |
-| :------------------------- | :----- | :---------------------------------------------------------------------- |
-| headerHeight               | number | Specifies the header height.                                            |
-| columnWidth                | number | Specifies the time period width.                                        |
-| rowHeight                  | number | Specifies the task row height.                                          |
-| barCornerRadius            | number | Specifies the taskbar corner rounding.                                  |
-| barFill                    | number | Specifies the taskbar occupation. Sets in percent from 0 to 100.        |
-| handleWidth                | number | Specifies width the taskbar drag event control for start and end dates. |
-| fontFamily                 | string | Specifies the application font.                                         |
-| fontSize                   | string | Specifies the application font size.                                    |
-| barProgressColor           | string | Specifies the taskbar progress fill color globally.                     |
-| barProgressSelectedColor   | string | Specifies the taskbar progress fill color globally on select.           |
-| barBackgroundColor         | string | Specifies the taskbar background fill color globally.                   |
-| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select.         |
-| arrowColor                 | string | Specifies the relationship arrow fill color.                            |
-| arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px               |
-| todayColor                 | string | Specifies the current period column fill color.                         |
-| getTooltipContent          | \*\*   | Specifies the Tooltip for selected taskbar.                             |
+| Parameter Name             | Type   | Description                                                                                    |
+| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
+| headerHeight               | number | Specifies the header height.                                                                   |
+| ganttHeight                | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
+| columnWidth                | number | Specifies the time period width.                                                               |
+| listCellWidth              | string | Specifies the task list cell width. Empty string is mean "no display".                         |
+| rowHeight                  | number | Specifies the task row height.                                                                 |
+| barCornerRadius            | number | Specifies the taskbar corner rounding.                                                         |
+| barFill                    | number | Specifies the taskbar occupation. Sets in percent from 0 to 100.                               |
+| handleWidth                | number | Specifies width the taskbar drag event control for start and end dates.                        |
+| fontFamily                 | string | Specifies the application font.                                                                |
+| fontSize                   | string | Specifies the application font size.                                                           |
+| barProgressColor           | string | Specifies the taskbar progress fill color globally.                                            |
+| barProgressSelectedColor   | string | Specifies the taskbar progress fill color globally on select.                                  |
+| barBackgroundColor         | string | Specifies the taskbar background fill color globally.                                          |
+| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select.                                |
+| arrowColor                 | string | Specifies the relationship arrow fill color.                                                   |
+| arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px                                      |
+| todayColor                 | string | Specifies the current period column fill color.                                                |
+| TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |
+| TaskListHeader             |        | Specifies the task list Header view                                                            |
+| TaskListTable              |        | Specifies the task list Table view                                                             |
 
-[\*\*`(task:Task, fontSize:string , fontFamily:string) => JSX.Element;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/07dfeddd4d96ecc418619cad9cd9ba3c31bb82a8/src/components/Other/tooltip.tsx#L47)
+- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/Other/tooltip.tsx#L56)
+- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
+- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; }>;`
 
 ### Task
 
-| Parameter Name | Type   | Description                                                                                           |
-| :------------- | :----- | :---------------------------------------------------------------------------------------------------- |
-| id\*           | string | Task id.                                                                                              |
-| name\*         | string | Task display name.                                                                                    |
-| start\*        | Date   | Task start date.                                                                                      |
-| end\*          | Date   | Task end date.                                                                                        |
-| progress\*     | number | Task progress. Sets in percent from 0 to 100.                                                         |
-| styles         | object | Specifies the taskbar styling settings locally. Object is passed with the following attributes:       |
-|                |        | - **backgroundColor**: String. Specifies the taskbar background fill color locally.                   |
-|                |        | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |
-|                |        | - **progressColor**: String. Specifies the taskbar progress fill color locally.                       |
-|                |        | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select.    |
-| isDisabled     | bool   | Disables all action for current task.                                                                 |
-| fontSize       | string | Specifies the taskbar font size locally.                                                              |
+| Parameter Name | Type     | Description                                                                                           |
+| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |
+| id\*           | string   | Task id.                                                                                              |
+| name\*         | string   | Task display name.                                                                                    |
+| start\*        | Date     | Task start date.                                                                                      |
+| end\*          | Date     | Task end date.                                                                                        |
+| progress\*     | number   | Task progress. Sets in percent from 0 to 100.                                                         |
+| dependencies   | string[] | Specifies the parent dependencies ids.                                                                |
+| styles         | object   | Specifies the taskbar styling settings locally. Object is passed with the following attributes:       |
+|                |          | - **backgroundColor**: String. Specifies the taskbar background fill color locally.                   |
+|                |          | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |
+|                |          | - **progressColor**: String. Specifies the taskbar progress fill color locally.                       |
+|                |          | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select.    |
+| isDisabled     | bool     | Disables all action for current task.                                                                 |
+| fontSize       | string   | Specifies the taskbar font size locally.                                                              |
 
@@ -126,0 +133,0 @@ \*Required

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

342933

increased by18.06%

Number of package files

33

increased by13.79%

Lines of code

3299

increased by24.16%

Number of lines in readme file

137

increased by5.38%

No dependency changes