SVAR React Gantt

SVAR React Gantt is available in two editions:

Core Edition (Open Source)

Includes essential features for task visualization and interaction:

• Task and dependency visualization
• Interactive timeline with drag-and-drop
• Hierarchical view of subtasks
• Configurable time scales (hours, days, weeks, sprints, or stages)
• Virtualization for large datasets (handles thousands of tasks)
• Zooming, hotkeys, and localization

PRO Edition

Includes advanced automation and project management logic:

• Calendars: Work-time calendars (non-linear), individual task/resource calendars.
• Project Logic: Critical path, Slack (float) visualization, Baselines, and Auto-scheduling (forward mode/Finish-to-Start).
• Resource Management: Resource planning and workload visualization.
• Task Management: Task grouping, Summary task automation, Rollups, Split tasks, and WBS codes.
• Advanced UI/UX: Vertical markers, Undo/redo.
• Export/Import: PNG, PDF, Excel, and MS Project formats.

To use the SVAR React Gantt chart in your project, install the @svar-ui/react-gantt package. You must import both the Gantt component and the required CSS file (@svar-ui/react-gantt/all.css) to ensure the component renders correctly.

Pass an array of task objects to the tasks prop of the <Gantt /> component. Each task object can include properties such as id, text, start, end, duration, progress, type (e.g., 'task' or 'summary'), and parent for hierarchical structures.

import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

export default function MyComponent() {
  const tasks = [
    {
      id: 20,
      text: 'New Task',
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: 'task',
      lazy: false,
    },
    {
      id: 47,
      text: '[1] Master project',
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: 'summary',
    },
  ];

  return <Gantt tasks={tasks} />;
}

Several specialized components are provided to interact with the Gantt chart's state via the IApi instance. Most of these components accept an api prop to connect to the chart's internal store.

• HeaderMenu: A menu component for header-level actions.
• ContextMenu: A menu component for right-click context actions.
• Toolbar: A component for displaying action buttons.
• Editor: A component for managing data editing.
• Tooltip: A wrapper for custom tooltips. The content prop accepts a function receiving api and data (which can be a task, link, rollup, or resource).
• ResourceLoad: A component to display resource loading/allocation. It supports mode ('grid' | 'chart') and a template function for custom string rendering.

// Example: Using a Toolbar with the Gantt API
const ganttRef = useRef<IApi>(null);

<Gantt ref={ganttRef} />
<Toolbar api={ganttRef.current} />

The Gantt component is the primary entry point for the library. It accepts several configuration props to define columns, custom task rendering, and visual styles. It also exposes an init method to initialize the API and supports event listeners for store actions via the GanttActions pattern (e.g., if a method is named task-added, the event prop is onTaskAdded).

Key props:

• columns: An array of IColumnConfig objects to define the chart's columns.
• taskTemplate: A functional component for custom task rendering. It receives data (the ITask), api (the IApi instance), and an onaction callback.
• readonly: Boolean to enable/disable chart interactions.
• cellBorders: Set to 'column' or 'full' to control border visibility.
• highlightTime: A function (date: Date, unit: 'day' | 'hour') => string to apply custom styling to time segments.
• init: A function (api: IApi) => void used to capture the API instance.

The component also supports a ref to access the IApi directly.

import { Gantt } from '@svar-ui/react-gantt';

// Example usage with custom task template and columns
<Gantt
  columns={[
    { header: 'Task Name', cell: 'name' },
    { header: 'Start Date', cell: 'start' }
  ]}
  taskTemplate={({ data, api, onaction }) => (
    <div onClick={() => onaction({ action: 'click', data: { id: data.id } })}>
      {data.name}
    </div>
  )}
  onTaskAdded={(task) => console.log('New task:', task)}
/>