Skip to content
RevoGrid [Pro]

Tasks, Summaries, And Milestones

Source code
src/components/gantt/GanttBasic.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/gantt';
import { currentTheme } from '../composables/useRandomData';
import {
  calendars,
  dependencies,
  ganttConfig,
  initiallyHiddenColumnProps,
  tasks,
  taskTableColumnProps,
} from './gantt-basic-data';
import './gantt-basic.css';


const { isDark } = currentTheme();
const columns = taskTableColumnProps.map((prop) =>
  createDefaultTaskTableColumn(prop),
);


export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) {
    return () => {};
  }


  const root = document.createElement('section');
  const grid = document.createElement('revo-grid');


  root.className = 'gantt-basic-demo';
  grid.className = 'gantt-basic-grid';
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  grid.canMoveColumns = true;
  grid.plugins = [GanttPlugin];
  grid.gantt = ganttConfig;
  grid.ganttCalendars = calendars;
  grid.ganttDependencies = dependencies;
  grid.columns = columns;
  grid.hideColumns = [...initiallyHiddenColumnProps];


  root.appendChild(grid);
  parent.appendChild(root);


  grid.source = tasks.map((task) => ({ ...task }));


  return () => root.remove();
}

Task hierarchy is represented by parentId.

  • type: 'task': normal scheduled item.
  • type: 'summary': rollup row; dates and progress come from children.
  • type: 'milestone': zero duration (startDate === endDate, duration: 0).

Scheduling-relevant source fields include duration, durationUnit, durationIsElapsed, taskMode, constraintType, constraintDate, deadlineDate, effortMode, workHours, workUnit, percentDone, actualStartDate, actualFinishDate, remainingDuration, splitRanges, priority, and canLevel. See Duration Units and Conversion for mixed units and text input.

duration, remainingDuration, and workHours are stored in canonical hours. durationUnit is retained display/edit metadata for duration spans, while workUnit independently controls Work. Text quantities are converted to hours on input and converted from hours only when rendered.

Source row contract: GanttTaskSourceRow in packages/gantt/src/gantt/grid/gantt-plugin.types.ts. Internal task entities use manuallyScheduled, duration, and progressPercent in packages/gantt/src/gantt/core/domain.ts.