Skip to content
RevoGrid [Pro]

Grid, Export, Rendering

Live example

Section titled “Live example”

Use the toolbar workbook action to export the task table, inspect the locked task styling, toggle baseline and critical-path visuals, or use Print / PDF for a browser report of mounted viewport content.

Source code
import { controlAttributes, createControl } from '@revolist/ui';
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import {
  defineGanttToolbar,
  GanttPlugin,
  GanttCalendarEditorPlugin,
  type ProjectSnapshot,
} from '@revolist/gantt';
import { ExportExcelPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import {
  SHOWCASE_ASSIGNMENTS,
  SHOWCASE_BASELINES,
  SHOWCASE_COLUMNS_WITH_ROW_SELECT,
  SHOWCASE_DEPENDENCIES,
  SHOWCASE_RESOURCES,
  SHOWCASE_TOOLBAR_COLUMNS,
  STANDARD_CALENDAR,
} from './shared/gantt-project-data';
import {
  createProductionGanttConfig,
  createProductionTasks,
  createProductionPersistence,
  productionError,
  productionSourceRows,
} from './GanttProductionPatternsShared';
import './gantt-production-patterns.css';


export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return () => {};
  const root = document.createElement('section');
  const controls = document.createElement('div');
  const status = document.createElement('p');
  const toolbar = document.createElement('div');
  const grid = document.createElement('revo-grid');
  const persistence = createProductionPersistence();
  let readOnly = false;
  let localized = false;
  let large = false;
  let project: ProjectSnapshot | null = null;
  const applyConfig = () => {
    grid.gantt = createProductionGanttConfig(readOnly, localized, project);
  };
  const applyProject = () => {
    applyConfig();
    grid.ganttDependencies =
      project?.dependencies ?? (large ? [] : SHOWCASE_DEPENDENCIES);
    grid.ganttCalendars = project?.calendars ?? [STANDARD_CALENDAR];
    grid.ganttResources = project?.resources ?? SHOWCASE_RESOURCES;
    grid.ganttAssignments =
      project?.assignments ?? (large ? [] : SHOWCASE_ASSIGNMENTS);
    grid.ganttBaselines =
      project?.baselines ?? (large ? [] : SHOWCASE_BASELINES);
    grid.source = project
      ? productionSourceRows(project)
      : createProductionTasks(large);
  };
  const toggle = (label: string, update: (value: boolean) => void) => {
    const element = document.createElement('label');
    const input = createControl(document, 'input', { type: 'checkbox' });
    input.type = 'checkbox';
    input.addEventListener('change', () => update(input.checked));
    element.append(input, document.createTextNode(label));
    return { element, input };
  };
  const run = async (action: () => unknown | Promise<unknown>) => {
    try {
      await action();
    } catch (error) {
      status.textContent = productionError(error);
    }
  };
  const button = (label: string, action: () => unknown | Promise<unknown>) => {
    const element = createControl(document, 'button', { type: 'button' });
    element.type = 'button';
    element.textContent = label;
    element.className = controlAttributes('button', { class: 'rv-btn' }).class;
    element.addEventListener('click', () => {
      void run(action);
    });
    return element;
  };
  root.className = 'gantt-production-demo';
  controls.className = 'gantt-production-controls';
  status.className = 'gantt-production-status';
  status.setAttribute('role', 'status');
  toolbar.className = 'gantt-production-toolbar';
  grid.className = 'gantt-production-grid';
  grid.theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  grid.plugins = [
    GanttPlugin,
    GanttCalendarEditorPlugin,
    ExportExcelPlugin,
    RowSelectPlugin,
  ];
  grid.rowSelect = { rowOrder: true };
  grid.columns = [...SHOWCASE_COLUMNS_WITH_ROW_SELECT];
  const largeToggle = toggle('750 tasks', (value) => {
    large = value;
    project = null;
    applyProject();
  });
  const restore = button('Restore', async () => {
    project = await persistence.load();
    large = false;
    largeToggle.input.checked = false;
    applyProject();
    status.textContent =
      'Restored the saved project, including tasks and project collections.';
  });
  restore.disabled = true;
  const fileInput = createControl(document, 'input', { type: 'file' });
  fileInput.type = 'file';
  fileInput.hidden = true;
  fileInput.accept = '.json,application/json';
  fileInput.setAttribute('aria-label', 'Import JSON file');
  fileInput.addEventListener('change', async () => {
    const file = fileInput.files?.[0];
    if (file)
      await run(async () => {
        project = await persistence.importFile(file);
        large = false;
        largeToggle.input.checked = false;
        applyProject();
        status.textContent = `Imported ${project.tasks.length} tasks from ${file.name}.`;
      });
    fileInput.value = '';
  });
  const options = document.createElement('div');
  options.className = 'gantt-production-options';
  const actions = document.createElement('div');
  actions.className = 'gantt-production-actions';
  options.append(
    toggle('Read only', (value) => {
      readOnly = value;
      applyConfig();
    }).element,
    toggle('Español dates', (value) => {
      localized = value;
      applyConfig();
    }).element,
    largeToggle.element,
  );
  actions.append(
    fileInput,
    button('Import JSON', () => fileInput.click()),
    button('JSON', () => persistence.exportFile(grid)),
    button('Save', async () => {
      await persistence.save(grid);
      restore.disabled = false;
      status.textContent =
        'Saved the current edited project in browser memory.';
    }),
    restore,
    button('Print', () => persistence.print(grid)),
  );
  controls.append(options, actions);
  root.append(controls, status, toolbar, grid);
  parent.appendChild(root);
  applyProject();
  defineGanttToolbar(toolbar, {
    grid,
    columns: SHOWCASE_TOOLBAR_COLUMNS,
    controls: { baseline: true, calendars: true },
  });
  return () => {
    toolbar.textContent = '';
    grid.remove();
    root.remove();
  };
}

These helpers package common grid-side Gantt work without coupling your application to internal timeline layout data.

The application recipes below live in the examples source browser. Copy their recipes/ files beside your code before using the relative imports; they are maintained examples rather than published Gantt exports.

import {
  createGanttColumnPreset,
  createGanttContextMenuExtensionItems,
  createTaskStatusIndicators,
  mapGanttRowsToExcelExport,
} from '@revolist/gantt';
import {
  createGanttExcelExportRecipe,
  createGanttPdfExcelReportingRecipe,
  createGanttTaskStatusIndicatorRecipe,
} from './recipes/grid-projection-examples';

Gantt Excel Export Mapping

Section titled “Gantt Excel Export Mapping”

Use mapGanttRowsToExcelExport() when exporting projected task rows. The mapper uses an allowlist of user-facing fields and skips renderer-only timeline metadata.

const rows = mapGanttRowsToExcelExport(taskRows, project, {
  includeResourceRows: false,
});


downloadWorkbook({
  sheetName: project.name,
  rows,
});

For shells that prefer a recipe object:

const recipe = createGanttExcelExportRecipe({
  rows: taskRows,
  project,
});


downloadWorkbook({
  fields: recipe.fieldNames,
  rows: recipe.rows,
});

PDF And Excel Reporting

Section titled “PDF And Excel Reporting”

Use the combined reporting recipe when your app has separate toolbar buttons for stakeholder PDF reports and spreadsheet handoff. PDF uses the browser print dialog, so users can choose Save as PDF. Excel dispatches the Pro export-excel event, so include ExportExcelPlugin with the grid plugins.

import { GanttPlugin } from '@revolist/gantt';
import { createGanttPdfExcelReportingRecipe } from './recipes/grid-projection-examples';
import { ExportExcelPlugin } from '@revolist/revogrid-pro';


const grid = document.querySelector<HTMLRevoGridElement>('revo-grid');
const host = document.querySelector<HTMLElement>('#gantt-report');


if (!grid || !host) {
  throw new Error('Gantt report target was not found');
}


grid.plugins = [GanttPlugin, ExportExcelPlugin];
grid.gantt = project;


const reportRange = {
  startDate: '2026-05-01',
  endDate: '2026-05-31',
};


const reporting = createGanttPdfExcelReportingRecipe({
  grid,
  target: host,
  document,
  window,
  excel: {
    workbookName: `${project.name}.xlsx`,
  },
});


pdfButton.addEventListener('click', () => {
  const result = reporting.exportPdf(project, reportRange);


  if (!result.ok) {
    showExportError(result.reason);
  }
});


excelButton.addEventListener('click', () => {
  reporting.exportExcel({
    sheetName: 'Tasks',
  });
});

For a single “export report” action, call both commands together:

const result = reporting.exportReport(project, {
  range: { label: 'Executive status report' },
  excel: { sheetName: 'Task register' },
});


if (!result.pdf.ok) {
  showExportError(result.pdf.reason);
}

Column Presets

Section titled “Column Presets”

Column presets group the default Gantt task-table columns into common planning views.

grid.columns = createGanttColumnPreset('schedule');
grid.source = [...taskRows];

Available presets include core, schedule, dependencies, resources, baseline, cost, progress, and all.

Read-Only And Locked Indicators

Section titled “Read-Only And Locked Indicators”

Use indicator helpers to produce labels and class names for custom cell renderers.

const status = createTaskStatusIndicators({
  taskId: row.id,
  projectReadOnly,
  taskLocked: lockedTaskIds.has(row.id),
});


renderIndicatorCell({
  className: status.classNames.join(' '),
  title: status.label,
  indicators: status.indicators,
});

For multiple rows:

const indicatorRows = createGanttTaskStatusIndicatorRecipe({
  rows: taskRows,
  projectReadOnly,
  lockedTaskIds,
});

Context Menu Extensions

Section titled “Context Menu Extensions”

Gantt installs separate RevoGrid Pro row and column context menus. Row menus are task-oriented (Add, Convert to milestone, Indent, Outdent, Delete). Main grid column menus expose search, sort, and filter actions. The pinned Gantt canvas column menu exposes timeline zoom controls.

Use the built-in context-menu helpers with rowContextMenu to add duplicate, assign-resource, export, or custom task actions.

const contextMenuItems = createGanttContextMenuExtensionItems({
  duplicate: {
    copyName: (task) => `${task.name ?? 'Task'} copy`,
  },
  delete: {
    confirm: (context) =>
      window.confirm(`Delete ${context.task?.name ?? 'task'}?`),
    onDeleteTask: (context) => {
      if (context.taskId) {
        deleteTask(context.taskId);
      }
    },
  },
  assignResource: {
    onAssignResource: (context) => {
      if (context.taskId) {
        openResourcePicker(context.taskId);
      }
    },
  },
  export: {
    exportOptions: (context) => ({
      workbookName: 'gantt.xlsx',
      sheetName: context.task?.name ?? 'Gantt',
    }),
  },
});


grid.rowContextMenu = {
  ...grid.rowContextMenu,
  items: [...(grid.rowContextMenu?.items ?? []), ...contextMenuItems],
};

Disable individual items with false.

const exportOnly = createGanttContextMenuExtensionItems({
  duplicate: false,
  delete: false,
  assignResource: false,
  export: { name: 'Export visible Gantt tasks' },
});

When printing a nested container, the recipe keeps its ancestor path visible and hides sibling application content until cleanup. Printing captures the mounted view; virtualized offscreen rows are not expanded automatically.