Gantt

Module Extensions

`HTMLRevoGridElement` (Extended from `global`)

Properties added to the grid element for Gantt configuration and data.

1
interface HTMLRevoGridElement {
2
  /** Top-level Gantt plugin configuration. */
3
  gantt?: GanttPluginConfig;
4
  /** Dependency links between tasks. */
5
  ganttDependencies?: readonly DependencyEntity[];
6
  /** Working calendars (working days, holidays, hours per day). */
7
  ganttCalendars?: readonly CalendarEntity[];
8
  /** Available resources (people, equipment). */
9
  ganttResources?: readonly ResourceEntity[];
10
  /** Task–resource assignments. */
11
  ganttAssignments?: readonly AssignmentEntity[];
12
  /** Historical baseline snapshots for schedule comparison. */
13
  ganttBaselines?: readonly BaselineSnapshot[];
14
  /** Columns to hide from the task table. */
15
  hideColumns?: readonly string[] | string;
16
}

`HTMLRevoGridElementEventMap` (Extended from `global`)

1
interface HTMLRevoGridElementEventMap {
2
  'gantt-dependency-hover': GanttDependencyInteractionDetail;
3
  'gantt-dependency-select': GanttDependencyInteractionDetail;
4
  'gantt-task-create': GanttCreateTaskOptions | undefined;
5
  'gantt-task-indent': GanttTaskHierarchyActionDetail | undefined;
6
  'gantt-task-outdent': GanttTaskHierarchyActionDetail | undefined;
7
  'gantt-zoom-in': undefined;
8
  'gantt-zoom-out': undefined;
9
  'gantt-zoom-set-level': GanttZoomSetLevelDetail;
10
  'gantt-panel-resize': GanttPanelResizeEventDetail;
11
  'gantt-before-task-change': GanttBeforeTaskChangeDetail;
12
  'gantt-before-dependency-change': GanttBeforeDependencyChangeDetail;
13
  'gantt-before-assignment-change': GanttBeforeAssignmentChangeDetail;
14
}

Plugin API

`GanttPlugin`

The GanttPlugin is an enterprise plugin for RevoGrid that adds a full-featured Gantt chart timeline alongside the standard data grid.

Key Features:

Interactive Timeline – Task bars, milestones, and summary rollups on a scrollable, zoomable time axis.
Dependency Arrows – FS, SS, FF, SF links with drag-to-create.
Critical Path – Automatic calculation and visual highlighting.
Baseline Comparison – Overlay a saved baseline beneath task bars.
Resource Assignments – Assign resources and display labels on task bars.
Drag & Drop – Move, resize, and adjust progress directly on the timeline.
Multi-Level Zoom – Smooth zooming from day to year.
Task Hierarchy – Indent/outdent, expand/collapse, and auto WBS codes.
Calendar-Aware Scheduling – Working days, holidays, and multiple calendars.
Visual Decorations – Time-range bands, project line, non-working-day shading, task markers.
Before-Change Events – Cancelable events for all mutations.

Usage:

Assign GanttPlugin to the grid’s plugins array.
Set project config via grid.gantt.
Set task data via grid.source.
Set dependencies, calendars, resources, assignments, and baselines via the corresponding gantt* properties.

Example

1
import { GanttPlugin } from '@revolist/revogrid-enterprise';
2
import type { GanttPluginConfig } from '@revolist/revogrid-enterprise';
3

4
const grid = document.createElement('revo-grid');
5
grid.plugins = [GanttPlugin];
6
grid.gantt = {
7
  id: 'my-project',
8
  name: 'My Project',
9
  version: '1',
10
  currency: 'USD',
11
  timeZone: 'UTC',
12
  primaryCalendarId: 'cal-1',
13
  updatedAt: '2026-01-01T00:00:00Z',
14
  zoomPreset: 'week',
15
};
16
grid.source = tasks;
17
grid.ganttDependencies = dependencies;
18
grid.ganttCalendars = calendars;

Configuration Types

`GanttPluginConfig`

Top-level configuration for the Gantt plugin.

1
interface GanttPluginConfig {
2
  /** Unique project identifier. */
3
  readonly id: EntityId;
4
  /** Project display name. */
5
  readonly name: string;
6
  /** Project data schema version. */
7
  readonly version: string;
8
  /** Currency code (e.g. "USD"). */
9
  readonly currency: string;
10
  /** IANA time zone (e.g. "America/New_York"). */
11
  readonly timeZone: string;
12
  /** Default calendar for new tasks. */
13
  readonly primaryCalendarId: CalendarId;
14
  /** ISO 8601 timestamp of last modification. */
15
  readonly updatedAt: ISODateTimeString;
16
  /** Pre-defined zoom level. */
17
  readonly zoomPreset?: TimelineZoomPreset;
18
  /** Advanced zoom configuration. */
19
  readonly zoom?: TimelineZoomConfig;
20
  /** Scheduling engine options. */
21
  readonly scheduling?: GanttSchedulingConfig;
22
  /** Enable inline task creation. */
23
  readonly allowTaskCreate?: boolean;
24
  /** Restrict creatable dependency types. */
25
  readonly allowedDependencyTypes?: readonly DependencyType[];
26
  /** Filter the resource list. */
27
  readonly resourceFilterIds?: readonly ResourceId[];
28
  /** Visual overlay options. */
29
  readonly visuals?: GanttVisualConfig;
30
}

`GanttVisualConfig`

Controls visual overlays and decorations on the timeline.

1
interface GanttVisualConfig {
2
  /** Show baseline bars beneath task bars. */
3
  readonly showBaseline?: boolean;
4
  /** Highlight tasks on the critical path. */
5
  readonly showCriticalPath?: boolean;
6
  /** Display task names on timeline bars. */
7
  readonly showTaskLabels?: boolean;
8
  /** Which baseline to display. */
9
  readonly baselineId?: BaselineId;
10
  /** Vertical "today" / status-date line. */
11
  readonly projectLineDate?: ISODateString;
12
  /** Highlighted date ranges on the background. */
13
  readonly timeRanges?: readonly GanttTimeRange[];
14
  /** Shade weekends and holidays. */
15
  readonly shadeNonWorkingTime?: boolean;
16
  /** Hook to produce per-task markers. */
17
  readonly taskMarkerHook?: GanttTaskMarkerHook;
18
}

`GanttSchedulingConfig`

1
interface GanttSchedulingConfig {
2
  /** Exclude holidays from task duration calculations. */
3
  readonly excludeHolidaysFromDuration?: boolean;
4
}

Domain Types

`TaskEntity`

A single task (work item) in the project.

1
interface TaskEntity {
2
  readonly id: TaskId;
3
  readonly projectId: EntityId;
4
  readonly parentId: TaskId | null;
5
  readonly wbsCode: string;
6
  readonly name: string;
7
  readonly type: TaskType;           // 'summary' | 'task' | 'milestone'
8
  readonly status: TaskStatus;       // 'not-started' | 'in-progress' | 'done' | 'blocked'
9
  readonly startDate: ISODateString;
10
  readonly endDate: ISODateString;
11
  readonly durationDays: number;
12
  readonly manuallyScheduled?: boolean;
13
  readonly inactive?: boolean;
14
  readonly constraintType?: TaskConstraintType;
15
  readonly constraintDate?: ISODateString;
16
  readonly deadlineDate?: ISODateString;
17
  readonly progressPercent: number;
18
  readonly calendarId: CalendarId;
19
  readonly isCritical: boolean;
20
  readonly notes?: string;
21
  readonly tags: readonly string[];
22
}

`DependencyEntity`

A directed link between two tasks.

1
interface DependencyEntity {
2
  readonly id: DependencyId;
3
  readonly predecessorTaskId: TaskId;
4
  readonly successorTaskId: TaskId;
5
  readonly type: DependencyType;  // 'finish-to-start' | 'start-to-start' | 'finish-to-finish' | 'start-to-finish'
6
  readonly lagDays: number;
7
}

`CalendarEntity`

Working schedule for tasks and resources.

1
interface CalendarEntity {
2
  readonly id: CalendarId;
3
  readonly name: string;
4
  readonly timeZone: string;
5
  readonly workingDays: readonly number[];     // ISO weekdays 1–7
6
  readonly holidays: readonly ISODateString[];
7
  readonly hoursPerDay: number;
8
}

`ResourceEntity`

A person, team, or piece of equipment.

1
interface ResourceEntity {
2
  readonly id: ResourceId;
3
  readonly name: string;
4
  readonly role: string;
5
  readonly calendarId: CalendarId;
6
  readonly allocationCapacity: number;
7
  readonly hourlyCost: number;
8
}

`AssignmentEntity`

Links a resource to a task.

1
interface AssignmentEntity {
2
  readonly id: AssignmentId;
3
  readonly taskId: TaskId;
4
  readonly resourceId: ResourceId;
5
  readonly allocationUnits: number;
6
  readonly responsibility: string;
7
}

`BaselineSnapshot`

Point-in-time snapshot for schedule comparison.

1
interface BaselineSnapshot {
2
  readonly id: BaselineId;
3
  readonly name: string;
4
  readonly capturedAt: ISODateTimeString;
5
  readonly tasks: readonly BaselineTaskSnapshot[];
6
}
7

8
interface BaselineTaskSnapshot {
9
  readonly taskId: TaskId;
10
  readonly startDate: ISODateString;
11
  readonly endDate: ISODateString;
12
  readonly durationDays: number;
13
  readonly progressPercent: number;
14
}

Event Constants

Constant	Value	Detail Type
`GANTT_DEPENDENCY_HOVER_EVENT`	`'gantt-dependency-hover'`	`GanttDependencyInteractionDetail`
`GANTT_DEPENDENCY_SELECT_EVENT`	`'gantt-dependency-select'`	`GanttDependencyInteractionDetail`
`GANTT_TASK_CREATE_EVENT`	`'gantt-task-create'`	`GanttCreateTaskOptions \| undefined`
`GANTT_TASK_INDENT_EVENT`	`'gantt-task-indent'`	`GanttTaskHierarchyActionDetail \| undefined`
`GANTT_TASK_OUTDENT_EVENT`	`'gantt-task-outdent'`	`GanttTaskHierarchyActionDetail \| undefined`
`GANTT_ZOOM_IN_EVENT`	`'gantt-zoom-in'`	`undefined`
`GANTT_ZOOM_OUT_EVENT`	`'gantt-zoom-out'`	`undefined`
`GANTT_ZOOM_SET_LEVEL_EVENT`	`'gantt-zoom-set-level'`	`GanttZoomSetLevelDetail`
`GANTT_PANEL_RESIZE_EVENT`	`'gantt-panel-resize'`	`GanttPanelResizeEventDetail`
`GANTT_BEFORE_TASK_CHANGE_EVENT`	`'gantt-before-task-change'`	`GanttBeforeTaskChangeDetail`
`GANTT_BEFORE_DEPENDENCY_CHANGE_EVENT`	`'gantt-before-dependency-change'`	`GanttBeforeDependencyChangeDetail`
`GANTT_BEFORE_ASSIGNMENT_CHANGE_EVENT`	`'gantt-before-assignment-change'`	`GanttBeforeAssignmentChangeDetail`

Before-Mutation Event Details

`GanttBeforeTaskChangeDetail`

1
interface GanttBeforeTaskChangeDetail {
2
  readonly action: 'move' | 'resize' | 'create' | 'edit' | 'progress' | 'indent' | 'outdent';
3
  readonly taskId: TaskId;
4
  readonly changes: Partial<TaskEntity>;
5
  readonly previousValues: Partial<TaskEntity>;
6
}

`GanttBeforeDependencyChangeDetail`

1
interface GanttBeforeDependencyChangeDetail {
2
  readonly action: 'create' | 'delete' | 'edit';
3
  readonly dependencyId: DependencyId | null;
4
  readonly dependency: DependencyEntity;
5
  readonly previousDependency?: DependencyEntity;
6
}

`GanttBeforeAssignmentChangeDetail`

1
interface GanttBeforeAssignmentChangeDetail {
2
  readonly action: 'edit';
3
  readonly taskId: TaskId;
4
  readonly assignments: readonly AssignmentEntity[];
5
  readonly previousAssignments: readonly AssignmentEntity[];
6
}

Utility Functions

`createDefaultTaskTableColumn`

Creates a pre-configured column definition for a standard task-table field.

1
function createDefaultTaskTableColumn(prop: string): ColumnRegular | null;

`createGanttColumn`

Creates the timeline column appended to the right side of the grid.

1
function createGanttColumn(scale: TimelineScale): ColumnRegular;

Gantt

Module Extensions

HTMLRevoGridElement (Extended from global)

HTMLRevoGridElementEventMap (Extended from global)

Plugin API

GanttPlugin

Example

Configuration Types

GanttPluginConfig

GanttVisualConfig

GanttSchedulingConfig

Domain Types

TaskEntity

DependencyEntity

CalendarEntity

ResourceEntity

AssignmentEntity

BaselineSnapshot