| name | syncfusion-react-gantt-chart |
| description | Implement, configure, and customize the Syncfusion React Gantt Chart component. Use this when building project scheduling applications with task timelines, dependencies, and resource management. Covers GanttComponent setup, task constraints, taskbar customization, filtering, sorting, Excel/PDF export, critical path analysis, milestones, predecessors, resource view, and baseline tracking. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44"} |
Syncfusion React Gantt Chart
The Syncfusion React Gantt Chart (GanttComponent) is a powerful project management component for visualizing, scheduling, and managing tasks over a timeline. It supports auto/manual scheduling, task dependencies, resource planning, interactive editing, Excel/PDF export, and rich customization.
When to Use This Skill
- Implementing a Gantt chart or project timeline in a React app
- Configuring task scheduling (auto, manual, custom modes)
- Setting up task dependencies (FS, SS, FF, SF) and constraints (ASAP, MSO, FNET, etc.)
- Binding local or remote data to the Gantt (local array, DataManager, UrlAdaptor, Ajax)
- Customizing taskbars, labels, milestones, and baselines
- Configuring resources and resource views (including multi-taskbar)
- Enabling editing (dialog, cell, taskbar drag) with validation rules
- Setting up column resize, reorder, freeze, or column menu
- Configuring WBS codes, tree column icons, or serial number columns
- Setting up filtering, sorting, or selection
- Scrolling to specific dates or controlling scroll position programmatically
- Exporting Gantt to Excel or PDF
- Handling Gantt events and enabling advanced features (undo/redo, virtual scroll, critical path, etc.)
- Globalization, localization, and RTL support
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installation and package dependencies
- Vite / CRA project setup
- CSS theme imports (all 14 required packages)
- Basic
GanttComponent with taskFields mapping
- Module injection guide (all available services)
gridLines prop ('Both' / 'Horizontal' / 'Vertical' / 'None')
- First render walkthrough with minimal example, output summary, and common gotchas
Data Binding
📄 Read: references/data-binding.md
- Local array data binding
- Remote / AJAX data binding with
DataManager
- Self-referential flat data
taskFields configuration (id, name, startDate, endDate, duration, progress, child)
- Custom field mapping
- UrlAdaptor for server-side CRUD (
url + batchUrl)
- RemoteSaveAdaptor for local rendering with server persistence
- Sending additional parameters to server via
Query.addParams() in load event
- Binding with
Ajax class (manual fetch)
- Load child on demand (
loadChildOnDemand={false}, hasChildMapping)
- Handling HTTP errors with
actionFailure event
Task Scheduling
📄 Read: references/task-scheduling.md
- Auto, Manual, and Custom scheduling modes (
taskMode)
- Unscheduled tasks (duration-only, date-only, none)
- Project start date and end date configuration
- How scheduling mode affects parent task calculation
- Switching between modes dynamically
Task Dependency
📄 Read: references/task-dependency.md
- Dependency types: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF)
- Mapping
taskFields.dependency in data source (string format: "2FS", "2FS+3d", "2SS+2h")
- Multiple predecessors per task (comma-separated:
"2FS,3FS")
- Offset values with units: day, hour, minute (e.g.,
"2FS+3h", "2FS-1d")
- Drawing dependencies via UI (drag from taskbar connection points)
- Programmatic dependency management (
addPredecessor, removePredecessor, updatePredecessor)
- Connector line customization (
connectorLineWidth, connectorLineBackground)
- Predecessor Offset Synchronization
autoUpdatePredecessorOffset={true} — recalculate offsets on load to account for calendar rules (weekends, holidays)
autoUpdatePredecessorOffset={false} — display original offsets even if not matching rendered lines (visual inconsistency possible)
- Offset Updates During Editing
updateOffsetOnTaskbarEdit={true} — auto-recalculate offsets when dragging taskbars (default)
updateOffsetOnTaskbarEdit={false} — preserve offsets; manual update required via dependency dialog
- Dependency Validation Modes (in
actionBegin event with requestType === 'validateLinkedTask')
respectLink={true} — revert invalid edits to maintain dependency integrity
removeLink={true} — remove conflicting dependencies to allow edits
preserveLinkWithEditing={true} — update offsets to maintain links (default mode)
- Validation Dialog — disable all modes to show user-choice dialog (cancel edit, remove link, adjust offset)
- Parent Dependencies —
allowParentDependency={true} allows cross-parent dependencies; false restricts to siblings only
- Show/Hide Dependencies Dynamically — toggle
.e-gantt-dependency-view-container CSS visibility
- Disable Validation —
enablePredecessorValidation={false} disables auto-date validation based on predecessor links
Task Constraints
📄 Read: references/task-constraints.md
- Eight constraint types: ASAP, ALAP, MSO, MFO, SNET, SNLT, FNET, FNLT
- Mapping
taskFields.constraintType and taskFields.constraintDate
- How constraints interact with dependencies and
taskMode
- Editing constraints via dialog
- Validation and conflict handling
Timeline and Zooming
📄 Read: references/timeline.md
timelineViewMode quick presets (Hour, Day, Week, Month, Year)
- Top tier and bottom tier independent configuration (
unit, format, count, formatter)
- Combining timeline cells using
count (merge multiple units per cell)
- Custom timeline cell formatting using
formatter (tier + mode aware)
- Timeline view dates with
viewStartDate / viewEndDate (lock visible range)
weekStartDay — controls which day starts a week column (0=Sun, 1=Mon…)
- Automatic timescale updates using
updateTimescaleView
- Dynamic timeline mode change at runtime (update
timelineViewMode + refresh())
- Timeline cell tooltip visibility using
showTooltip
- Timeline template customization using
timelineTemplate ({ date, value, tier })
- Timeline navigation using
previousTimeSpan() / nextTimeSpan()
- Zooming with toolbar (
ZoomIn, ZoomOut, ZoomToFit)
- Customizing zoom steps with
zoomingLevels (ZoomTimelineSettings)
- Programmatic zoom methods:
zoomIn(), zoomOut(), fitToProject()
- Timeline cell width using
timelineUnitSize
- Weekend handling:
- Highlight weekends with
highlightWeekends={true}
- Hide weekends using
timelineSettings.showWeekend (with noted limitations)
Columns
📄 Read: references/columns.md
- Column types overview (tree column, WBS, custom columns)
- Auto-generated columns (omit
ColumnsDirective)
- Column rendering with
valueAccessor (custom display values, concatenation)
- Expression columns (calculated values via
valueAccessor)
- Display serial numbers via
rowDataBound
- Tree column configuration (
treeColumnIndex)
- Customize expand/collapse icons (CSS override)
- Customize indentation via
queryCellInfo
collapseAllParentTasks — collapse all on load
taskFields.expandState — per-row initial expand/collapse
- Persist expand/collapse state in
localStorage
- WBS (Work Breakdown Structure) column
enableWBS + enableAutoWbsUpdate APIs
- Manual WBS with
taskFields.wbsPredecessor
- Column headers, format, and alignment
headerTemplate for custom header rendering
- Header text wrapping (
treeGrid.textWrapSettings.wrapMode)
- Dynamic header text update (
getColumnByField + refreshHeader)
- Column templates (custom cell rendering) and
editTemplate
- Column spanning and frozen columns (
frozenColumns, inject Freeze)
Column Interactions
📄 Read: references/column-interactions.md
- Column resizing (
allowResizing, inject Resize)
- Restrict with
minWidth / maxWidth per column
- Prevent resize per column (
allowResizing={false})
- Resize modes: Normal vs Auto (
resizeSettings.mode)
- Programmatic resize (
reorderColumns, refreshColumns)
- Resize events:
resizeStart, resizing, resizeStop
- Column reorder (
allowReordering, inject Reorder)
- Disable reorder per column (
allowReordering={false})
- Programmatic reorder:
reorderColumns, reorderColumnByIndex, reorderColumnByTargetIndex
- Reorder drag events:
columnDragStart, columnDrag, columnDrop
- Column menu (
showColumnMenu, inject ColumnMenu)
- Built-in items: SortAscending, SortDescending, AutoFit, AutoFitAll, ColumnChooser, Filter
- Custom column menu items +
columnMenuClick event
- Disable per column (
showColumnMenu={false})
- Toggling column visibility (show/hide columns)
Rows
📄 Read: references/rows.md
- Row drag-and-drop (reorder and reparent tasks)
- Indent and outdent (change task hierarchy)
- Row spanning via
queryCellInfo event
QueryCellInfoEventArgs with rowSpan, colSpan, cell, data, column
- Horizontal spanning (
colSpan) and vertical spanning (rowSpan)
- Row height configuration
- Row styling via
rowDataBound
- Expand and collapse rows programmatically
Managing Tasks
📄 Read: references/managing-tasks.md
- Adding new tasks (toolbar, context menu, programmatic
addRecord())
- Editing tasks — dialog edit (
mode: 'Dialog'), cell edit (mode: 'Auto'), taskbar drag
- Deleting tasks (toolbar,
deleteRow(), showDeleteConfirmDialog)
- Taskbar drag editing: move, resize right edge, progress handle, dependency drawing
- Splitting and merging tasks (
taskFields.segments, splitTask(), mergeTask())
- Cell edit types (
editType): stringedit, numericedit, datepickeredit, datetimepickeredit, dropdownedit, booleanedit
edit.params for min/max/step/format/dataSource per column
- Customizing add/edit dialog fields (
addDialogFields, editDialogFields)
- Server-side CRUD with
UrlAdaptor (url + batchUrl)
- Server receives
added, changed, deleted arrays in the batch request body
- Column-level validation rules (
validationRules on ColumnDirective)
- Built-in rules:
required, min, max, minLength, date, regex
- Custom validator functions (
[fn, 'message'] callback pattern)
Filtering and Searching
📄 Read: references/filtering-searching.md
- Basic column filtering (
allowFiltering={true}, inject Filter)
- Filter hierarchy modes:
Parent, Child, Both, None
- Filter menu (string, number, date operators) and Excel-like checklist filter
- Toolbar search box (
searchSettings: fields, operator, ignoreCase)
- Initial filter state on load (
filterSettings.columns array)
- Programmatic filter API:
filterByColumn(), clearFiltering()
- Custom multi-column filter predicates
Sorting
📄 Read: references/sorting.md
- Single-column and multi-column sorting
- Initial sort state (
sortSettings)
- Custom sort comparers
- Programmatic sorting API
Selection
📄 Read: references/selection.md
- Row selection modes (single, multiple)
- Cell selection
- Keyboard-based selection
- Programmatic selection API (
selectRow, selectCell)
Taskbar, Labels, and Markers
📄 Read: references/taskbar-labels-markers.md
- Taskbar template (custom rendering)
- Parent taskbar and milestone customization
- Tooltip settings and templates (
tooltipSettings for taskbar, connector line, baseline, timeline)
- Disable/hide tooltips for specific UI targets using
beforeTooltipRender
- Left, right, and task label configuration
- Data markers / indicators
- Event markers (deadlines, holidays on timeline)
- Baseline rendering
- Critical path highlighting
Resources
📄 Read: references/resources.md
- Defining resource collection (
resources property)
- Assigning resources to tasks (
taskFields.resourceInfo) — single or multiple with custom units
- Resource view layout (
viewType='ResourceView', resource groups)
- Multi-taskbar (
enableMultiTaskbar={true}) — multiple taskbars per collapsed resource row
- Over-allocation highlighting (
showOverAllocatedTasks={true})
- Resource unit and work fields (
resourceFields.unit, resourceFields.group)
- Custom resource taskbar styling via
queryTaskbarInfo
Toolbar and Context Menu
📄 Read: references/toolbar-context-menu.md
- Built-in toolbar items:
Add, Edit, Delete, Update, Cancel, Search, ExpandAll, CollapseAll, Indent, Outdent, ZoomIn, ZoomOut, ZoomToFit, CriticalPath, ExcelExport, CsvExport, PdfExport, ColumnChooser, Undo, Redo, SplitTask, MergeTask
- Required services per toolbar item (e.g.
Undo/Redo → UndoRedo, SplitTask → Edit)
- Custom toolbar buttons (
ItemModel) and toolbarClick handler
- Default context menu items including
SplitTask, MergeTask, Convert, DeleteDependency
- Custom context menu items,
contextMenuClick, contextMenuOpen (args.hideItems)
- Enabling/disabling toolbar items dynamically
Excel Export
📄 Read: references/excel-export.md
- Basic Excel export
- Export properties and customization
- Exporting multiple Gantt charts to a single Excel workbook
- Custom data source export
PDF Export
📄 Read: references/pdf-export.md
- Basic PDF export
- Customizing PDF (fonts, columns, styles)
- Header and footer configuration
- Page settings (orientation, size)
Holidays, Working Time & Timezone
📄 Read: references/holidays-working-time.md
- Defining holidays (
holidays prop, HolidayModel, DayMarkers service)
- Work week configuration (
workWeek, includeWeekend)
- Daily working time (
dayWorkingTime)
- Effort-based scheduling (
taskFields.work, workUnit, task types: FixedWork / FixedDuration / FixedUnit)
- Timezone support (
timezone prop, IANA timezone strings)
Splitter
📄 Read: references/splitter.md
- Position-based split (
splitterSettings.position — percentage or pixels)
- Column-based split (
splitterSettings.columnIndex)
- View mode (
splitterSettings.view — Default / Grid / Chart)
- Programmatic resize (
setSplitterPosition())
- Splitter events (
splitterResizeStart, splitterResizing, splitterResized)
Scrolling
📄 Read: references/scrolling.md
- Setting
width and height for scrollbar control
- Responsive container (
width='100%', height='100%' with CSS parent height)
- Scroll to a date (
scrollToDate('MM/dd/yyyy'))
- Set vertical scroll position (
ganttChartModule.scrollObject.setScrollTop(px))
Virtual Scroll
📄 Read: references/virtual-scroll.md
- Row virtualization (
enableVirtualization={true}, VirtualScroll service)
- Timeline virtualization (
enableTimelineVirtualization={true}, requires projectStartDate / projectEndDate)
- Combining row + timeline virtualization
- Accessing filtered record count with virtual scroll (
treeGrid.filterModule.filteredResult)
- Virtual scroll limitations (browser memory, cell selection, pixel height, expand state)
Undo / Redo
📄 Read: references/undo-redo.md
- Enable undo/redo (
enableUndoRedo, UndoRedo service)
undoRedoActions — full list of trackable actions and required services
undoRedoStepsCount — history stack size
- Toolbar
'Undo' / 'Redo' buttons and Ctrl+Z / Ctrl+Y keyboard shortcuts
- Programmatic
undo() / redo() via component ref
State Persistence, Immutable Mode & Loading
📄 Read: references/state-persistence.md
- State persistence (
enablePersistence={true}, unique id prop, localStorage)
- Resetting persisted state (change
id or clear localStorage entry)
- Immutable mode (
enableImmutableMode={true}, requires isPrimaryKey={true})
- Loading animation (
loadingIndicator.indicatorType: 'Spinner' or 'Shimmer')
- Manual spinner control (
showSpinner() / hideSpinner())
Localization and RTL
📄 Read: references/localization-rtl.md
- Setting locale (
locale prop)
- Loading custom translations (
L10n.load() with 'gantt' namespace keys)
- Gantt locale key reference (all translatable UI strings)
- RTL support (
enableRtl={true})
- Column date formatting (
format='yMd', format='dd/MM/yyyy')
- Column number formatting (
format='C2', format='N2', format='P0')
Programmatic Methods
📄 Read: references/gantt-methods.md
- Column utilities:
autoFitColumns()
- Edit control:
cancelEdit(), openAddDialog(), openEditDialog()
- Task management:
deleteRecord(), convertToMilestone(), changeTaskMode(), updateRecordByID(), updateRecordByIndex(), updateTaskId(), updateDataSource(), updateProjectDates()
- Toolbar control:
enableItems()
- Expand/Collapse:
expandByIndex(), collapseByIndex()
- Undo/Redo stacks:
clearUndoCollection(), clearRedoCollection(), getUndoActions(), getRedoActions()
- Data retrieval:
getCurrentViewData(), getRecordByID(), getTaskByUniqueID(), getTaskInfo(), getTaskbarHeight(), getExpandedRecords(), getGanttColumns(), getGridColumns()
- Formatting helpers:
getDurationString(), getWorkString()
- DOM access:
getRowByID(), getRowByIndex()
- Sorting:
removeSortColumn()
- Selection:
selectCells()
- Row reorder:
reorderRows()
- Scrolling:
scrollToTask(), updateChartScrollOffset()
Events
📄 Read: references/events.md
- Lifecycle events (
load, created, dataBound)
- Task editing events (
actionBegin, actionComplete) with requestType reference table
- Taskbar events:
taskbarEditing, taskbarEdited, taskbarClick
- Row expand/collapse events:
expanding, collapsing, expanded, collapsed
- Selection events:
rowSelected, rowDeselected, cellSelected, cellDeselected
- Export events:
excelExportComplete, pdfExportComplete
- Column interaction events:
resizeStart, resizing, resizeStop, columnDragStart, columnDrag, columnDrop
- Event cancellation patterns (
args.cancel = true)
- Complete all-events quick reference table (30+ events)
Quick Start Example
import * as React from 'react';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-gantt';
const data = [
{
TaskID: 1, TaskName: 'Project Initiation',
StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site Location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil Test', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, Predecessor: '2' },
{ TaskID: 4, TaskName: 'Soil Test Approval', StartDate: new Date('04/08/2024'), Duration: 0, Predecessor: '3FS', Progress: 50 },
]
}
];
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
};
const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true };
function App() {
return (
<GanttComponent
dataSource={data}
taskFields={taskFields}
editSettings={editSettings}
toolbar={['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit']}
height="450px"
>
<ColumnsDirective>
<ColumnDirective field="TaskID" width="80" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" />
<ColumnDirective field="Duration" />
<ColumnDirective field="Progress" />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Selection]} />
</GanttComponent>
);
}
export default App;
Common Patterns
Enable Editing with Dialog
<GanttComponent
editSettings={{ allowEditing: true, mode: 'Dialog' }}
>
<Inject services={[Edit]} />
</GanttComponent>
Enable Cell Editing
<GanttComponent
editSettings={{ allowEditing: true, mode: 'Auto' }}
>
<Inject services={[Edit]} />
</GanttComponent>
Programmatically Add a Task
const ganttRef = React.useRef<GanttComponent>(null);
const addTask = () => {
ganttRef.current?.addRecord({ TaskID: 10, TaskName: 'New Task', Duration: 3 }, 'Below', 1);
};
Export to Excel
<GanttComponent toolbar={['ExcelExport']} allowExcelExport={true}>
<Inject services={[ExcelExport, Toolbar]} />
</GanttComponent>
Export to PDF
<GanttComponent toolbar={['PdfExport']} allowPdfExport={true}>
<Inject services={[PdfExport, Toolbar]} />
</GanttComponent>
Column-Level Validation Rules
<ColumnsDirective>
<ColumnDirective field="TaskName" validationRules={{ required: true }} />
<ColumnDirective field="Duration" validationRules={{ min: 1, max: 100 }} />
</ColumnsDirective>
Scroll to Date Programmatically
const ganttRef = React.useRef<GanttComponent>(null);
ganttRef.current?.scrollToDate('04/28/2024');
Column Resize with Min/Max Width
<ColumnDirective field="TaskName" minWidth="100" maxWidth="400" allowResizing={true} />
Reorder Columns Programmatically
const ganttRef = React.useRef<GanttComponent>(null);
(ganttRef.current as any).treeGrid.reorderColumns(['Duration', 'Progress'], 'TaskName');
(ganttRef.current as any).treeGrid.reorderColumnByIndex(2, 0);
Persist Tree Expand/Collapse State
const taskFields = { ..., expandState: 'isExpand' };
<GanttComponent collapseAllParentTasks={true} .../>
Key Module Injections
| Feature | Service to Inject |
|---|
| Editing (add/edit/delete/taskbar drag) | Edit |
| Filtering | Filter |
| Sorting | Sort |
| Toolbar | Toolbar |
| Selection | Selection |
| Day Markers / Holidays / Event Markers | DayMarkers |
| Critical Path | CriticalPath |
| Excel / CSV Export | ExcelExport |
| PDF Export | PdfExport |
| Undo / Redo | UndoRedo |
| Column Menu | ColumnMenu |
| Context Menu | ContextMenu |
| Virtual Scrolling | VirtualScroll |
| Row Drag and Drop | RowDD |
| Column Reordering | Reorder |
| Frozen Columns | Freeze |
| Column Resizing | Resize |
Usage pattern:
import { GanttComponent, Inject, Edit, Filter, Sort, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';
<GanttComponent ...>
<Inject services={[Edit, Filter, Sort, Toolbar, Selection]} />
</GanttComponent>
Key Props Reference
| Prop | Type | Purpose |
|---|
dataSource | object[] / DataManager | Task data (local or remote via DataManager) |
taskFields | TaskFieldsModel | Field mapping for task properties |
editSettings | EditSettingsModel | Enable add/edit/delete/taskbar editing |
toolbar | string[] | Toolbar items to render |
taskMode | Auto / Manual / Custom | Scheduling mode |
resources | object[] | Resource data collection |
resourceFields | ResourceFieldsModel | Resource field mapping |
allowSorting | boolean | Enable sorting |
allowFiltering | boolean | Enable filtering |
allowReordering | boolean | Enable column reorder |
allowResizing | boolean | Enable column resize |
allowExcelExport | boolean | Enable Excel export |
allowPdfExport | boolean | Enable PDF export |
undoRedoActions | string[] | Actions tracked by undo/redo |
timelineSettings | TimelineSettingsModel | Timeline tiers and unit config |
splitterSettings | SplitterSettingsModel | Grid/chart panel ratio |
highlightWeekends | boolean | Shade weekend columns |
holidays | HolidayModel[] | Mark holiday dates |
eventMarkers | EventMarkerModel[] | Vertical markers on timeline |
treeColumnIndex | number | Column index showing expand/collapse icons |
collapseAllParentTasks | boolean | Collapse all parent rows on initial load |
enableWBS | boolean | Auto-generate WBS codes from task hierarchy |
enableAutoWbsUpdate | boolean | Recalculate WBS codes after CRUD/sort/DnD |
frozenColumns | number | Number of left-pinned (frozen) columns |
enableMultiTaskbar | boolean | Show multiple taskbars per resource row |
allowTaskbarOverlap | boolean | Controls whether multiple taskbars overlap (true, default) or stack with extended row height (false) in resource rows |
viewType | string | 'ProjectView' or 'ResourceView' |
showColumnMenu | boolean | Show column-level menu (sort, filter, autofit) |
columnMenuItems | string[] | Restrict which column menu items are shown |
showColumnChooser | boolean | Enable column chooser dialog via toolbar ColumnChooser item |
allowSelection | boolean | Enable row/cell selection |
selectionSettings | SelectionSettingsModel | Selection mode (Row/Cell), type (Single/Multiple) |
gridLines | string | Grid lines style: 'Both' | 'Horizontal' | 'Vertical' | 'None' |
renderBaseline | boolean | Show baseline bars alongside actual taskbars |
baselineColor | string | CSS color for baseline bars |
enableCriticalPath | boolean | Highlight critical path tasks and connectors |
enableRtl | boolean | Enable right-to-left layout |
locale | string | Locale code (e.g. 'fr', 'de', 'ar') |
allowRowDragAndDrop | boolean | Enable row drag-and-drop reordering/reparenting |
enableImmutableMode | boolean | Only re-render changed rows on data updates (requires isPrimaryKey) |
enablePersistence | boolean | Persist UI state (sort, filter, column widths) to localStorage |
loadingIndicator | object | Loading animation type: { indicatorType: 'Spinner' | 'Shimmer' } |
workWeek | string[] | Working days, e.g. ['Monday','Tuesday','Wednesday','Thursday','Friday'] |
includeWeekend | boolean | Count weekends as working days for duration calculation |
timezone | string | IANA timezone for the Gantt (e.g. 'America/New_York') |
showOverAllocatedTasks | boolean | Highlight over-allocated resources in ResourceView |
enableUndoRedo | boolean | Enable undo/redo tracking (inject UndoRedo service) |
undoRedoStepsCount | number | Maximum undo/redo history steps (default: 10) |
enableVirtualization | boolean | Row virtualization for large data sets |
enableTimelineVirtualization | boolean | Timeline (horizontal) virtualization |
rowHeight | number | Uniform row height in pixels |
taskbarHeight | number | Height of taskbars in pixels (must be ≤ rowHeight) |
connectorLineWidth | number | Width of dependency connector lines |
connectorLineBackground | string | Color of dependency connector lines |