feat: Add extra columns support with configurable column widths and date formats

README.md

@@ -144,6 +144,106 @@ 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, DateFormat } 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"
+  dateFormat="iso8601"
+/>
+```
+
+### 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")     |
+
+### Date Format Configuration
+
+You can choose how dates are displayed in the From and To columns:
+
+```javascript
+import { Gantt, DateFormat } from 'gantt-task-react';
+
+<Gantt
+  tasks={tasks}
+  dateFormat="iso8601"  // Options: "locale" or "iso8601"
+/>
+```
+
+| Parameter Name | Type       | Description                                                          |
+| :------------- | :--------- | :------------------------------------------------------------------- |
+| dateFormat     | DateFormat | Date display format. "locale" uses locale formatting (e.g., "Fri, June 15, 2025"), "iso8601" uses ISO 8601 format (YYYY-MM-DD) |
+
+**DateFormat Options:**
+- `"locale"` (default): Displays dates in locale-specific format (e.g., "Fri, June 15, 2025")
+- `"iso8601"`: Displays dates in ISO 8601 format (e.g., "2025-06-15")
+
+\*Required
+
 ## License
 
 [MIT](https://oss.ninja/mit/jaredpalmer/)

example/src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Task, ViewMode, Gantt } from "gantt-task-react";
 import { ViewSwitcher } from "./components/view-switcher";
 import { getStartEndDateForProject, initTasks } from "./helper";
+import ExtraColumnsApp from "./ExtraColumnsApp";
 import "gantt-task-react/dist/index.css";
 
 // Init
@@ -103,6 +104,7 @@ const App = () => {
         ganttHeight={300}
         columnWidth={columnWidth}
       />
+      <ExtraColumnsApp />
     </div>
   );
 };

example/src/ExtraColumnsApp.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { ViewMode, Gantt, DateFormat } from "gantt-task-react";
+import { ViewSwitcher } from "./components/view-switcher";
+import { initTasksWithExtraColumns, extraColumns } from "./extra-columns-helper";
+import "gantt-task-react/dist/index.css";
+
+//Init
+const ExtraColumnsApp: React.FC = () => {
+  const [tasks, setTasks] = useState(initTasksWithExtraColumns());
+  const [view, setView] = useState<ViewMode>(ViewMode.Day);
+  const [dateFormat, setDateFormat] = useState<DateFormat>("locale");
+
+  let columnWidth = 65;
+  if (view === ViewMode.Year) {
+    columnWidth = 350;
+  } else if (view === ViewMode.Month) {
+    columnWidth = 300;
+  } else if (view === ViewMode.Week) {
+    columnWidth = 250;
+  }
+
+  return (
+    <div className="Wrapper">
+      <h2>Gantt Chart with Extra Columns Example</h2>
+      <p>This example demonstrates how to add custom columns to the Gantt chart task list.</p>
+
+      <div style={{ display: "flex", gap: "20px", alignItems: "center", marginBottom: "10px" }}>
+        <ViewSwitcher
+          onViewModeChange={(viewMode) => setView(viewMode)}
+          onViewListChange={() => {}}
+          isChecked={true}
+        />
+
+        <div>
+          <label style={{ marginRight: "10px" }}>Date Format:</label>
+          <select
+            value={dateFormat}
+            onChange={(e) => setDateFormat(e.target.value as DateFormat)}
+            style={{ padding: "5px", borderRadius: "4px", border: "1px solid #ccc" }}
+          >
+            <option value="locale">Locale Format (e.g., Fri, June 15, 2025)</option>
+            <option value="iso8601">ISO 8601 Format (YYYY-MM-DD)</option>
+          </select>
+        </div>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        <Gantt
+          tasks={tasks}
+          viewMode={view}
+          extraColumns={extraColumns}
+          nameColumnWidth="180px"
+          fromColumnWidth="120px"
+          toColumnWidth="120px"
+          dateFormat={dateFormat}
+          onDateChange={(task, _children) => {
+            console.log("On date change Id:" + task.id);
+            setTasks(tasks);
+          }}
+          onDelete={(task) => {
+            const conf = window.confirm("Are you sure about " + task.name + " ?");
+            if (conf) {
+              setTasks(tasks.filter((t) => t.id !== task.id));
+            }
+            return conf;
+          }}
+          onProgressChange={(task, _children) => {
+            console.log("On progress change Id:" + task.id);
+            setTasks(tasks);
+          }}
+          onDoubleClick={(task) => {
+            console.log("On Double Click event Id:" + task.id);
+          }}
+          onClick={(task) => {
+            console.log("On Click event Id:" + task.id);
+          }}
+          columnWidth={columnWidth}
+          listCellWidth="180px"
+        />
+      </div>
+
+      <div style={{ marginTop: "20px", padding: "15px", backgroundColor: "#f8f9fa", borderRadius: "5px" }}>
+        <h3>Features Demonstrated:</h3>
+        <ul>
+          <li><strong>Status Column:</strong> Shows task status with colored badges</li>
+          <li><strong>Assignee Column:</strong> Displays who is responsible for each task</li>
+          <li><strong>Priority Column:</strong> Shows task priority with colored indicators</li>
+          <li><strong>Budget Column:</strong> Displays formatted budget amounts</li>
+          <li><strong>Custom Column Widths:</strong> Name, From, and To columns have custom widths</li>
+          <li><strong>Date Format Options:</strong> Toggle between locale and ISO (YYYY-MM-DD) date formats</li>
+        </ul>
+
+        <h4>How to Use:</h4>
+        <ol>
+          <li>Define your extra columns configuration with <code>ExtraColumn[]</code></li>
+          <li>Add <code>extraColumns</code> data to your task objects</li>
+          <li>Pass the columns configuration to the <code>Gantt</code> component</li>
+          <li>Optionally use custom render functions for complex column content</li>
+          <li>Set custom widths using <code>nameColumnWidth</code>, <code>fromColumnWidth</code>, <code>toColumnWidth</code></li>
+          <li>Choose date format with <code>dateFormat</code> prop: "locale" or "iso"</li>
+        </ol>
+      </div>
+    </div>
+  );
+};
+
+export default ExtraColumnsApp;