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.xor newer
Complete guides
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.10.0.3 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