Skip to content

Commit bea7051

Browse files
jeonghanyunjeonghanyun
authored
Merge pull request #1 from gupsa-corp/feature/add-extra-columns-support
feat: Add extra columns support with configurable column widths and date formats
2 parents 7cb9a5b + c3aee30 commit bea7051

13 files changed

Lines changed: 5384 additions & 1052 deletions

File tree

‎README.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,106 @@ npm start
154154

155155
\*Required
156156

157+
## Extra Columns Support
158+
159+
You can add custom columns to the task list by using the `extraColumns` prop:
160+
161+
```javascript
162+
import { Gantt, Task, ExtraColumn, DateFormat } from 'gantt-task-react';
163+
164+
// Define extra columns
165+
const extraColumns: ExtraColumn[] = [
166+
{
167+
key: "status",
168+
title: "Status",
169+
width: "100px",
170+
},
171+
{
172+
key: "assignee",
173+
title: "Assignee",
174+
width: "120px",
175+
},
176+
{
177+
key: "priority",
178+
title: "Priority",
179+
width: "80px",
180+
render: (task) => (
181+
<span className={`priority-${task.extraColumns?.priority}`}>
182+
{task.extraColumns?.priority}
183+
</span>
184+
),
185+
},
186+
];
187+
188+
// Add extra data to your tasks
189+
const tasks: Task[] = [
190+
{
191+
id: "1",
192+
name: "Task 1",
193+
start: new Date(),
194+
end: new Date(),
195+
progress: 50,
196+
type: "task",
197+
extraColumns: {
198+
status: "In Progress",
199+
assignee: "John Doe",
200+
priority: "High",
201+
},
202+
},
203+
];
204+
205+
<Gantt
206+
tasks={tasks}
207+
extraColumns={extraColumns}
208+
nameColumnWidth="200px"
209+
fromColumnWidth="130px"
210+
toColumnWidth="130px"
211+
dateFormat="iso8601"
212+
/>
213+
```
214+
215+
### ExtraColumn Interface
216+
217+
| Parameter Name | Type | Description |
218+
| :------------- | :-------------------------------------- | :----------------------------------------------------------------------- |
219+
| key\* | string | Unique key for the column, used to access data in task.extraColumns |
220+
| title\* | string | Column header title |
221+
| width | string | Column width (e.g., "100px", "120px"). Defaults to listCellWidth |
222+
| render | `(task: Task) => React.ReactNode` | Optional custom render function for complex column content |
223+
224+
### Column Width Configuration
225+
226+
You can customize the width of the default columns:
227+
228+
| Parameter Name | Type | Description |
229+
| :---------------- | :----- | :----------------------------------------------- |
230+
| nameColumnWidth | string | Width of the Name column (e.g., "200px") |
231+
| fromColumnWidth | string | Width of the From/Start date column (e.g., "130px") |
232+
| toColumnWidth | string | Width of the To/End date column (e.g., "130px") |
233+
234+
### Date Format Configuration
235+
236+
You can choose how dates are displayed in the From and To columns:
237+
238+
```javascript
239+
import { Gantt, DateFormat } from 'gantt-task-react';
240+
241+
<Gantt
242+
tasks={tasks}
243+
dateFormat="iso8601" // Options: "locale" or "iso8601"
244+
/>
245+
```
246+
247+
| Parameter Name | Type | Description |
248+
| :------------- | :--------- | :------------------------------------------------------------------- |
249+
| dateFormat | DateFormat | Date display format. "locale" uses locale formatting (e.g., "Fri, June 15, 2025"), "iso8601" uses ISO 8601 format (YYYY-MM-DD) |
250+
251+
**DateFormat Options:**
252+
- `"locale"` (default): Displays dates in locale-specific format (e.g., "Fri, June 15, 2025")
253+
- `"iso8601"`: Displays dates in ISO 8601 format (e.g., "2025-06-15")
254+
255+
\*Required
256+
157257
## License
158258
159259
[MIT](https://oss.ninja/mit/jaredpalmer/)

‎example/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { Task, ViewMode, Gantt } from "gantt-task-react";
33
import { ViewSwitcher } from "./components/view-switcher";
44
import { getStartEndDateForProject, initTasks } from "./helper";
5+
import ExtraColumnsApp from "./ExtraColumnsApp";
56
import "gantt-task-react/dist/index.css";
67

78
// Init
@@ -107,6 +108,7 @@ const App = () => {
107108
columnWidth={columnWidth}
108109
weekendColor={"#97979714"}
109110
/>
111+
<ExtraColumnsApp />
110112
</div>
111113
);
112114
};

‎example/src/ExtraColumnsApp.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React, { useState } from "react";
2+
import { ViewMode, Gantt, DateFormat } from "gantt-task-react";
3+
import { ViewSwitcher } from "./components/view-switcher";
4+
import { initTasksWithExtraColumns, extraColumns } from "./extra-columns-helper";
5+
import "gantt-task-react/dist/index.css";
6+
7+
//Init
8+
const ExtraColumnsApp: React.FC = () => {
9+
const [tasks, setTasks] = useState(initTasksWithExtraColumns());
10+
const [view, setView] = useState<ViewMode>(ViewMode.Day);
11+
const [dateFormat, setDateFormat] = useState<DateFormat>("locale");
12+
13+
let columnWidth = 65;
14+
if (view === ViewMode.Year) {
15+
columnWidth = 350;
16+
} else if (view === ViewMode.Month) {
17+
columnWidth = 300;
18+
} else if (view === ViewMode.Week) {
19+
columnWidth = 250;
20+
}
21+
22+
return (
23+
<div className="Wrapper">
24+
<h2>Gantt Chart with Extra Columns Example</h2>
25+
<p>This example demonstrates how to add custom columns to the Gantt chart task list.</p>
26+
27+
<div style={{ display: "flex", gap: "20px", alignItems: "center", marginBottom: "10px" }}>
28+
<ViewSwitcher
29+
onViewModeChange={(viewMode) => setView(viewMode)}
30+
onViewListChange={() => {}}
31+
isChecked={true}
32+
/>
33+
34+
<div>
35+
<label style={{ marginRight: "10px" }}>Date Format:</label>
36+
<select
37+
value={dateFormat}
38+
onChange={(e) => setDateFormat(e.target.value as DateFormat)}
39+
style={{ padding: "5px", borderRadius: "4px", border: "1px solid #ccc" }}
40+
>
41+
<option value="locale">Locale Format (e.g., Fri, June 15, 2025)</option>
42+
<option value="iso8601">ISO 8601 Format (YYYY-MM-DD)</option>
43+
</select>
44+
</div>
45+
</div>
46+
47+
<div style={{ marginTop: "20px" }}>
48+
<Gantt
49+
tasks={tasks}
50+
viewMode={view}
51+
extraColumns={extraColumns}
52+
nameColumnWidth="180px"
53+
fromColumnWidth="120px"
54+
toColumnWidth="120px"
55+
dateFormat={dateFormat}
56+
onDateChange={(task, _children) => {
57+
console.log("On date change Id:" + task.id);
58+
setTasks(tasks);
59+
}}
60+
onDelete={(task) => {
61+
const conf = window.confirm("Are you sure about " + task.name + " ?");
62+
if (conf) {
63+
setTasks(tasks.filter((t) => t.id !== task.id));
64+
}
65+
return conf;
66+
}}
67+
onProgressChange={(task, _children) => {
68+
console.log("On progress change Id:" + task.id);
69+
setTasks(tasks);
70+
}}
71+
onDoubleClick={(task) => {
72+
console.log("On Double Click event Id:" + task.id);
73+
}}
74+
onClick={(task) => {
75+
console.log("On Click event Id:" + task.id);
76+
}}
77+
columnWidth={columnWidth}
78+
listCellWidth="180px"
79+
/>
80+
</div>
81+
82+
<div style={{ marginTop: "20px", padding: "15px", backgroundColor: "#f8f9fa", borderRadius: "5px" }}>
83+
<h3>Features Demonstrated:</h3>
84+
<ul>
85+
<li><strong>Status Column:</strong> Shows task status with colored badges</li>
86+
<li><strong>Assignee Column:</strong> Displays who is responsible for each task</li>
87+
<li><strong>Priority Column:</strong> Shows task priority with colored indicators</li>
88+
<li><strong>Budget Column:</strong> Displays formatted budget amounts</li>
89+
<li><strong>Custom Column Widths:</strong> Name, From, and To columns have custom widths</li>
90+
<li><strong>Date Format Options:</strong> Toggle between locale and ISO (YYYY-MM-DD) date formats</li>
91+
</ul>
92+
93+
<h4>How to Use:</h4>
94+
<ol>
95+
<li>Define your extra columns configuration with <code>ExtraColumn[]</code></li>
96+
<li>Add <code>extraColumns</code> data to your task objects</li>
97+
<li>Pass the columns configuration to the <code>Gantt</code> component</li>
98+
<li>Optionally use custom render functions for complex column content</li>
99+
<li>Set custom widths using <code>nameColumnWidth</code>, <code>fromColumnWidth</code>, <code>toColumnWidth</code></li>
100+
<li>Choose date format with <code>dateFormat</code> prop: "locale" or "iso"</li>
101+
</ol>
102+
</div>
103+
</div>
104+
);
105+
};
106+
107+
export default ExtraColumnsApp;

0 commit comments

Comments
 (0)
⚡