apexgantt 3.1.0 → 3.2.0

package/README.md

@@ -67,6 +67,7 @@ The layout can be configured by either setting the properties in the table below
 | barTextColor              | `#FFFFFF`                     | Text color for timeline bar                         |
 | cellBorderColor           | `#eff0f0`                     | Border color for all table cells and timeline cells |
 | cellBorderWidth           | `1px`                         | Border width for all table cells and timeline cells |
+| columnConfig              | `undefined`                   | Custom column widths                                |
 | enableToolbar             | `false`                       | Enable/disable graph toolbar                        |
 | enableResize              | `true`                        | Enable/disable gantt sidebar resize                 |
 | enableExport              | `true`                        | Enable/disable gantt export options                 |
@@ -185,6 +186,44 @@ Each tasks should be in below format
 ];
 ```
 
+## Column Configuration
+
+Customize task table column widths:
+
+```js
+import {ColumnKey} from 'apexgantt';
+
+const gantt = new ApexGantt(element, {
+  series: tasks,
+  columnConfig: [
+    {
+      key: ColumnKey.Name,
+      title: 'Task Name',
+      minWidth: '100px',
+      flexGrow: 3,
+    },
+    {
+      key: ColumnKey.StartTime,
+      title: 'Start',
+      minWidth: '100px',
+      flexGrow: 1.5,
+    },
+    {
+      key: ColumnKey.Duration,
+      title: 'Duration',
+      minWidth: '80px',
+      flexGrow: 1,
+    },
+    {
+      key: ColumnKey.Progress,
+      title: 'Progress',
+      minWidth: '80px',
+      flexGrow: 1,
+    },
+  ],
+});
+```
+
 ## Data Parsing
 
 Map your existing data structure to ApexGantt format without manual transformation.

package/apexgantt.es.min.js

@@ -5965,6 +5965,13 @@ const _Watermark = class _Watermark {
 _Watermark.WATERMARK_CLASS = "apexgantt-watermark";
 _Watermark.WATERMARK_TEXT = "Powered by apexcharts.com";
 let Watermark = _Watermark;
+function getParentElement(element) {
+  const rootNode = element.getRootNode();
+  if (rootNode instanceof ShadowRoot) {
+    return rootNode.host;
+  }
+  return element.parentElement;
+}
 function getCumulativeTransform(element) {
   let scaleX = 1;
   let scaleY = 1;
@@ -5996,7 +6003,7 @@ function getCumulativeTransform(element) {
         console.warn("Failed to parse transform matrix:", transform2, e);
       }
     }
-    currentElement = currentElement.parentElement;
+    currentElement = getParentElement(currentElement);
   }
   return { scaleX, scaleY, translateX, translateY };
 }
@@ -13903,7 +13910,8 @@ const ColumnList = [
       "name"
       /* Name */
     ],
-    width: "160px"
+    minWidth: "120px",
+    flexGrow: 3
   },
   {
     key: "startTime",
@@ -13911,7 +13919,8 @@ const ColumnList = [
       "startTime"
       /* StartTime */
     ],
-    width: "100px"
+    minWidth: "70px",
+    flexGrow: 1.5
   },
   {
     key: "duration",
@@ -13919,7 +13928,8 @@ const ColumnList = [
       "duration"
       /* Duration */
     ],
-    width: "80px"
+    minWidth: "50px",
+    flexGrow: 1
   },
   {
     key: "progress",
@@ -13927,9 +13937,17 @@ const ColumnList = [
       "progress"
       /* Progress */
     ],
-    width: "80px"
+    minWidth: "50px",
+    flexGrow: 1
   }
 ];
+function generateGridTemplateColumns(columns) {
+  return columns.map((col) => {
+    const minWidth = col.minWidth || "30px";
+    const flexGrow = col.flexGrow || 1;
+    return `minmax(${minWidth}, ${flexGrow}fr)`;
+  }).join(" ");
+}
 function getTaskTextByColumn(task, columnKey, inputDateFormat) {
   const taskColumnValue = task[columnKey];
   if (columnKey === "startTime") {
@@ -14057,6 +14075,40 @@ class Tasks {
     this.options = options;
     this.chartContext = chartContext;
     this.dataManager = dataManager;
+    this.effectiveColumnList = this.mergeColumnConfig();
+    this.injectDynamicColumnStyles();
+  }
+  /**
+   * Merges user column config with defaults
+   */
+  mergeColumnConfig() {
+    if (!this.options.columnConfig || this.options.columnConfig.length === 0) {
+      return ColumnList;
+    }
+    return ColumnList.map((defaultCol) => {
+      var _a;
+      const userCol = (_a = this.options.columnConfig) == null ? void 0 : _a.find((col) => col.key === defaultCol.key);
+      return userCol ? { ...defaultCol, ...userCol } : defaultCol;
+    });
+  }
+  /**
+   * Dynamic CSS for column widths based on configuration
+   */
+  injectDynamicColumnStyles() {
+    const gridTemplate = generateGridTemplateColumns(this.effectiveColumnList);
+    const chartInstanceId = this.chartContext.getInstanceId();
+    const dynamicStyles = `
+      .tasks-container .tasks-header[data-chart-instance="${chartInstanceId}"] .tasks-header-row {
+        grid-template-columns: ${gridTemplate};
+      }
+
+      .tasks-container .tasks-data-row[data-chart-instance="${chartInstanceId}"] {
+        grid-template-columns: ${gridTemplate};
+      }
+    `;
+    this.chartContext.injectStyles(dynamicStyles, `tasks-dynamic-columns-${chartInstanceId}`, {
+      priority: "high"
+    });
   }
   generateBody(tasks, reRender) {
     const bodyContainer = createBox(this.chartContext, { className: "tasks-data-container" });
@@ -14069,19 +14121,13 @@ class Tasks {
     const { headerBackground, rowHeight, fontColor } = this.options;
     const chartInstanceId = this.chartContext.getInstanceId();
     headerContainer.setAttribute("data-chart-instance", chartInstanceId);
-    forEach(headerList, (header, index) => {
-      const columnDef = ColumnList[index];
+    forEach(headerList, (header) => {
       const headerCell = createBox(this.chartContext, {
         className: "tasks-header-cell",
         content: header
       });
       headerCell.style.height = `${rowHeight * 2}px`;
       headerCell.style.color = fontColor;
-      if (columnDef == null ? void 0 : columnDef.width) {
-        headerCell.style.width = columnDef.width;
-        headerCell.style.minWidth = columnDef.width;
-        headerCell.style.flexBasis = columnDef.width;
-      }
       headerRow.append(headerCell);
     });
     headerContainer.append(headerRow);
@@ -14095,7 +14141,7 @@ class Tasks {
     row.setAttribute("data-taskid", task.id);
     row.setAttribute("data-chart-instance", chartInstanceId);
     row.style.height = `${rowHeight}px`;
-    forEach(ColumnList, ({ key, width: width2 }) => {
+    forEach(this.effectiveColumnList, ({ key }) => {
       const cell = createBox(this.chartContext, {
         className: "tasks-data-cell",
         content: getTaskTextByColumn(task, key, this.options.inputDateFormat)
@@ -14104,11 +14150,6 @@ class Tasks {
       cell.setAttribute("data-chart-instance", chartInstanceId);
       cell.style.height = `${rowHeight}px`;
       cell.style.color = fontColor;
-      if (width2) {
-        cell.style.width = width2;
-        cell.style.minWidth = width2;
-        cell.style.flexBasis = width2;
-      }
       if (key === ColumnKey.Name) {
         cell.style.paddingLeft = `${task.level * 15}px`;
         cell.style.textAlign = "left";
@@ -14167,7 +14208,7 @@ class Tasks {
     row.setAttribute("data-taskid", `empty-${index}`);
     row.setAttribute("data-chart-instance", chartInstanceId);
     row.style.height = `${rowHeight}px`;
-    forEach(ColumnList, ({ key, width: width2 }) => {
+    forEach(this.effectiveColumnList, ({ key }) => {
       const cell = createBox(this.chartContext, {
         className: "tasks-data-cell",
         content: ""
@@ -14176,17 +14217,12 @@ class Tasks {
       cell.setAttribute("data-chart-instance", chartInstanceId);
       cell.style.height = `${rowHeight}px`;
       cell.style.color = fontColor;
-      if (width2) {
-        cell.style.width = width2;
-        cell.style.minWidth = width2;
-        cell.style.flexBasis = width2;
-      }
       row.append(cell);
     });
     return row;
   }
   render(reRender) {
-    const headerRow = this.generateHeader(ColumnList.map((col) => col.title));
+    const headerRow = this.generateHeader(this.effectiveColumnList.map((col) => col.title));
     const dataRows = this.generateBody(this.dataManager.getFlatVisibleTasks(), reRender);
     return [headerRow, dataRows];
   }
@@ -15293,7 +15329,7 @@ const TableStyle = `
   }
 
   .tasks-header-row {
-    display: flex;
+    display: grid;
     width: 100%;
   }
 
@@ -15308,7 +15344,6 @@ const TableStyle = `
     border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);
     color: var(--text-color, #000);
     box-sizing: border-box;
-    flex-shrink: 0;
     font-weight: 600;
   }
 
@@ -15325,7 +15360,7 @@ const TableStyle = `
   }
 
   .tasks-data-row {
-    display: flex;
+    display: grid;
     width: 100%;
     border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);
     box-sizing: border-box;
@@ -15343,7 +15378,6 @@ const TableStyle = `
     border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);
     color: var(--text-color, #000);
     box-sizing: border-box;
-    flex-shrink: 0;
   }
 
   .tasks-data-row .tasks-data-cell:first-child {
@@ -16240,7 +16274,7 @@ class SplitView {
 
     .split-view-container .split-left-container {
       flex-grow: 0 !important;
-      flex-shrink: 0 !important;
+      flex-shrink: 1 !important;
       overflow: visible;
       display: flex !important;
       flex-direction: column;
@@ -16398,8 +16432,8 @@ class SplitView {
         if (!containerRect)
           return;
         const newWidth = moveEvent.clientX - containerRect.left;
-        const minWidth = 50;
-        const maxWidth = containerRect.width - 100;
+        const minWidth = 0;
+        const maxWidth = containerRect.width - 50;
         const clampedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
         this.leftContainer.style.flexBasis = `${clampedWidth}px`;
         this.dispatchResizeEvent();
@@ -16428,25 +16462,29 @@ class SplitView {
       switch (e.key) {
         case "ArrowLeft":
           e.preventDefault();
-          newWidth = Math.max(50, currentWidth - step);
+          newWidth = Math.max(0, currentWidth - step);
           this.leftContainer.style.flexBasis = `${newWidth}px`;
+          this.dispatchResizeEvent();
           break;
         case "ArrowRight":
           e.preventDefault();
           newWidth = currentWidth + step;
           this.leftContainer.style.flexBasis = `${newWidth}px`;
+          this.dispatchResizeEvent();
           break;
         case "Home":
           e.preventDefault();
-          this.leftContainer.style.flexBasis = "50px";
+          this.leftContainer.style.flexBasis = "0px";
+          this.dispatchResizeEvent();
           break;
         case "End": {
           e.preventDefault();
           const container = this.splitBarContainer.parentElement;
           if (container) {
-            const maxWidth = container.clientWidth - 100;
+            const maxWidth = container.clientWidth - 50;
             this.leftContainer.style.flexBasis = `${maxWidth}px`;
           }
+          this.dispatchResizeEvent();
           break;
         }
       }
@@ -16714,6 +16752,9 @@ class ApexGantt extends BaseChart {
     this.isSyncingScroll = false;
     this.scrollbarResizeObserver = null;
     this.splitBarResizeHandler = null;
+    this.containerResizeObserver = null;
+    this.lastKnownWidth = 0;
+    this.resizeDebounceTimer = null;
     const themeDefaults = getDefaultOptions(options == null ? void 0 : options.theme);
     let processedSeries;
     if (options == null ? void 0 : options.parsing) {
@@ -16951,18 +16992,13 @@ class ApexGantt extends BaseChart {
     const existingDimensions = this.hasExplicitDimensions();
     const normalizedHeight = this.normalizeDimension(height2);
     const normalizedWidth = this.normalizeDimension(width2);
+    this.element.style.width = normalizedWidth;
     if (normalizedHeight === "100%" && existingDimensions.height) {
       const computedHeight = window.getComputedStyle(this.element).height;
       this.element.style.height = computedHeight;
     } else {
       this.element.style.height = normalizedHeight;
     }
-    if (normalizedWidth === "100%" && existingDimensions.width) {
-      const computedWidth = window.getComputedStyle(this.element).width;
-      this.element.style.width = computedWidth;
-    } else {
-      this.element.style.width = normalizedWidth;
-    }
     this.element.style.display = "flex";
     this.element.style.flexDirection = "column";
     this.element.style.boxSizing = "border-box";
@@ -16996,14 +17032,7 @@ class ApexGantt extends BaseChart {
     this.setupDependencyArrowEvents();
     this.renderDependencyArrows();
     requestAnimationFrame(() => {
-      this.syncTasksColumnWidths();
-      this.compensateForScrollbar();
-      this.updateHorizontalScrollbarContent();
-      this.setupTimelineHorizontalScroll();
-      this.positionHorizontalScrollbar();
-      this.setupScrollbarResizeObserver();
-      this.disableHeaderMousewheelScroll();
-      this.fillEmptyRowsAfterRender();
+      this.performAfterActions();
     });
     if (isReRender) {
       requestAnimationFrame(() => {
@@ -17012,6 +17041,18 @@ class ApexGantt extends BaseChart {
     }
     return this.element;
   }
+  performAfterActions() {
+    this.syncTasksColumnWidths();
+    this.compensateForScrollbar();
+    this.updateHorizontalScrollbarContent();
+    this.setupTimelineHorizontalScroll();
+    this.positionHorizontalScrollbar();
+    this.setupContainerResizeObserver();
+    this.setupScrollbarResizeObserver();
+    this.setupRowBackgroundColors();
+    this.disableHeaderMousewheelScroll();
+    this.fillEmptyRowsAfterRender();
+  }
   /**
    * Setup proper positioning for chart container to support dialogs
    */
@@ -17350,15 +17391,7 @@ class ApexGantt extends BaseChart {
       }
     }
     requestAnimationFrame(() => {
-      this.syncTasksColumnWidths();
-      this.compensateForScrollbar();
-      this.updateHorizontalScrollbarContent();
-      this.setupTimelineHorizontalScroll();
-      this.positionHorizontalScrollbar();
-      this.setupScrollbarResizeObserver();
-      this.setupRowBackgroundColors();
-      this.disableHeaderMousewheelScroll();
-      this.fillEmptyRowsAfterRender();
+      this.performAfterActions();
     });
   }
   updateToolbarAfterZoom() {
@@ -17635,7 +17668,7 @@ class ApexGantt extends BaseChart {
     row.setAttribute("data-taskid", `empty-${index}`);
     row.setAttribute("data-chart-instance", chartInstanceId);
     row.style.height = `${rowHeight}px`;
-    ColumnList.forEach(({ key, width: width2 }) => {
+    ColumnList.forEach(({ key }) => {
       const cell = createBox(this.chartContext, {
         className: "tasks-data-cell",
         content: ""
@@ -17644,11 +17677,6 @@ class ApexGantt extends BaseChart {
       cell.setAttribute("data-chart-instance", chartInstanceId);
       cell.style.height = `${rowHeight}px`;
       cell.style.color = fontColor;
-      if (width2) {
-        cell.style.width = width2;
-        cell.style.minWidth = width2;
-        cell.style.flexBasis = width2;
-      }
       row.appendChild(cell);
     });
     return row;
@@ -17756,8 +17784,69 @@ class ApexGantt extends BaseChart {
     }
     return value;
   }
+  /**
+   * resize observer for container to handle responsive width changes
+   */
+  setupContainerResizeObserver() {
+    if (!this.element) {
+      return;
+    }
+    if (this.containerResizeObserver) {
+      this.containerResizeObserver.disconnect();
+    }
+    const normalizedWidth = this.normalizeDimension(this.options.width);
+    const isPercentageWidth = typeof normalizedWidth === "string" && normalizedWidth.includes("%");
+    if (!isPercentageWidth) {
+      return;
+    }
+    this.lastKnownWidth = this.element.offsetWidth;
+    this.containerResizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (Math.abs(newWidth - this.lastKnownWidth) > 1) {
+          this.lastKnownWidth = newWidth;
+          this.handleContainerResize();
+        }
+      }
+    });
+    this.containerResizeObserver.observe(this.element);
+  }
+  handleContainerResize() {
+    if (this.resizeDebounceTimer !== null) {
+      window.clearTimeout(this.resizeDebounceTimer);
+    }
+    this.resizeDebounceTimer = window.setTimeout(() => {
+      this.performResize();
+      this.resizeDebounceTimer = null;
+    }, 150);
+  }
+  performResize() {
+    if (!this.element || this.isDestroyed()) {
+      return;
+    }
+    const normalizedWidth = this.normalizeDimension(this.options.width);
+    if (typeof normalizedWidth === "string" && normalizedWidth.includes("%")) {
+      const computedWidth = window.getComputedStyle(this.element.parentElement || this.element).width;
+      const currentElementWidth = window.getComputedStyle(this.element).width;
+      if (computedWidth !== currentElementWidth) {
+        requestAnimationFrame(() => {
+          this.positionHorizontalScrollbar();
+          this.updateHorizontalScrollbarContent();
+          this.syncTasksColumnWidths();
+        });
+      }
+    }
+  }
   destroy() {
     try {
+      if (this.containerResizeObserver) {
+        this.containerResizeObserver.disconnect();
+        this.containerResizeObserver = null;
+      }
+      if (this.resizeDebounceTimer !== null) {
+        window.clearTimeout(this.resizeDebounceTimer);
+        this.resizeDebounceTimer = null;
+      }
       if (this.zoomHandler) {
         const chartInstanceId = this.getInstanceId();
         const timelineElement = this.chartContext.querySelector(