feat: custom column configuration for tasks

junedchhipa · junedchhipa · commit 80197bffe596 · 2025-11-04T14:50:26.000+05:30
diff --git a/README.md b/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.
diff --git a/demo/basic-gantt-large-range.html b/demo/basic-gantt-large-range.html
@@ -8,7 +8,7 @@
     <script src="../apexgantt.min.js"></script>
   </head>
   <body>
-    <div id="svg-gantt" style="margin: 0 auto; width: 90%; height: 600px"></div>
+    <div id="svg-gantt" style="margin: 0 auto"></div>
     <script>
       const ganttOptions = {
         series: [
diff --git a/demo/basic-gantt.html b/demo/basic-gantt.html
@@ -8,7 +8,7 @@
     <script src="../apexgantt.min.js"></script>
   </head>
   <body>
-    <div id="svg-gantt" style="margin: 0 auto; width: 90%; height: 600px"></div>
+    <div id="svg-gantt" style="margin: 0 auto"></div>
     <script>
       const ganttOptions = {
         enableTaskDrag: false,
diff --git a/demo/data-parsing.html b/demo/data-parsing.html
@@ -8,7 +8,7 @@
     <script src="../apexgantt.min.js"></script>
   </head>
   <body>
-    <div id="svg-gantt" style="margin: 0 auto; width: 90%; height: 600px"></div>
+    <div id="svg-gantt" style="margin: 0 auto"></div>
     <script>
       const nestedData = [
         {
diff --git a/demo/gantt-with-annotations.html b/demo/gantt-with-annotations.html
@@ -8,7 +8,7 @@
     <script src="../apexgantt.min.js"></script>
   </head>
   <body>
-    <div id="svg-gantt" style="margin: 0 auto; width: 90%; height: 600px"></div>
+    <div id="svg-gantt" style="margin: 0 auto"></div>
     <script>
       const ganttOptions = {
         series: [
diff --git a/demo/gantt-with-interactions.html b/demo/gantt-with-interactions.html
@@ -8,9 +8,10 @@
     <script src="../apexgantt.min.js"></script>
   </head>
   <body>
-    <div id="svg-gantt" style="margin: 0 auto; width: 90%; height: 600px"></div>
+    <div id="svg-gantt" style="margin: 0 auto"></div>
     <script>
       const ganttOptions = {
+        width: '90%',
         enableTooltip: false,
         enableTaskDrag: true,
         enableTaskEdit: true,
diff --git a/lib/gantt.d.ts b/lib/gantt.d.ts
@@ -14,6 +14,9 @@ export declare class ApexGantt extends BaseChart {
     private scrollbarResizeObserver;
     private splitBarResizeHandler;
     private stateManager;
+    private containerResizeObserver;
+    private lastKnownWidth;
+    private resizeDebounceTimer;
     constructor(element: HTMLElement, options?: GanttUserOptions);
     static setLicense(key: string): void;
     private setupShadowDOMEnvironment;
@@ -30,6 +33,7 @@ export declare class ApexGantt extends BaseChart {
     private isColorDark;
     private initializeTooltip;
     render(data?: any): any;
+    private performAfterActions;
     /**
      * Setup proper positioning for chart container to support dialogs
      */
@@ -77,6 +81,12 @@ export declare class ApexGantt extends BaseChart {
      * Normalize dimension value to CSS string
      */
     private normalizeDimension;
+    /**
+     * resize observer for container to handle responsive width changes
+     */
+    private setupContainerResizeObserver;
+    private handleContainerResize;
+    private performResize;
     destroy(): void;
     isDestroyed(): boolean;
 }
diff --git a/lib/models/Options.d.ts b/lib/models/Options.d.ts
@@ -2,6 +2,7 @@ import { ParsingConfig } from '../models/DataParser';
 import { ThemeMode } from './Theme';
 import { Task, TaskInput } from './Tasks';
 import { Annotation, Orientation } from './Annotation';
+import { ColumnListItem } from '../util/task.util';
 import { ViewMode } from '../util/gantt.util';
 
 export interface AnnotationOptions {
@@ -28,6 +29,9 @@ export interface CommonOptions {
     readonly viewMode: ViewMode;
     readonly width: number | string;
 }
+export interface ColumnOptions {
+    readonly columnConfig?: ColumnListItem[];
+}
 export interface FontOptions {
     readonly fontColor: string;
     readonly fontFamily: string;
@@ -61,7 +65,7 @@ export interface TooltipOptions {
     readonly tooltipId: string;
     readonly tooltipTemplate?: (task: Task, dateFormat: string) => string;
 }
-export type GanttOptionsInternal = AnnotationOptions & BorderOptions & CommonOptions & FontOptions & GanttBarOptions & GanttData & GanttRowOptions & InteractiveOptions & TooltipOptions;
+export type GanttOptionsInternal = AnnotationOptions & BorderOptions & CommonOptions & ColumnOptions & FontOptions & GanttBarOptions & GanttData & GanttRowOptions & InteractiveOptions & TooltipOptions;
 export interface GanttUserOptions {
     readonly theme?: ThemeMode;
     readonly annotationBgColor?: string;
@@ -80,6 +84,7 @@ export interface GanttUserOptions {
     readonly canvasStyle?: string;
     readonly cellBorderColor?: string;
     readonly cellBorderWidth?: string;
+    readonly columnConfig?: ColumnListItem[];
     readonly enableExport?: boolean;
     readonly enableResize?: boolean;
     readonly enableTaskDrag?: boolean;
diff --git a/lib/models/Tasks.d.ts b/lib/models/Tasks.d.ts
@@ -31,7 +31,16 @@ export declare class Tasks {
     options: GanttOptions;
     chartContext: ChartContext;
     dataManager: DataManager;
+    private effectiveColumnList;
     constructor(options: GanttOptions, chartContext: ChartContext, dataManager: DataManager);
+    /**
+     * Merges user column config with defaults
+     */
+    private mergeColumnConfig;
+    /**
+     * Dynamic CSS for column widths based on configuration
+     */
+    private injectDynamicColumnStyles;
     generateBody(tasks: Task[], reRender: () => void): HTMLElement;
     generateHeader(headerList: string[]): HTMLElement;
     generateRow(task: Task, reRender: () => void): HTMLElement;
diff --git a/lib/styles/Tasks.style.d.ts b/lib/styles/Tasks.style.d.ts
@@ -1 +1 @@
-export declare const TableStyle = "\n  .tasks-container {\n    height: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    overflow-x: visible;\n    overflow-y: visible;\n  }\n\n  .tasks-header {\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--header-bg-color, #F3F3F3);\n    overflow: hidden;\n  }\n\n  .tasks-header-row {\n    display: flex;\n    width: 100%;\n  }\n\n  .tasks-header-cell {\n    padding: 0 10px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: flex;\n    align-items: center;\n    border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    color: var(--text-color, #000);\n    box-sizing: border-box;\n    flex-shrink: 0;\n    font-weight: 600;\n  }\n\n  .tasks-body-wrapper {\n    flex: 1;\n    overflow: visible;\n    position: relative;\n  }\n\n  .tasks-data-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .tasks-data-row {\n    display: flex;\n    width: 100%;\n    border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    box-sizing: border-box;\n  }\n\n  .tasks-data-cell {\n    padding: 0 10px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: flex;\n    align-items: center;\n    border-left: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    color: var(--text-color, #000);\n    box-sizing: border-box;\n    flex-shrink: 0;\n  }\n\n  .tasks-data-row .tasks-data-cell:first-child {\n    border-left: none;\n  }\n\n  .tasks-data-row .tasks-data-cell:last-child {\n    border-right: none;\n  }\n\n  .tasks-data-row .task-toggle-icon,\n  .tasks-data-row .task-toggle-icon-blank {\n    display: inline-block;\n    margin-right: 5px;\n    width: 10px;\n    height: 10px;\n    vertical-align: middle;\n    flex-shrink: 0;\n  }\n\n  .tasks-data-row .task-toggle-icon {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* Chevron (expanded) - pointing down */\n  .tasks-data-row .task-toggle-icon.expanded::before {\n    content: '';\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    border-right: 2px solid var(--text-color, #000000);\n    border-bottom: 2px solid var(--text-color, #000000);\n    transform: rotate(45deg);\n    top: 0;\n    left: 2px;\n  }\n\n  /* Chevron - pointing right (collapsed) */\n  .tasks-data-row .task-toggle-icon.collapsed::before {\n    content: '';\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    border-right: 2px solid var(--text-color, #000000);\n    border-bottom: 2px solid var(--text-color, #000000);\n    transform: rotate(-45deg);\n    top: 2px;\n    left: 0;\n  }\n\n  .tasks-data-row .task-toggle-icon:hover::before {\n    opacity: 0.7;\n  }\n\n  /* Shadow DOM specific */\n  :host .tasks-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  :host .tasks-header {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n  }\n";
+export declare const TableStyle = "\n  .tasks-container {\n    height: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    overflow-x: visible;\n    overflow-y: visible;\n  }\n\n  .tasks-header {\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--header-bg-color, #F3F3F3);\n    overflow: hidden;\n  }\n\n  .tasks-header-row {\n    display: grid;\n    width: 100%;\n  }\n\n  .tasks-header-cell {\n    padding: 0 10px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: flex;\n    align-items: center;\n    border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    color: var(--text-color, #000);\n    box-sizing: border-box;\n    font-weight: 600;\n  }\n\n  .tasks-body-wrapper {\n    flex: 1;\n    overflow: visible;\n    position: relative;\n  }\n\n  .tasks-data-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .tasks-data-row {\n    display: grid;\n    width: 100%;\n    border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    box-sizing: border-box;\n  }\n\n  .tasks-data-cell {\n    padding: 0 10px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: flex;\n    align-items: center;\n    border-left: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    color: var(--text-color, #000);\n    box-sizing: border-box;\n  }\n\n  .tasks-data-row .tasks-data-cell:first-child {\n    border-left: none;\n  }\n\n  .tasks-data-row .tasks-data-cell:last-child {\n    border-right: none;\n  }\n\n  .tasks-data-row .task-toggle-icon,\n  .tasks-data-row .task-toggle-icon-blank {\n    display: inline-block;\n    margin-right: 5px;\n    width: 10px;\n    height: 10px;\n    vertical-align: middle;\n    flex-shrink: 0;\n  }\n\n  .tasks-data-row .task-toggle-icon {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* Chevron (expanded) - pointing down */\n  .tasks-data-row .task-toggle-icon.expanded::before {\n    content: '';\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    border-right: 2px solid var(--text-color, #000000);\n    border-bottom: 2px solid var(--text-color, #000000);\n    transform: rotate(45deg);\n    top: 0;\n    left: 2px;\n  }\n\n  /* Chevron - pointing right (collapsed) */\n  .tasks-data-row .task-toggle-icon.collapsed::before {\n    content: '';\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    border-right: 2px solid var(--text-color, #000000);\n    border-bottom: 2px solid var(--text-color, #000000);\n    transform: rotate(-45deg);\n    top: 2px;\n    left: 0;\n  }\n\n  .tasks-data-row .task-toggle-icon:hover::before {\n    opacity: 0.7;\n  }\n\n  /* Shadow DOM specific */\n  :host .tasks-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  :host .tasks-header {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n  }\n";
diff --git a/lib/util/gantt-export.d.ts b/lib/util/gantt-export.d.ts
@@ -0,0 +1 @@
+export declare const exportGantt: (element: HTMLElement) => Promise<void>;
diff --git a/lib/util/task.util.d.ts b/lib/util/task.util.d.ts
@@ -21,9 +21,15 @@ export declare const ColumnKeyTitleMap: {
 export interface ColumnListItem {
     readonly key: ColumnKey;
     readonly title: string;
-    readonly width?: string;
+    readonly minWidth?: string;
+    readonly flexGrow?: number;
 }
 export declare const ColumnList: ColumnListItem[];
+/**
+ * generates grid-template-columns string based on column configuration
+ * @returns CSS grid-template-columns value
+ */
+export declare function generateGridTemplateColumns(columns: ColumnListItem[]): string;
 export declare function getTaskTextByColumn(task: Task, columnKey: ColumnKey, inputDateFormat: string): string;
 export declare function getTaskRowElement(context: ChartContext, taskId: string): HTMLElement | null;
 export declare function getRowBackgroundColor(index: number, rowBackgroundColors: readonly string[]): string;

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`<script src="../apexgantt.min.js"></script>`
`9`	`9`	`</head>`
`10`	`10`	`<body>`
`11`		`- <div id="svg-gantt" style="margin: 0 auto; width: 90%; height: 600px"></div>`
	`11`	`+ <div id="svg-gantt" style="margin: 0 auto"></div>`
`12`	`12`	`<script>`
`13`	`13`	`const nestedData = [`
`14`	`14`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-export declare const TableStyle = "\n .tasks-container {\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow-x: visible;\n overflow-y: visible;\n }\n\n .tasks-header {\n flex-shrink: 0;\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--header-bg-color, #F3F3F3);\n overflow: hidden;\n }\n\n .tasks-header-row {\n display: flex;\n width: 100%;\n }\n\n .tasks-header-cell {\n padding: 0 10px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n color: var(--text-color, #000);\n box-sizing: border-box;\n flex-shrink: 0;\n font-weight: 600;\n }\n\n .tasks-body-wrapper {\n flex: 1;\n overflow: visible;\n position: relative;\n }\n\n .tasks-data-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .tasks-data-row {\n display: flex;\n width: 100%;\n border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n box-sizing: border-box;\n }\n\n .tasks-data-cell {\n padding: 0 10px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n border-left: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n color: var(--text-color, #000);\n box-sizing: border-box;\n flex-shrink: 0;\n }\n\n .tasks-data-row .tasks-data-cell:first-child {\n border-left: none;\n }\n\n .tasks-data-row .tasks-data-cell:last-child {\n border-right: none;\n }\n\n .tasks-data-row .task-toggle-icon,\n .tasks-data-row .task-toggle-icon-blank {\n display: inline-block;\n margin-right: 5px;\n width: 10px;\n height: 10px;\n vertical-align: middle;\n flex-shrink: 0;\n }\n\n .tasks-data-row .task-toggle-icon {\n cursor: pointer;\n position: relative;\n }\n\n /* Chevron (expanded) - pointing down /\n .tasks-data-row .task-toggle-icon.expanded::before {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n border-right: 2px solid var(--text-color, #000000);\n border-bottom: 2px solid var(--text-color, #000000);\n transform: rotate(45deg);\n top: 0;\n left: 2px;\n }\n\n / Chevron - pointing right (collapsed) /\n .tasks-data-row .task-toggle-icon.collapsed::before {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n border-right: 2px solid var(--text-color, #000000);\n border-bottom: 2px solid var(--text-color, #000000);\n transform: rotate(-45deg);\n top: 2px;\n left: 0;\n }\n\n .tasks-data-row .task-toggle-icon:hover::before {\n opacity: 0.7;\n }\n\n / Shadow DOM specific */\n :host .tasks-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n :host .tasks-header {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n";
	`1`	+export declare const TableStyle = "\n .tasks-container {\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow-x: visible;\n overflow-y: visible;\n }\n\n .tasks-header {\n flex-shrink: 0;\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--header-bg-color, #F3F3F3);\n overflow: hidden;\n }\n\n .tasks-header-row {\n display: grid;\n width: 100%;\n }\n\n .tasks-header-cell {\n padding: 0 10px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n color: var(--text-color, #000);\n box-sizing: border-box;\n font-weight: 600;\n }\n\n .tasks-body-wrapper {\n flex: 1;\n overflow: visible;\n position: relative;\n }\n\n .tasks-data-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .tasks-data-row {\n display: grid;\n width: 100%;\n border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n box-sizing: border-box;\n }\n\n .tasks-data-cell {\n padding: 0 10px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n border-left: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n color: var(--text-color, #000);\n box-sizing: border-box;\n }\n\n .tasks-data-row .tasks-data-cell:first-child {\n border-left: none;\n }\n\n .tasks-data-row .tasks-data-cell:last-child {\n border-right: none;\n }\n\n .tasks-data-row .task-toggle-icon,\n .tasks-data-row .task-toggle-icon-blank {\n display: inline-block;\n margin-right: 5px;\n width: 10px;\n height: 10px;\n vertical-align: middle;\n flex-shrink: 0;\n }\n\n .tasks-data-row .task-toggle-icon {\n cursor: pointer;\n position: relative;\n }\n\n /* Chevron (expanded) - pointing down /\n .tasks-data-row .task-toggle-icon.expanded::before {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n border-right: 2px solid var(--text-color, #000000);\n border-bottom: 2px solid var(--text-color, #000000);\n transform: rotate(45deg);\n top: 0;\n left: 2px;\n }\n\n / Chevron - pointing right (collapsed) /\n .tasks-data-row .task-toggle-icon.collapsed::before {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n border-right: 2px solid var(--text-color, #000000);\n border-bottom: 2px solid var(--text-color, #000000);\n transform: rotate(-45deg);\n top: 2px;\n left: 0;\n }\n\n .tasks-data-row .task-toggle-icon:hover::before {\n opacity: 0.7;\n }\n\n / Shadow DOM specific */\n :host .tasks-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n :host .tasks-header {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n";