跳到主要内容

Quick Start with React Gantt

注释

This tutorial covers the React wrapper included in the Commercial, Enterprise, and Ultimate editions of DHTMLX Gantt. If you are using the Individual or GPL edition, follow the alternative guide: How to Start with React.

The React Gantt component is the official wrapper for DHTMLX Gantt. This guide walks you through creating a small React application and rendering a basic Gantt chart using the trial package.

If you're new to React, start with the official React documentation. Check a complete working project that follows this tutorial on GitHub.

Version requirements​

  • React 18 or newer

Creating a new React project​

To create a React project and go to the project directory, run the following commands:

npm create vite@latest react-gantt-quick-start -- --template react-ts
cd react-gantt-quick-start

Installing React Gantt​

Install React Gantt as described in Installation.

In this tutorial we use the evaluation package:

npm install @dhtmlx/trial-react-gantt

or

yarn add @dhtmlx/trial-react-gantt

If you already use the Professional package, replace @dhtmlx/trial-react-gantt with @dhx/react-gantt in the commands and imports.

Adding demo data​

We'll use static data for this example. Create a file named src/demoData.ts:

import type { Task, Link } from '@dhtmlx/trial-react-gantt';

export const tasks: Task[] = [
  { id: 1, text: "Office itinerancy", type: "project", start_date: new Date(2025, 3, 2), duration: 17, progress: 0.4, parent: 0, open: true },
  ...
];

export const links: Link[] = [
  { id: 2, source: 2, target: 3, type: "0" },
  ...
];

Creating a Gantt component​

To add a Gantt component, create an src/components/Gantt/Gantt.tsx file with the following content:

import Gantt, {
  ReactGanttRef,
  Task,
  Link,
  GanttConfig
} from '@dhtmlx/trial-react-gantt';

import '@dhtmlx/trial-react-gantt/dist/react-gantt.css';
import { useRef } from 'react';

export interface GanttProps {
  tasks: Task[];
  links: Link[];
}

export default function GanttChart({ tasks, links }: GanttProps) {
  const ganttRef = useRef<ReactGanttRef>(null);

  const config: GanttConfig = {
    grid_width: 500,
    scale_height: 90,
    scales: [
      { unit: "year", step: 1, date: "%Y" },
      { unit: "month", step: 1, date: "%M" },
      { unit: "day", step: 1, date: "%d %M" }
    ]
  };

  return (
    <Gantt
      ref={ganttRef}
      tasks={tasks}
      links={links}
      config={config}
      data={{
        save: (entity, action, data, id) => {
          console.log(`${entity} - ${action} - ${id}`, data);
        }
      }}
    />
  );
}

Rendering Gantt in the App​

To display Gantt, replace the code of src/App.tsx with the following one:

import GanttChart from './components/Gantt/Gantt';
import { tasks, links } from './demoData';

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <GanttChart tasks={tasks} links={links} />
    </div>
  );
}

After that, run the app using the command below:

npm run dev

At this point, you have a fully working React + DHTMLX Gantt application.

This setup represents the minimum configuration needed to:

  • render a Gantt chart
  • display tasks and links
  • apply a basic scale configuration
  • attach the Gantt instance via a React ref
  • receive events through the data.save callback

This is the same minimal example used in the GitHub demo project.

From here, you can continue by adding more advanced features:

  • syncing data with React state
  • loading/saving data from your backend
  • adding templates and custom renderers
  • enabling plugins (auto-scheduling, critical path)
  • adding resources, calendars, or grouping

The next sections introduce these capabilities one by one.

Using React state as the source of truth​

(recommended for most React apps)

In real applications tasks and links usually come from the React state. Below is a complete example where Gantt sends changes back to React via the data.save callback.

import { useState } from "react";
import Gantt from "@dhtmlx/trial-react-gantt";
import "@dhtmlx/trial-react-gantt/dist/react-gantt.css";
import { tasks as initialTasks, links as initialLinks } from "./demoData";

export default function App() {
  const [tasks, setTasks] = useState(initialTasks);
  const [links, setLinks] = useState(initialLinks);

  return (
    <div style={{ height: "100vh" }}>
      <Gantt
        tasks={tasks}
        links={links}
        data={{
          save: (entity, action, item, id) => {
            if (entity === "task") {
              if (action === "create") setTasks(tasks => [...tasks, item]);
              if (action === "update") setTasks(tasks => tasks.map(x => x.id === id ? item : x));
              if (action === "delete") setTasks(tasks => tasks.filter(x => x.id !== id));
            }
            if (entity === "link") {
              if (action === "create") setLinks(links => [...links, item]);
              if (action === "update") setLinks(links => links.map(x => x.id === id ? item : x));
              if (action === "delete") setLinks(links => links.filter(x => x.id !== id));
            }
          }
        }}
      />
    </div>
  );
}

Why choose this mode​

  • React always sees the same data as the Gantt UI
  • Works perfectly with Redux / Zustand / Jotai / MobX
  • Easy to sync with backend APIs

Alternative Mode: Gantt as the source of truth​

(useful for very large datasets or heavy auto-scheduling)

In this mode React does not own tasks/links.

<Gantt
  data={{
    load: "/api/gantt-data",
    save: "/api/gantt-data"
  }}
/>

When to prefer this mode​

  • Tens of thousands of tasks
  • Many auto-scheduling updates
  • You want minimal React rendering overhead

Using Templates​

(return React elements from template functions)

Templates allow customizing almost every part of the chart.

const templates = {
  task_text: (start, end, task) => (
    <span style={{ color: "red" }}>#{task.id}: {task.text}</span>
  )
};

<Gantt templates={templates} />

More details​

See the full section here: React Gantt Templates Documentation.

GitHub demo repository​

A complete working project that follows this tutorial is provided on GitHub.

Next steps​