DHTMLX React Gantt

Getting started | Features | License | Useful links | Follow us

DHTMLX React Gantt is a React wrapper for the DHTMLX Gantt library.

It provides a declarative way to integrate all of DHTMLX Gantt's rich project scheduling features - such as tasks, dependencies, auto-scheduling, and resource management - directly into React apps. By combining React's component-based workflow with DHTMLX Gantt's robust JavaScript engine, this library delivers a seamless experience for building interactive Gantt charts in modern React projects.

Important: this npm package is a trial build intended for evaluation only. For access to commercial licenses and technical support, please request an evaluation on our website: https://dhtmlx.com/docs/products/dhtmlxGantt-for-React/download.shtml

Getting started

Install package

Professional Evaluation version:

npm install @dhtmlx/trial-react-gantt

And initialize:

import { useState } from 'react';
import ReactGantt from '@dhtmlx/trial-react-gantt';
import '@dhtmlx/trial-react-gantt/dist/react-gantt.css';
import { demoData } from './DemoData'

export default function BasicGantt() {
  const [theme, setTheme] = useState("terrace");
  const [tasks, setTasks] = useState(demoData.tasks);
  const [links, setLinks] = useState(demoData.links);

  return (
    <div style={{ height: '500px' }}>
      <ReactGantt
        tasks={tasks}
        links={links}
        theme={theme}
      />
    </div>
  );
}

demoData is an example tasks/links dataset. Replace it with your own project data.

Requirements

• React 18.x or newer

Complete guides

• https://docs.dhtmlx.com/gantt/web__react.html

Features

• React components in templates of grid cells, headers, timelines
• easy customization with React components
• seamless theming and MUI compatibility
• compatibility with Redux Toolkit
• TypeScript support
• 4 types of tasks linking: finish-to-start, start-to-start, finish-to-finish, start-to-finish
• dragging and dropping multiple tasks horizontally
• multi-task selection
• backward planning
• tasks filtering
• resources filtering
• inline editing
• managing editability/readonly modes of individual tasks
• undo/redo functionality
• configurable columns in the grid
• customizable time scale and task edit form
• progress percent coloring for tasks
• 7 different skins
• online export to PDF, PNG, Excel, iCal, and MS Project
• 32 locales
• keyboard navigation
• resource management
• critical path calculation
• auto scheduling

License

DHTMLX Gantt for React v.9.1.2 Professional Evaluation

This software is covered by DHTMLX Evaluation License. Contact [email protected] to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software

Useful links

• DHTMLX React Gantt product page
• DHTMLX JS Gantt product page
• Official documentation
• Online samples
• Video tutorials
• Export services
• List of available integrations
• Support forum

Follow us

• Read us on Medium

• Follow us on LinkedIn

• Follow us on X

• Like our page on Facebook