Skip to content
RevoGrid [Pro]

Install RevoGrid Gantt

Live example

Section titled “Live example”

This is the mounted result of the installation and plugin-registration steps below. Expand a summary task and inspect its dependency arrows.

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();
}

Install @revolist/gantt alongside the core grid and Pro. Add only the framework wrapper your application uses.

  1. Install the packages.

    Terminal window
    pnpm add @revolist/revogrid @revolist/revogrid-pro @revolist/gantt

  2. Import the product styles once in the application entry point.

    import '@revolist/revogrid-pro/dist/revogrid-pro.css';
    import '@revolist/gantt/styles.css';

  3. Register GanttPlugin on the grid.

    import { GanttPlugin } from '@revolist/gantt';
    

    grid.plugins = [GanttPlugin];

  4. Give the grid a visible size. Gantt needs both width and height to calculate its virtual viewport.

    .project-gantt {
      display: block;
      width: 100%;
      height: 640px;
    }

Choose Your Framework

Section titled “Choose Your Framework”

The general Pro and product installation guide covers private registry, pre-built, GitHub, source-build, and no-build distribution options.