gantt-lib 0.102.0 → 0.104.0

package/dist/index.js

@@ -717,13 +717,13 @@ function computeParentProgress(parentId, tasks) {
   if (children.length === 0) {
     return 0;
   }
-  const DAY_MS4 = 24 * 60 * 60 * 1e3;
+  const DAY_MS5 = 24 * 60 * 60 * 1e3;
   let totalWeight = 0;
   let weightedSum = 0;
   for (const child of children) {
     const start = new Date(child.startDate).getTime();
     const end = new Date(child.endDate).getTime();
-    const duration = (end - start + DAY_MS4) / DAY_MS4;
+    const duration = (end - start + DAY_MS5) / DAY_MS5;
     const progress = child.progress ?? 0;
     totalWeight += duration;
     weightedSum += duration * progress;
@@ -817,10 +817,10 @@ function buildTaskRangeFromStart(startDate, duration, businessDays = false, week
       end: parseDateOnly(addBusinessDays(normalizedStart, duration, weekendPredicate))
     };
   }
-  const DAY_MS4 = 24 * 60 * 60 * 1e3;
+  const DAY_MS5 = 24 * 60 * 60 * 1e3;
   return {
     start: normalizedStart,
-    end: new Date(normalizedStart.getTime() + (Math.max(1, duration) - 1) * DAY_MS4)
+    end: new Date(normalizedStart.getTime() + (Math.max(1, duration) - 1) * DAY_MS5)
   };
 }
 function buildTaskRangeFromEnd(endDate, duration, businessDays = false, weekendPredicate, snapDirection = -1) {
@@ -831,9 +831,9 @@ function buildTaskRangeFromEnd(endDate, duration, businessDays = false, weekendP
       end: normalizedEnd
     };
   }
-  const DAY_MS4 = 24 * 60 * 60 * 1e3;
+  const DAY_MS5 = 24 * 60 * 60 * 1e3;
   return {
-    start: new Date(normalizedEnd.getTime() - (Math.max(1, duration) - 1) * DAY_MS4),
+    start: new Date(normalizedEnd.getTime() - (Math.max(1, duration) - 1) * DAY_MS5),
     end: normalizedEnd
   };
 }
@@ -4857,6 +4857,30 @@ var TaskListRow = import_react10.default.memo(
     const editingName = editingColumnId === "name";
     const editingDuration = editingColumnId === "duration";
     const editingProgress = editingColumnId === "progress";
+    const columnWidthStyleMap = (0, import_react10.useMemo)(() => {
+      return new Map(
+        (resolvedColumns ?? []).map((column) => {
+          const width = column.width ?? 120;
+          return [
+            column.id,
+            {
+              width,
+              minWidth: width,
+              maxWidth: width,
+              flex: `0 0 ${width}px`
+            }
+          ];
+        })
+      );
+    }, [resolvedColumns]);
+    const getColumnStyle = (0, import_react10.useCallback)((columnId, fallbackWidth) => {
+      return columnWidthStyleMap.get(columnId) ?? {
+        width: fallbackWidth,
+        minWidth: fallbackWidth,
+        maxWidth: fallbackWidth,
+        flex: `0 0 ${fallbackWidth}px`
+      };
+    }, [columnWidthStyleMap]);
     const normalizedTask = (0, import_react10.useMemo)(() => normalizeTaskDatesForType(task), [task]);
     const isMilestone = (0, import_react10.useMemo)(() => isMilestoneTask(normalizedTask), [normalizedTask]);
     const [nameValue, setNameValue] = (0, import_react10.useState)("");
@@ -5654,6 +5678,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-selection",
+        style: getColumnStyle("selection", 36),
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
@@ -5671,6 +5696,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-number",
+        style: getColumnStyle("number", 40),
         onClick: handleNumberClick,
         children: [
           onDragStart && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -5693,7 +5719,7 @@ var TaskListRow = import_react10.default.memo(
     );
     const nameTriggerPaddingLeft = isParent ? `${nestingDepth * 20 + 28}px` : nestingDepth > 0 ? `${nestingDepth * 20 + 8}px` : void 0;
     const nameInputPaddingLeft = nestingDepth > 0 ? `${nestingDepth * 20 + 8}px` : void 0;
-    const nameCell = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-cell gantt-tl-cell-name", children: [
+    const nameCell = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-cell gantt-tl-cell-name", style: getColumnStyle("name", 200), children: [
       isChild && !editingName && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
         !isFilterHideMode && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
           ancestorLineModes.map(
@@ -6055,6 +6081,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-date",
+        style: getColumnStyle("startDate", 90),
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           DatePicker,
@@ -6075,6 +6102,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-date",
+        style: getColumnStyle("endDate", 90),
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           DatePicker,
@@ -6095,6 +6123,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-duration",
+        style: getColumnStyle("duration", 60),
         onClick: handleDurationClick,
         children: [
           editingDuration && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -6186,6 +6215,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-progress",
+        style: getColumnStyle("progress", 50),
         onClick: handleProgressClick,
         children: [
           editingProgress && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -6283,6 +6313,7 @@ var TaskListRow = import_react10.default.memo(
       "div",
       {
         className: "gantt-tl-cell gantt-tl-cell-deps",
+        style: getColumnStyle("dependencies", 128),
         onClick: isSourceRow ? handleSourceCellClick : isPicking ? handlePredecessorPick : void 0,
         children: isSourceRow ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -6749,6 +6780,18 @@ function resolveTaskListColumns(builtIn, custom, hiddenColumnIds = []) {
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var LINK_TYPE_ORDER2 = ["FS", "SS", "FF", "SF"];
 var MIN_TASK_LIST_WIDTH = 530;
+var DEFAULT_COLUMN_MIN_WIDTH = 40;
+var BUILT_IN_COLUMN_MIN_WIDTHS = {
+  selection: 36,
+  number: 40,
+  name: 160,
+  startDate: 68,
+  endDate: 68,
+  duration: 60,
+  progress: 50,
+  dependencies: 128,
+  actions: 56
+};
 var BUILT_IN_CSS_CLASSES = {
   selection: "gantt-tl-cell-selection",
   number: "gantt-tl-cell-number",
@@ -6826,6 +6869,24 @@ function getTaskNumber(tasks, taskIndex) {
   }
   return `${parentNumber}.${siblingIndex + 1}`;
 }
+function normalizeColumnWidthMap(widths) {
+  if (!widths) {
+    return {};
+  }
+  return Object.entries(widths).reduce((acc, [columnId, width]) => {
+    if (typeof width !== "number" || !Number.isFinite(width) || width <= 0) {
+      return acc;
+    }
+    acc[columnId] = Math.round(width);
+    return acc;
+  }, {});
+}
+function getColumnMinWidth(column) {
+  return Math.max(
+    typeof column.minWidth === "number" && Number.isFinite(column.minWidth) ? column.minWidth : 0,
+    BUILT_IN_COLUMN_MIN_WIDTHS[column.id] ?? DEFAULT_COLUMN_MIN_WIDTH
+  );
+}
 var SelectAllCheckbox = ({
   checked,
   indeterminate,
@@ -6889,6 +6950,8 @@ var TaskList = ({
   isFilterActive = false,
   additionalColumns,
   hiddenTaskListColumns,
+  taskListColumnWidths,
+  onTaskListColumnWidthsChange,
   taskListMenuCommands,
   hideTaskListRowActions = false,
   rowContentLines = 1,
@@ -6898,6 +6961,8 @@ var TaskList = ({
 }) => {
   const [internalSelectedTaskIds, setInternalSelectedTaskIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
   const [activeCustomCell, setActiveCustomCell] = (0, import_react12.useState)(null);
+  const [columnWidthOverrides, setColumnWidthOverrides] = (0, import_react12.useState)(() => normalizeColumnWidthMap(taskListColumnWidths));
+  const resizeStateRef = (0, import_react12.useRef)(null);
   const effectiveSelectedTaskIds = selectedTaskIds ?? internalSelectedTaskIds;
   const emitSelectedTaskIdsChange = (0, import_react12.useCallback)((nextSelectedTaskIds) => {
     if (!selectedTaskIds) {
@@ -7470,13 +7535,24 @@ var TaskList = ({
     () => createBuiltInColumns({ businessDays, enableTaskMultiSelect }),
     [businessDays, enableTaskMultiSelect]
   );
+  (0, import_react12.useEffect)(() => {
+    setColumnWidthOverrides(normalizeColumnWidthMap(taskListColumnWidths));
+  }, [taskListColumnWidths]);
   const resolvedColumns = (0, import_react12.useMemo)(
     () => resolveTaskListColumns(
       builtInColumns,
       additionalColumns ?? [],
       hiddenTaskListColumns
-    ),
-    [builtInColumns, additionalColumns, hiddenTaskListColumns]
+    ).map((column) => {
+      const configuredWidth = columnWidthOverrides[column.id];
+      const baseWidth = configuredWidth ?? column.width ?? 120;
+      const width = Math.max(getColumnMinWidth(column), baseWidth);
+      return {
+        ...column,
+        width
+      };
+    }),
+    [builtInColumns, additionalColumns, hiddenTaskListColumns, columnWidthOverrides]
   );
   const resolvedColumnWidthTotal = (0, import_react12.useMemo)(
     () => resolvedColumns.reduce((sum, col) => sum + (col.width ?? 120), 0),
@@ -7485,6 +7561,78 @@ var TaskList = ({
   const requestedTaskListWidth = taskListWidth ?? Math.min(MIN_TASK_LIST_WIDTH, resolvedColumnWidthTotal);
   const effectiveTaskListWidth = Math.max(requestedTaskListWidth, resolvedColumnWidthTotal);
   const tableHeaderHeight = headerHeight + 1;
+  const updateColumnWidth = (0, import_react12.useCallback)((columnId, width) => {
+    setColumnWidthOverrides((prev) => {
+      if (prev[columnId] === width) {
+        return prev;
+      }
+      const next = { ...prev, [columnId]: width };
+      onTaskListColumnWidthsChange?.(next);
+      return next;
+    });
+  }, [onTaskListColumnWidthsChange]);
+  (0, import_react12.useEffect)(() => {
+    const handleMouseMove = (event) => {
+      const resizeState = resizeStateRef.current;
+      if (!resizeState) {
+        return;
+      }
+      const column = resolvedColumns.find((item) => item.id === resizeState.columnId);
+      if (!column) {
+        return;
+      }
+      const nextWidth = Math.max(
+        getColumnMinWidth(column),
+        Math.round(resizeState.startWidth + event.clientX - resizeState.startX)
+      );
+      updateColumnWidth(column.id, nextWidth);
+    };
+    const handleMouseUp = () => {
+      if (!resizeStateRef.current) {
+        return;
+      }
+      resizeStateRef.current = null;
+      document.body.style.removeProperty("cursor");
+      document.body.style.removeProperty("user-select");
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.removeProperty("cursor");
+      document.body.style.removeProperty("user-select");
+    };
+  }, [resolvedColumns, updateColumnWidth]);
+  const startColumnResize = (0, import_react12.useCallback)((columnId, event) => {
+    const column = resolvedColumns.find((item) => item.id === columnId);
+    if (!column) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    resizeStateRef.current = {
+      columnId,
+      startX: event.clientX,
+      startWidth: column.width ?? 120
+    };
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [resolvedColumns]);
+  const renderResizeHandle = (0, import_react12.useCallback)((columnId) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "gantt-tl-column-resize-handle",
+      "data-testid": `tasklist-resize-handle-${columnId}`,
+      "aria-label": `Resize ${columnId} column`,
+      onMouseDown: (event) => startColumnResize(columnId, event),
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+  ), [startColumnResize]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
@@ -7497,19 +7645,23 @@ var TaskList = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-table", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-header", style: { height: `${tableHeaderHeight}px` }, children: resolvedColumns.map((col) => {
           if (col.id === "selection") {
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "div",
               {
                 className: "gantt-tl-headerCell gantt-tl-cell-selection",
                 "data-column-id": "selection",
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  SelectAllCheckbox,
-                  {
-                    checked: areAllVisibleTasksSelected,
-                    indeterminate: areSomeVisibleTasksSelected,
-                    onChange: handleToggleAllVisibleTaskSelection
-                  }
-                )
+                style: { width: col.width, minWidth: col.width, maxWidth: col.width, flex: `0 0 ${col.width}px`, position: "relative" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    SelectAllCheckbox,
+                    {
+                      checked: areAllVisibleTasksSelected,
+                      indeterminate: areSomeVisibleTasksSelected,
+                      onChange: handleToggleAllVisibleTaskSelection
+                    }
+                  ),
+                  renderResizeHandle(col.id)
+                ]
               },
               col.id
             );
@@ -7520,7 +7672,7 @@ var TaskList = ({
               {
                 className: "gantt-tl-headerCell gantt-tl-cell-deps",
                 "data-column-id": "dependencies",
-                style: { position: "relative" },
+                style: { width: col.width, minWidth: col.width, maxWidth: col.width, flex: `0 0 ${col.width}px`, position: "relative" },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Popover, { open: typeMenuOpen, onOpenChange: setTypeMenuOpen, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -7552,7 +7704,8 @@ var TaskList = ({
                       lt
                     )) }) })
                   ] }),
-                  dependencyError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-dep-error", children: dependencyError })
+                  dependencyError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-dep-error", children: dependencyError }),
+                  renderResizeHandle(col.id)
                 ]
               },
               col.id
@@ -7560,24 +7713,31 @@ var TaskList = ({
           }
           const builtInClass = BUILT_IN_CSS_CLASSES[col.id];
           if (builtInClass !== void 0) {
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "div",
               {
                 className: `gantt-tl-headerCell ${builtInClass}`,
                 "data-column-id": col.id,
-                children: col.header
+                style: { width: col.width, minWidth: col.width, maxWidth: col.width, flex: `0 0 ${col.width}px`, position: "relative" },
+                children: [
+                  col.header,
+                  renderResizeHandle(col.id)
+                ]
               },
               col.id
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "div",
             {
               className: `gantt-tl-headerCell gantt-tl-headerCell-custom gantt-tl-cell-align-${col.align ?? "left"}`,
               "data-column-id": `custom:${col.id}`,
               "data-custom-column-id": col.id,
-              style: { width: col.width, minWidth: col.width, flexShrink: 0 },
-              children: col.header
+              style: { width: col.width, minWidth: col.width, maxWidth: col.width, flex: `0 0 ${col.width}px`, position: "relative" },
+              children: [
+                col.header,
+                renderResizeHandle(col.id)
+              ]
             },
             col.id
           );
@@ -9398,6 +9558,7 @@ var import_react15 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var AUTO_COLUMN_MIN_WIDTH = 72;
 var AUTO_COLUMN_MAX_WIDTH = 180;
+var DAY_MS4 = 24 * 60 * 60 * 1e3;
 function joinClasses(...values) {
   return values.filter(Boolean).join(" ");
 }
@@ -9410,6 +9571,40 @@ function getAutoMinWidth(column) {
 function getAutoMaxWidth(column) {
   return column.maxWidth ?? AUTO_COLUMN_MAX_WIDTH;
 }
+function parseDateOnlyMs(value) {
+  if (value instanceof Date) {
+    return Date.UTC(value.getFullYear(), value.getMonth(), value.getDate());
+  }
+  const [year, month, day] = value.split("T")[0].split("-").map(Number);
+  if (!year || !month || !day) {
+    return Number.NaN;
+  }
+  return Date.UTC(year, month - 1, day);
+}
+function getOverlayWidthPercent(column, overlayDateMs) {
+  if (overlayDateMs === null || column.periodStartDate === void 0 || column.periodEndDate === void 0) {
+    return 0;
+  }
+  const startMs = parseDateOnlyMs(column.periodStartDate);
+  const endMs = parseDateOnlyMs(column.periodEndDate);
+  if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs < startMs || overlayDateMs < startMs) {
+    return 0;
+  }
+  if (overlayDateMs >= endMs) {
+    return 100;
+  }
+  const totalDays = Math.max(1, Math.round((endMs - startMs) / DAY_MS4) + 1);
+  const elapsedDays = Math.min(totalDays, Math.max(0, Math.round((overlayDateMs - startMs) / DAY_MS4) + 1));
+  return elapsedDays / totalDays * 100;
+}
+function isOverlayDateInColumn(column, overlayDateMs) {
+  if (overlayDateMs === null || column.periodStartDate === void 0 || column.periodEndDate === void 0) {
+    return false;
+  }
+  const startMs = parseDateOnlyMs(column.periodStartDate);
+  const endMs = parseDateOnlyMs(column.periodEndDate);
+  return Number.isFinite(startMs) && Number.isFinite(endMs) && startMs <= overlayDateMs && overlayDateMs <= endMs;
+}
 function TableMatrix({
   tasks,
   allTasks = tasks,
@@ -9421,6 +9616,7 @@ function TableMatrix({
   selectedTaskId,
   onTaskSelect,
   onCellClick,
+  dateOverlay,
   highlightedTaskIds,
   filterMode = "highlight"
 }) {
@@ -9474,6 +9670,10 @@ function TableMatrix({
     () => resolvedColumnWidths.reduce((sum, width) => sum + width, 0),
     [resolvedColumnWidths]
   );
+  const overlayDateMs = (0, import_react15.useMemo)(
+    () => dateOverlay ? parseDateOnlyMs(dateOverlay.date) : null,
+    [dateOverlay]
+  );
   const hasGroupHeader = (0, import_react15.useMemo)(
     () => columns.some((column) => !!column.groupId) || (columnGroups?.length ?? 0) > 0,
     [columnGroups, columns]
@@ -9484,7 +9684,7 @@ function TableMatrix({
   );
   const headerSpans = (0, import_react15.useMemo)(() => {
     if (!hasGroupHeader) return [];
-    if (!hasAutoWidthColumns && columnGroups?.some((group) => typeof group.width === "number")) {
+    if (columnGroups?.some((group) => typeof group.width === "number")) {
       return columnGroups.map((group) => ({
         id: group.id,
         header: group.header,
@@ -9572,14 +9772,14 @@ function TableMatrix({
         {
           className: "gantt-mx-headerRow gantt-mx-headerGroupRow",
           style: {
-            gridTemplateColumns: hasAutoWidthColumns ? gridTemplateColumns : headerSpans.map((span) => `${span.width ?? 0}px`).join(" "),
+            gridTemplateColumns: headerSpans.map((span) => `${span.width ?? 0}px`).join(" "),
             height: `${topRowHeight}px`
           },
           children: headerSpans.map((span) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               className: joinClasses("gantt-mx-groupCell", span.className),
-              style: hasAutoWidthColumns ? { gridColumn: `span ${span.columnSpan ?? 1}` } : void 0,
+              style: span.columnSpan !== void 0 ? { gridColumn: `span ${span.columnSpan}` } : void 0,
               children: span.header
             },
             span.id
@@ -9591,18 +9791,34 @@ function TableMatrix({
         {
           className: "gantt-mx-headerRow",
           style: { gridTemplateColumns, height: `${hasGroupHeader ? bottomRowHeight : topRowHeight}px` },
-          children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "div",
-            {
-              className: joinClasses(
-                "gantt-mx-headerCell",
-                column.headerClassName
-              ),
-              style: column.minWidth !== void 0 ? { minWidth: `${column.minWidth}px` } : void 0,
-              children: column.header
-            },
-            column.id
-          ))
+          children: columns.map((column) => {
+            const overlayWidthPercent = getOverlayWidthPercent(column, overlayDateMs);
+            const shouldRenderOverlayEdge = isOverlayDateInColumn(column, overlayDateMs);
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "div",
+              {
+                className: joinClasses(
+                  "gantt-mx-headerCell",
+                  column.headerClassName
+                ),
+                style: column.minWidth !== void 0 ? { minWidth: `${column.minWidth}px` } : void 0,
+                children: [
+                  shouldRenderOverlayEdge && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "span",
+                    {
+                      className: "gantt-mx-dateOverlayEdge",
+                      style: {
+                        left: `${overlayWidthPercent}%`,
+                        background: dateOverlay && dateOverlay.edgeColor ? dateOverlay.edgeColor : void 0
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gantt-mx-headerContent", children: column.header })
+                ]
+              },
+              column.id
+            );
+          })
         }
       )
     ] }),
@@ -9642,7 +9858,10 @@ function TableMatrix({
               onClick: () => onTaskSelect?.(task.id),
               children: columns.map((column, columnIndex) => {
                 const resolvedCellClassName = typeof column.cellClassName === "function" ? column.cellClassName(task) : column.cellClassName;
-                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                const overlayWidthPercent = getOverlayWidthPercent(column, overlayDateMs);
+                const shouldRenderOverlay = overlayWidthPercent > 0 && (!dateOverlay || !dateOverlay.shouldRender || dateOverlay.shouldRender({ task, column, rowIndex: index, columnIndex }));
+                const shouldRenderOverlayEdge = isOverlayDateInColumn(column, overlayDateMs);
+                return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                   "div",
                   {
                     className: joinClasses(
@@ -9656,7 +9875,29 @@ function TableMatrix({
                     onClick: (event) => {
                       onCellClick?.({ task, column, rowIndex: index, columnIndex, event });
                     },
-                    children: column.renderCell(task)
+                    children: [
+                      shouldRenderOverlay && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        "span",
+                        {
+                          className: joinClasses("gantt-mx-dateOverlay", dateOverlay && dateOverlay.className),
+                          style: {
+                            width: `${overlayWidthPercent}%`,
+                            background: dateOverlay && dateOverlay.color ? dateOverlay.color : void 0
+                          }
+                        }
+                      ),
+                      shouldRenderOverlayEdge && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        "span",
+                        {
+                          className: "gantt-mx-dateOverlayEdge",
+                          style: {
+                            left: `${overlayWidthPercent}%`,
+                            background: dateOverlay && dateOverlay.edgeColor ? dateOverlay.edgeColor : void 0
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gantt-mx-cellContent", children: column.renderCell(task) })
+                    ]
                   },
                   `${task.id}:${column.id}`
                 );
@@ -10061,6 +10302,8 @@ function TaskGanttChartInner(props, ref) {
     showChart = true,
     additionalColumns,
     hiddenTaskListColumns,
+    taskListColumnWidths,
+    onTaskListColumnWidthsChange,
     taskListMenuCommands,
     hideTaskListRowActions = false,
     rowContentLines = 1,
@@ -10075,6 +10318,7 @@ function TaskGanttChartInner(props, ref) {
   const matrixColumns = isTableMatrixMode ? props.matrixColumns : [];
   const matrixColumnGroups = isTableMatrixMode ? props.matrixColumnGroups : void 0;
   const onMatrixCellClick = isTableMatrixMode ? props.onMatrixCellClick : void 0;
+  const matrixDateOverlay = isTableMatrixMode ? props.matrixDateOverlay : void 0;
   const containerRef = (0, import_react16.useRef)(null);
   const scrollContainerRef = (0, import_react16.useRef)(null);
   const scrollContentRef = (0, import_react16.useRef)(null);
@@ -10726,6 +10970,8 @@ function TaskGanttChartInner(props, ref) {
                     isFilterActive: !!taskFilter,
                     additionalColumns,
                     hiddenTaskListColumns,
+                    taskListColumnWidths,
+                    onTaskListColumnWidthsChange,
                     taskListMenuCommands,
                     hideTaskListRowActions,
                     rowContentLines: resolvedRowContentLines,
@@ -10757,6 +11003,7 @@ function TaskGanttChartInner(props, ref) {
                         selectedTaskId,
                         onTaskSelect: handleTaskSelect,
                         onCellClick: onMatrixCellClick,
+                        dateOverlay: matrixDateOverlay,
                         highlightedTaskIds: taskListHighlightedTaskIds,
                         filterMode
                       }