feat: add extra columns and configurable column widths with ISO 8601 date format

- Add ExtraColumn interface for custom columns with optional render functions
- Add nameColumnWidth, fromColumnWidth, toColumnWidth props for configurable column widths
- Add DateFormat type with 'locale' and 'iso8601' options for date formatting
- Add extraColumns prop to Task interface for storing additional column data
- Update TaskListHeader and TaskListTable components to support extra columns
- Add date format selector in example with ISO 8601 (YYYY-MM-DD) support
- Export new DateFormat type from main index

BREAKING CHANGE: TaskListHeader and TaskListTable component props have been extended with new optional parameters

Author: scharinger

example/src/ExtraColumnsApp.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ViewMode, Gantt } from "gantt-task-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";
@@ -8,6 +8,8 @@ import "gantt-task-react/dist/index.css";
 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;
@@ -22,11 +24,25 @@ const ExtraColumnsApp: React.FC = () => {
       <h2>Gantt Chart with Extra Columns Example</h2>
       <p>This example demonstrates how to add custom columns to the Gantt chart task list.</p>
 
-      <ViewSwitcher
-        onViewModeChange={(viewMode) => setView(viewMode)}
-        onViewListChange={() => {}}
-        isChecked={true}
-      />
+      <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
@@ -36,6 +52,7 @@ const ExtraColumnsApp: React.FC = () => {
           nameColumnWidth="180px"
           fromColumnWidth="120px"
           toColumnWidth="120px"
+          dateFormat={dateFormat}
           onDateChange={(task, _children) => {
             console.log("On date change Id:" + task.id);
             setTasks(tasks);
@@ -69,6 +86,8 @@ const ExtraColumnsApp: React.FC = () => {
           <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>
@@ -77,6 +96,8 @@ const ExtraColumnsApp: React.FC = () => {
           <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>

src/components/gantt/gantt.tsx

@@ -62,6 +62,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   nameColumnWidth,
   fromColumnWidth,
   toColumnWidth,
+  dateFormat = "locale",
   onDateChange,
   onProgressChange,
   onDoubleClick,
@@ -454,6 +455,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     nameColumnWidth,
     fromColumnWidth,
     toColumnWidth,
+    dateFormat,
     TaskListHeader,
     TaskListTable,
   };

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import styles from "./task-list-table.module.css";
-import { Task, ExtraColumn } from "../../types/public-types";
+import { Task, ExtraColumn, DateFormat } from "../../types/public-types";
 
 const localeDateStringCache = {};
 const toLocaleDateStringFactory =
@@ -14,6 +14,11 @@ const toLocaleDateStringFactory =
     }
     return lds;
   };
+
+const toISODateString = (date: Date): string => {
+  return date.toISOString().split("T")[0]; // Returns yyyy-MM-dd format
+};
+
 const dateTimeOptions: Intl.DateTimeFormatOptions = {
   weekday: "short",
   year: "numeric",
@@ -35,6 +40,7 @@ export const TaskListTableDefault: React.FC<{
   nameColumnWidth?: string;
   fromColumnWidth?: string;
   toColumnWidth?: string;
+  dateFormat?: DateFormat;
 }> = ({
   rowHeight,
   rowWidth,
@@ -47,12 +53,20 @@ export const TaskListTableDefault: React.FC<{
   nameColumnWidth,
   fromColumnWidth,
   toColumnWidth,
+  dateFormat = "locale",
 }) => {
   const toLocaleDateString = useMemo(
     () => toLocaleDateStringFactory(locale),
     [locale]
   );
 
+  const formatDate = useMemo(() => {
+    if (dateFormat === "iso8601") {
+      return toISODateString;
+    }
+    return (date: Date) => toLocaleDateString(date, dateTimeOptions);
+  }, [dateFormat, toLocaleDateString]);
+
   return (
     <div
       className={styles.taskListWrapper}
@@ -104,7 +118,7 @@ export const TaskListTableDefault: React.FC<{
                 maxWidth: fromColumnWidth || rowWidth,
               }}
             >
-              &nbsp;{toLocaleDateString(t.start, dateTimeOptions)}
+              &nbsp;{formatDate(t.start)}
             </div>
             <div
               className={styles.taskListCell}
@@ -113,7 +127,7 @@ export const TaskListTableDefault: React.FC<{
                 maxWidth: toColumnWidth || rowWidth,
               }}
             >
-              &nbsp;{toLocaleDateString(t.end, dateTimeOptions)}
+              &nbsp;{formatDate(t.end)}
             </div>
             {/* Render extra column values */}
             {extraColumns.map((column) => (
@@ -126,7 +140,7 @@ export const TaskListTableDefault: React.FC<{
                 }}
                 title={column.render ? undefined : String(t.extraColumns?.[column.key] || "")}
               >
-                &nbsp;{column.render 
+                {column.render 
                   ? column.render(t)
                   : t.extraColumns?.[column.key] || ""
                 }

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { BarTask } from "../../types/bar-task";
-import { Task, ExtraColumn } from "../../types/public-types";
+import { Task, ExtraColumn, DateFormat } from "../../types/public-types";
 
 export type TaskListProps = {
   headerHeight: number;
@@ -21,6 +21,7 @@ export type TaskListProps = {
   nameColumnWidth?: string;
   fromColumnWidth?: string;
   toColumnWidth?: string;
+  dateFormat?: DateFormat;
   TaskListHeader: React.FC<{
     headerHeight: number;
     rowWidth: string;
@@ -45,6 +46,7 @@ export type TaskListProps = {
     nameColumnWidth?: string;
     fromColumnWidth?: string;
     toColumnWidth?: string;
+    dateFormat?: DateFormat;
   }>;
 };
 
@@ -67,6 +69,7 @@ export const TaskList: React.FC<TaskListProps> = ({
   nameColumnWidth,
   fromColumnWidth,
   toColumnWidth,
+  dateFormat,
   TaskListHeader,
   TaskListTable,
 }) => {
@@ -102,6 +105,7 @@ export const TaskList: React.FC<TaskListProps> = ({
     nameColumnWidth,
     fromColumnWidth,
     toColumnWidth,
+    dateFormat,
   };
 
   return (

src/index.tsx

@@ -4,6 +4,7 @@ export type {
   GanttProps,
   Task,
   ExtraColumn,
+  DateFormat,
   StylingOption,
   DisplayOption,
   EventOption,

src/types/public-types.ts

@@ -11,6 +11,8 @@ export enum ViewMode {
 }
 export type TaskType = "task" | "milestone" | "project";
 
+export type DateFormat = "locale" | "iso8601";
+
 export interface ExtraColumn {
   key: string;
   title: string;
@@ -157,6 +159,7 @@ export interface StylingOption {
     nameColumnWidth?: string;
     fromColumnWidth?: string;
     toColumnWidth?: string;
+    dateFormat?: DateFormat;
   }>;
 }
 
@@ -178,4 +181,8 @@ export interface GanttProps extends EventOption, DisplayOption, StylingOption {
    * Width of the To column
    */
   toColumnWidth?: string;
+  /**
+   * Date format for start and end dates. "locale" uses locale formatting, "iso8601" uses yyyy-MM-dd format
+   */
+  dateFormat?: DateFormat;
 }