gantt-lib 0.102.0 → 0.103.0

package/dist/index.d.mts

@@ -343,6 +343,8 @@ interface TableMatrixColumn<TTask extends Task = Task> {
     width?: number | 'auto';
     minWidth?: number;
     maxWidth?: number;
+    periodStartDate?: string | Date;
+    periodEndDate?: string | Date;
     groupId?: string;
     align?: 'left' | 'center' | 'right';
     className?: string;
@@ -357,6 +359,18 @@ interface TableMatrixCellClickContext<TTask extends Task = Task> {
     columnIndex: number;
     event: React$1.MouseEvent<HTMLDivElement>;
 }
+interface TableMatrixDateOverlay<TTask extends Task = Task> {
+    date: string | Date;
+    className?: string;
+    color?: string;
+    edgeColor?: string;
+    shouldRender?: (context: {
+        task: TTask;
+        column: TableMatrixColumn<TTask>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+}
 interface TableMatrixProps<TTask extends Task = Task> {
     tasks: TTask[];
     allTasks?: TTask[];
@@ -368,10 +382,11 @@ interface TableMatrixProps<TTask extends Task = Task> {
     selectedTaskId?: string | null;
     onTaskSelect?: (taskId: string | null) => void;
     onCellClick?: (context: TableMatrixCellClickContext<TTask>) => void;
+    dateOverlay?: TableMatrixDateOverlay<TTask> | false;
     highlightedTaskIds?: Set<string>;
     filterMode?: 'highlight' | 'hide';
 }
-declare function TableMatrix<TTask extends Task = Task>({ tasks, allTasks, columns, columnGroups, rowHeight, headerHeight, bodyMinHeight, selectedTaskId, onTaskSelect, onCellClick, highlightedTaskIds, filterMode, }: TableMatrixProps<TTask>): react_jsx_runtime.JSX.Element;
+declare function TableMatrix<TTask extends Task = Task>({ tasks, allTasks, columns, columnGroups, rowHeight, headerHeight, bodyMinHeight, selectedTaskId, onTaskSelect, onCellClick, dateOverlay, highlightedTaskIds, filterMode, }: TableMatrixProps<TTask>): react_jsx_runtime.JSX.Element;
 
 /**
  * Task data structure for Gantt chart
@@ -582,6 +597,8 @@ interface TableMatrixModeProps<TTask extends Task = Task> extends TaskChartShare
     matrixColumnGroups?: Array<TableMatrixColumnGroup>;
     /** Called when any data cell in the right-side matrix is clicked. */
     onMatrixCellClick?: (context: TableMatrixCellClickContext<TTask>) => void;
+    /** Optional actual-date overlay rendered under matrix cell content for date-ranged columns. */
+    matrixDateOverlay?: TableMatrixDateOverlay<TTask> | false;
 }
 type GanttChartProps<TTask extends Task = Task, TItem extends ResourceTimelineItem = ResourceTimelineItem> = GanttModeProps<TTask> | TableMatrixModeProps<TTask> | ResourcePlannerChartProps<TItem>;
 interface ExportToPdfOptions {
@@ -1380,4 +1397,4 @@ interface VisibleReorderPosition {
  */
 declare function getVisibleReorderPosition(orderedTasks: TaskLike[], visibleTasks: TaskLike[], movedTaskId: string, originVisibleIndex: number, dropVisibleIndex: number): VisibleReorderPosition | null;
 
-export { type BuiltInTaskListColumnId, Button, type ButtonProps, Calendar, type CalendarProps, type CustomDayConfig, type CustomDayPredicateConfig, DatePicker, type DatePickerProps, DragGuideLines, type ExportToPdfHeaderOptions, type ExportToPdfOptions, GanttChart, type GanttChartHandle, type GanttChartProps, type GanttModeProps, GridBackground, Input, type InputProps, type MonthBlock, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, ResourcePlannerChartProps, ResourceTimelineChart, type ResourceTimelineConflictRange, ResourceTimelineItem, type ResourceTimelineLayoutDiagnostic, type ResourceTimelineLayoutItem, type ResourceTimelineLayoutOptions, type ResourceTimelineLayoutResult, type ResourceTimelineLayoutRow, ResourceTimelineResource, TableMatrix, type TableMatrixCellClickContext, type TableMatrixColumn, type TableMatrixColumnGroup, type TableMatrixModeProps, type Task, TaskDateChangeMode, type TaskDependency, TaskList, type TaskListColumn, type TaskListColumnContext, type TaskListColumnId, type TaskListMenuCommand, type TaskListProps, type TaskPredicate, TaskRow, TimeScaleHeader, TodayIndicator, ValidationResult, type VisibleReorderPosition, type WeekBlock, type WeekSpan, type WithoutDepsOptions, type YearSpan, addBusinessDays, and, calculateBezierPath, calculateDependencyPath, calculateGridLines, calculateGridWidth, calculateMilestoneConnectionBounds, calculateMilestoneGeometry, calculateMonthGridLines, calculateOrthogonalPath, calculateTaskBar, calculateWeekGridLines, calculateWeekendBlocks, clampDateRangeForIncomingFS, createCustomDayPredicate, createDateKey, detectEdgeZone, expired, flattenHierarchy, formatDateLabel, formatDateRangeLabel, getBusinessDaysCount, getCursorForPosition, getDayOffset, getMonthBlocks, getMonthDays, getMonthSpans, getMultiMonthDays, getVisibleReorderPosition, getWeekBlocks, getWeekSpans, getYearSpans, inDateRange, isTaskExpired, isToday, isWeekend, layoutResourceTimelineItems, nameContains, normalizeHierarchyTasks, normalizeTaskDates, not, or, parseUTCDate, pixelsToDate, progressInRange, resolveDateRangeFromPixels, resolveTaskHorizontalGeometry, subtractBusinessDays, useTaskDrag, withoutDeps };
+export { type BuiltInTaskListColumnId, Button, type ButtonProps, Calendar, type CalendarProps, type CustomDayConfig, type CustomDayPredicateConfig, DatePicker, type DatePickerProps, DragGuideLines, type ExportToPdfHeaderOptions, type ExportToPdfOptions, GanttChart, type GanttChartHandle, type GanttChartProps, type GanttModeProps, GridBackground, Input, type InputProps, type MonthBlock, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, ResourcePlannerChartProps, ResourceTimelineChart, type ResourceTimelineConflictRange, ResourceTimelineItem, type ResourceTimelineLayoutDiagnostic, type ResourceTimelineLayoutItem, type ResourceTimelineLayoutOptions, type ResourceTimelineLayoutResult, type ResourceTimelineLayoutRow, ResourceTimelineResource, TableMatrix, type TableMatrixCellClickContext, type TableMatrixColumn, type TableMatrixColumnGroup, type TableMatrixDateOverlay, type TableMatrixModeProps, type Task, TaskDateChangeMode, type TaskDependency, TaskList, type TaskListColumn, type TaskListColumnContext, type TaskListColumnId, type TaskListMenuCommand, type TaskListProps, type TaskPredicate, TaskRow, TimeScaleHeader, TodayIndicator, ValidationResult, type VisibleReorderPosition, type WeekBlock, type WeekSpan, type WithoutDepsOptions, type YearSpan, addBusinessDays, and, calculateBezierPath, calculateDependencyPath, calculateGridLines, calculateGridWidth, calculateMilestoneConnectionBounds, calculateMilestoneGeometry, calculateMonthGridLines, calculateOrthogonalPath, calculateTaskBar, calculateWeekGridLines, calculateWeekendBlocks, clampDateRangeForIncomingFS, createCustomDayPredicate, createDateKey, detectEdgeZone, expired, flattenHierarchy, formatDateLabel, formatDateRangeLabel, getBusinessDaysCount, getCursorForPosition, getDayOffset, getMonthBlocks, getMonthDays, getMonthSpans, getMultiMonthDays, getVisibleReorderPosition, getWeekBlocks, getWeekSpans, getYearSpans, inDateRange, isTaskExpired, isToday, isWeekend, layoutResourceTimelineItems, nameContains, normalizeHierarchyTasks, normalizeTaskDates, not, or, parseUTCDate, pixelsToDate, progressInRange, resolveDateRangeFromPixels, resolveTaskHorizontalGeometry, subtractBusinessDays, useTaskDrag, withoutDeps };

package/dist/index.d.ts

@@ -343,6 +343,8 @@ interface TableMatrixColumn<TTask extends Task = Task> {
     width?: number | 'auto';
     minWidth?: number;
     maxWidth?: number;
+    periodStartDate?: string | Date;
+    periodEndDate?: string | Date;
     groupId?: string;
     align?: 'left' | 'center' | 'right';
     className?: string;
@@ -357,6 +359,18 @@ interface TableMatrixCellClickContext<TTask extends Task = Task> {
     columnIndex: number;
     event: React$1.MouseEvent<HTMLDivElement>;
 }
+interface TableMatrixDateOverlay<TTask extends Task = Task> {
+    date: string | Date;
+    className?: string;
+    color?: string;
+    edgeColor?: string;
+    shouldRender?: (context: {
+        task: TTask;
+        column: TableMatrixColumn<TTask>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+}
 interface TableMatrixProps<TTask extends Task = Task> {
     tasks: TTask[];
     allTasks?: TTask[];
@@ -368,10 +382,11 @@ interface TableMatrixProps<TTask extends Task = Task> {
     selectedTaskId?: string | null;
     onTaskSelect?: (taskId: string | null) => void;
     onCellClick?: (context: TableMatrixCellClickContext<TTask>) => void;
+    dateOverlay?: TableMatrixDateOverlay<TTask> | false;
     highlightedTaskIds?: Set<string>;
     filterMode?: 'highlight' | 'hide';
 }
-declare function TableMatrix<TTask extends Task = Task>({ tasks, allTasks, columns, columnGroups, rowHeight, headerHeight, bodyMinHeight, selectedTaskId, onTaskSelect, onCellClick, highlightedTaskIds, filterMode, }: TableMatrixProps<TTask>): react_jsx_runtime.JSX.Element;
+declare function TableMatrix<TTask extends Task = Task>({ tasks, allTasks, columns, columnGroups, rowHeight, headerHeight, bodyMinHeight, selectedTaskId, onTaskSelect, onCellClick, dateOverlay, highlightedTaskIds, filterMode, }: TableMatrixProps<TTask>): react_jsx_runtime.JSX.Element;
 
 /**
  * Task data structure for Gantt chart
@@ -582,6 +597,8 @@ interface TableMatrixModeProps<TTask extends Task = Task> extends TaskChartShare
     matrixColumnGroups?: Array<TableMatrixColumnGroup>;
     /** Called when any data cell in the right-side matrix is clicked. */
     onMatrixCellClick?: (context: TableMatrixCellClickContext<TTask>) => void;
+    /** Optional actual-date overlay rendered under matrix cell content for date-ranged columns. */
+    matrixDateOverlay?: TableMatrixDateOverlay<TTask> | false;
 }
 type GanttChartProps<TTask extends Task = Task, TItem extends ResourceTimelineItem = ResourceTimelineItem> = GanttModeProps<TTask> | TableMatrixModeProps<TTask> | ResourcePlannerChartProps<TItem>;
 interface ExportToPdfOptions {
@@ -1380,4 +1397,4 @@ interface VisibleReorderPosition {
  */
 declare function getVisibleReorderPosition(orderedTasks: TaskLike[], visibleTasks: TaskLike[], movedTaskId: string, originVisibleIndex: number, dropVisibleIndex: number): VisibleReorderPosition | null;
 
-export { type BuiltInTaskListColumnId, Button, type ButtonProps, Calendar, type CalendarProps, type CustomDayConfig, type CustomDayPredicateConfig, DatePicker, type DatePickerProps, DragGuideLines, type ExportToPdfHeaderOptions, type ExportToPdfOptions, GanttChart, type GanttChartHandle, type GanttChartProps, type GanttModeProps, GridBackground, Input, type InputProps, type MonthBlock, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, ResourcePlannerChartProps, ResourceTimelineChart, type ResourceTimelineConflictRange, ResourceTimelineItem, type ResourceTimelineLayoutDiagnostic, type ResourceTimelineLayoutItem, type ResourceTimelineLayoutOptions, type ResourceTimelineLayoutResult, type ResourceTimelineLayoutRow, ResourceTimelineResource, TableMatrix, type TableMatrixCellClickContext, type TableMatrixColumn, type TableMatrixColumnGroup, type TableMatrixModeProps, type Task, TaskDateChangeMode, type TaskDependency, TaskList, type TaskListColumn, type TaskListColumnContext, type TaskListColumnId, type TaskListMenuCommand, type TaskListProps, type TaskPredicate, TaskRow, TimeScaleHeader, TodayIndicator, ValidationResult, type VisibleReorderPosition, type WeekBlock, type WeekSpan, type WithoutDepsOptions, type YearSpan, addBusinessDays, and, calculateBezierPath, calculateDependencyPath, calculateGridLines, calculateGridWidth, calculateMilestoneConnectionBounds, calculateMilestoneGeometry, calculateMonthGridLines, calculateOrthogonalPath, calculateTaskBar, calculateWeekGridLines, calculateWeekendBlocks, clampDateRangeForIncomingFS, createCustomDayPredicate, createDateKey, detectEdgeZone, expired, flattenHierarchy, formatDateLabel, formatDateRangeLabel, getBusinessDaysCount, getCursorForPosition, getDayOffset, getMonthBlocks, getMonthDays, getMonthSpans, getMultiMonthDays, getVisibleReorderPosition, getWeekBlocks, getWeekSpans, getYearSpans, inDateRange, isTaskExpired, isToday, isWeekend, layoutResourceTimelineItems, nameContains, normalizeHierarchyTasks, normalizeTaskDates, not, or, parseUTCDate, pixelsToDate, progressInRange, resolveDateRangeFromPixels, resolveTaskHorizontalGeometry, subtractBusinessDays, useTaskDrag, withoutDeps };
+export { type BuiltInTaskListColumnId, Button, type ButtonProps, Calendar, type CalendarProps, type CustomDayConfig, type CustomDayPredicateConfig, DatePicker, type DatePickerProps, DragGuideLines, type ExportToPdfHeaderOptions, type ExportToPdfOptions, GanttChart, type GanttChartHandle, type GanttChartProps, type GanttModeProps, GridBackground, Input, type InputProps, type MonthBlock, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, ResourcePlannerChartProps, ResourceTimelineChart, type ResourceTimelineConflictRange, ResourceTimelineItem, type ResourceTimelineLayoutDiagnostic, type ResourceTimelineLayoutItem, type ResourceTimelineLayoutOptions, type ResourceTimelineLayoutResult, type ResourceTimelineLayoutRow, ResourceTimelineResource, TableMatrix, type TableMatrixCellClickContext, type TableMatrixColumn, type TableMatrixColumnGroup, type TableMatrixDateOverlay, type TableMatrixModeProps, type Task, TaskDateChangeMode, type TaskDependency, TaskList, type TaskListColumn, type TaskListColumnContext, type TaskListColumnId, type TaskListMenuCommand, type TaskListProps, type TaskPredicate, TaskRow, TimeScaleHeader, TodayIndicator, ValidationResult, type VisibleReorderPosition, type WeekBlock, type WeekSpan, type WithoutDepsOptions, type YearSpan, addBusinessDays, and, calculateBezierPath, calculateDependencyPath, calculateGridLines, calculateGridWidth, calculateMilestoneConnectionBounds, calculateMilestoneGeometry, calculateMonthGridLines, calculateOrthogonalPath, calculateTaskBar, calculateWeekGridLines, calculateWeekendBlocks, clampDateRangeForIncomingFS, createCustomDayPredicate, createDateKey, detectEdgeZone, expired, flattenHierarchy, formatDateLabel, formatDateRangeLabel, getBusinessDaysCount, getCursorForPosition, getDayOffset, getMonthBlocks, getMonthDays, getMonthSpans, getMultiMonthDays, getVisibleReorderPosition, getWeekBlocks, getWeekSpans, getYearSpans, inDateRange, isTaskExpired, isToday, isWeekend, layoutResourceTimelineItems, nameContains, normalizeHierarchyTasks, normalizeTaskDates, not, or, parseUTCDate, pixelsToDate, progressInRange, resolveDateRangeFromPixels, resolveTaskHorizontalGeometry, subtractBusinessDays, useTaskDrag, withoutDeps };

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
   };
 }
@@ -9398,6 +9398,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 +9411,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 +9456,7 @@ function TableMatrix({
   selectedTaskId,
   onTaskSelect,
   onCellClick,
+  dateOverlay,
   highlightedTaskIds,
   filterMode = "highlight"
 }) {
@@ -9474,6 +9510,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 +9524,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 +9612,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 +9631,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 +9698,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 +9715,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}`
                 );
@@ -10075,6 +10156,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);
@@ -10757,6 +10839,7 @@ function TaskGanttChartInner(props, ref) {
                         selectedTaskId,
                         onTaskSelect: handleTaskSelect,
                         onCellClick: onMatrixCellClick,
+                        dateOverlay: matrixDateOverlay,
                         highlightedTaskIds: taskListHighlightedTaskIds,
                         filterMode
                       }