This component is an extended version of the gantt-task-react library. It is ideal for visualizing project timelines, tasks, and milestones with enhanced customization options.
| Prop | Description | Type | Default |
|---|---|---|---|
| tasks | An array of tasks to be displayed in the Gantt chart. Each task includes properties like id, name, start, end, and progress. | ExtendedTask | [] |
| viewMode | The view mode of the Gantt chart. Can be set to Hour, Quarter Day, Half Day, Day, Week, Month, or Year. | ViewMode | ViewMode.Day |
| extraColumns | An array of objects defining additional columns to be displayed in the task list. Each object contains a header and a cell renderer. | { header: ExtraHeader; cell: ExtraCell }[] | [] |
| colorsMap | A mapping of custom colors to task types or specific tasks. This allows for dynamic styling based on the task or project type. | Object{string, string} | {} |
| showArrow | A flag to determine whether to display dependency arrows between tasks. When set to false, arrows are hidden. | boolean | true |
| headerHeight | The height of the header in the Gantt chart, in pixels. | number | 50 |
| columnWidth | The width of each column in the Gantt chart, in pixels. | number | 65 |
| rowHeight | The height of each row in the Gantt chart, in pixels. | number | 50 |
| barCornerRadius | The corner radius of the task bars in the Gantt chart. | number | 6 |
| TaskListHeader | A custom header component for the task list. Allows for the inclusion of additional headers defined in extraColumns. | { headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string; } | TaskListHeader |
| TaskListTable | A custom table component for the task list, allowing the inclusion of additional cells defined in extraColumns. | { rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; onExpanderClick: (task: Task) => void; } | TaskListTable |
| TooltipContent | A custom tooltip component for displaying task details. | { task: Task; fontSize: string; fontFamily: string; } | TooltipContent |
| todayColor | The color used to highlight the current day in the Gantt chart. | string | url(#horzLines) |
| arrowColor | The color of the dependency arrows between tasks. | string | #3380fa |
| onSelect | Callback invoked when a task is selected or unselected. | (task: Task, isSelected: boolean) => void | undefined |
| onDoubleClick | Callback invoked when a task is double-clicked. | (task: Task) => void | undefined |
| onClick | Callback invoked when a task is clicked. | (task: Task) => void | undefined |
| onDateChange | Callback invoked when the start or end date of a task changes. Returning false or throwing an error will undo the operation. | (task: Task, children: Task[]) => void | boolean | Promise | undefined |
| onProgressChange | Callback invoked when the progress of a task changes. Returning false or throwing an error will undo the operation. | (task: Task, children: Task[]) => void | boolean | Promise | undefined |
| onDelete | Callback invoked when a task is deleted. Returning false or throwing an error will undo the operation. | (task: Task) => void | boolean | Promise | undefined |
| onExpanderClick | Callback invoked when the expander icon is clicked in the task list. | (task: Task) => void | undefined |