feat: add support for customizable column widths and extra columns in Gantt chart

Author: scharinger

README.md

@@ -144,6 +144,84 @@ npm start
 
 \*Required
 
+## Extra Columns Support
+
+You can add custom columns to the task list by using the `extraColumns` prop:
+
+```javascript
+import { Gantt, Task, ExtraColumn } from 'gantt-task-react';
+
+// Define extra columns
+const extraColumns: ExtraColumn[] = [
+  {
+    key: "status",
+    title: "Status",
+    width: "100px",
+  },
+  {
+    key: "assignee", 
+    title: "Assignee",
+    width: "120px",
+  },
+  {
+    key: "priority",
+    title: "Priority", 
+    width: "80px",
+    render: (task) => (
+      <span className={`priority-${task.extraColumns?.priority}`}>
+        {task.extraColumns?.priority}
+      </span>
+    ),
+  },
+];
+
+// Add extra data to your tasks
+const tasks: Task[] = [
+  {
+    id: "1",
+    name: "Task 1",
+    start: new Date(),
+    end: new Date(),
+    progress: 50,
+    type: "task",
+    extraColumns: {
+      status: "In Progress",
+      assignee: "John Doe", 
+      priority: "High",
+    },
+  },
+];
+
+<Gantt 
+  tasks={tasks} 
+  extraColumns={extraColumns}
+  nameColumnWidth="200px"
+  fromColumnWidth="130px"
+  toColumnWidth="130px"
+/>
+```
+
+### ExtraColumn Interface
+
+| Parameter Name | Type                                    | Description                                                              |
+| :------------- | :-------------------------------------- | :----------------------------------------------------------------------- |
+| key\*          | string                                  | Unique key for the column, used to access data in task.extraColumns     |
+| title\*        | string                                  | Column header title                                                      |
+| width          | string                                  | Column width (e.g., "100px", "120px"). Defaults to listCellWidth        |
+| render         | `(task: Task) => React.ReactNode`       | Optional custom render function for complex column content               |
+
+### Column Width Configuration
+
+You can customize the width of the default columns:
+
+| Parameter Name    | Type   | Description                                      |
+| :---------------- | :----- | :----------------------------------------------- |
+| nameColumnWidth   | string | Width of the Name column (e.g., "200px")        |
+| fromColumnWidth   | string | Width of the From/Start date column (e.g., "130px") |
+| toColumnWidth     | string | Width of the To/End date column (e.g., "130px")     |
+
+\*Required
+
 ## License
 
 [MIT](https://oss.ninja/mit/jaredpalmer/)

example/src/ExtraColumnsApp.tsx

@@ -33,6 +33,9 @@ const ExtraColumnsApp: React.FC = () => {
           tasks={tasks}
           viewMode={view}
           extraColumns={extraColumns}
+          nameColumnWidth="180px"
+          fromColumnWidth="120px"
+          toColumnWidth="120px"
           onDateChange={(task, _children) => {
             console.log("On date change Id:" + task.id);
             setTasks(tasks);

src/components/gantt/gantt.tsx

@@ -59,6 +59,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   TaskListHeader = TaskListHeaderDefault,
   TaskListTable = TaskListTableDefault,
   extraColumns,
+  nameColumnWidth,
+  fromColumnWidth,
+  toColumnWidth,
   onDateChange,
   onProgressChange,
   onDoubleClick,
@@ -448,6 +451,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     setSelectedTask: handleSelectedTask,
     onExpanderClick: handleExpanderClick,
     extraColumns,
+    nameColumnWidth,
+    fromColumnWidth,
+    toColumnWidth,
     TaskListHeader,
     TaskListTable,
   };

src/components/task-list/task-list-header.tsx

@@ -8,7 +8,19 @@ export const TaskListHeaderDefault: React.FC<{
   fontFamily: string;
   fontSize: string;
   extraColumns?: ExtraColumn[];
-}> = ({ headerHeight, fontFamily, fontSize, rowWidth, extraColumns = [] }) => {
+  nameColumnWidth?: string;
+  fromColumnWidth?: string;
+  toColumnWidth?: string;
+}> = ({ 
+  headerHeight, 
+  fontFamily, 
+  fontSize, 
+  rowWidth, 
+  extraColumns = [],
+  nameColumnWidth,
+  fromColumnWidth,
+  toColumnWidth
+}) => {
   return (
     <div
       className={styles.ganttTable}
@@ -26,7 +38,7 @@ export const TaskListHeaderDefault: React.FC<{
         <div
           className={styles.ganttTable_HeaderItem}
           style={{
-            minWidth: rowWidth,
+            minWidth: nameColumnWidth || rowWidth,
           }}
         >
           &nbsp;Name
@@ -41,7 +53,7 @@ export const TaskListHeaderDefault: React.FC<{
         <div
           className={styles.ganttTable_HeaderItem}
           style={{
-            minWidth: rowWidth,
+            minWidth: fromColumnWidth || rowWidth,
           }}
         >
           &nbsp;From
@@ -56,7 +68,7 @@ export const TaskListHeaderDefault: React.FC<{
         <div
           className={styles.ganttTable_HeaderItem}
           style={{
-            minWidth: rowWidth,
+            minWidth: toColumnWidth || rowWidth,
           }}
         >
           &nbsp;To

src/components/task-list/task-list-table.tsx

@@ -32,6 +32,9 @@ export const TaskListTableDefault: React.FC<{
   setSelectedTask: (taskId: string) => void;
   onExpanderClick: (task: Task) => void;
   extraColumns?: ExtraColumn[];
+  nameColumnWidth?: string;
+  fromColumnWidth?: string;
+  toColumnWidth?: string;
 }> = ({
   rowHeight,
   rowWidth,
@@ -41,6 +44,9 @@ export const TaskListTableDefault: React.FC<{
   locale,
   onExpanderClick,
   extraColumns = [],
+  nameColumnWidth,
+  fromColumnWidth,
+  toColumnWidth,
 }) => {
   const toLocaleDateString = useMemo(
     () => toLocaleDateStringFactory(locale),
@@ -72,8 +78,8 @@ export const TaskListTableDefault: React.FC<{
             <div
               className={styles.taskListCell}
               style={{
-                minWidth: rowWidth,
-                maxWidth: rowWidth,
+                minWidth: nameColumnWidth || rowWidth,
+                maxWidth: nameColumnWidth || rowWidth,
               }}
               title={t.name}
             >
@@ -94,17 +100,17 @@ export const TaskListTableDefault: React.FC<{
             <div
               className={styles.taskListCell}
               style={{
-                minWidth: rowWidth,
-                maxWidth: rowWidth,
+                minWidth: fromColumnWidth || rowWidth,
+                maxWidth: fromColumnWidth || rowWidth,
               }}
             >
               &nbsp;{toLocaleDateString(t.start, dateTimeOptions)}
             </div>
             <div
               className={styles.taskListCell}
               style={{
-                minWidth: rowWidth,
-                maxWidth: rowWidth,
+                minWidth: toColumnWidth || rowWidth,
+                maxWidth: toColumnWidth || rowWidth,
               }}
             >
               &nbsp;{toLocaleDateString(t.end, dateTimeOptions)}

src/components/task-list/task-list.tsx

@@ -18,12 +18,18 @@ export type TaskListProps = {
   setSelectedTask: (task: string) => void;
   onExpanderClick: (task: Task) => void;
   extraColumns?: ExtraColumn[];
+  nameColumnWidth?: string;
+  fromColumnWidth?: string;
+  toColumnWidth?: string;
   TaskListHeader: React.FC<{
     headerHeight: number;
     rowWidth: string;
     fontFamily: string;
     fontSize: string;
     extraColumns?: ExtraColumn[];
+    nameColumnWidth?: string;
+    fromColumnWidth?: string;
+    toColumnWidth?: string;
   }>;
   TaskListTable: React.FC<{
     rowHeight: number;
@@ -36,6 +42,9 @@ export type TaskListProps = {
     setSelectedTask: (taskId: string) => void;
     onExpanderClick: (task: Task) => void;
     extraColumns?: ExtraColumn[];
+    nameColumnWidth?: string;
+    fromColumnWidth?: string;
+    toColumnWidth?: string;
   }>;
 };
 
@@ -55,6 +64,9 @@ export const TaskList: React.FC<TaskListProps> = ({
   taskListRef,
   horizontalContainerClass,
   extraColumns,
+  nameColumnWidth,
+  fromColumnWidth,
+  toColumnWidth,
   TaskListHeader,
   TaskListTable,
 }) => {
@@ -71,6 +83,9 @@ export const TaskList: React.FC<TaskListProps> = ({
     fontSize,
     rowWidth,
     extraColumns,
+    nameColumnWidth,
+    fromColumnWidth,
+    toColumnWidth,
   };
   const selectedTaskId = selectedTask ? selectedTask.id : "";
   const tableProps = {
@@ -84,6 +99,9 @@ export const TaskList: React.FC<TaskListProps> = ({
     setSelectedTask,
     onExpanderClick,
     extraColumns,
+    nameColumnWidth,
+    fromColumnWidth,
+    toColumnWidth,
   };
 
   return (

src/types/public-types.ts

@@ -136,6 +136,9 @@ export interface StylingOption {
     fontFamily: string;
     fontSize: string;
     extraColumns?: ExtraColumn[];
+    nameColumnWidth?: string;
+    fromColumnWidth?: string;
+    toColumnWidth?: string;
   }>;
   TaskListTable?: React.FC<{
     rowHeight: number;
@@ -151,6 +154,9 @@ export interface StylingOption {
     setSelectedTask: (taskId: string) => void;
     onExpanderClick: (task: Task) => void;
     extraColumns?: ExtraColumn[];
+    nameColumnWidth?: string;
+    fromColumnWidth?: string;
+    toColumnWidth?: string;
   }>;
 }
 
@@ -160,4 +166,16 @@ export interface GanttProps extends EventOption, DisplayOption, StylingOption {
    * Extra columns to display in the task list
    */
   extraColumns?: ExtraColumn[];
+  /**
+   * Width of the Name column
+   */
+  nameColumnWidth?: string;
+  /**
+   * Width of the From column
+   */
+  fromColumnWidth?: string;
+  /**
+   * Width of the To column
+   */
+  toColumnWidth?: string;
 }