JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 339
  • Score
    100M100P100Q106822F
  • License SEE LICENSE IN license.txt

DHTMLX Gantt for React

Package Exports

  • @dhtmlx/trial-react-gantt
  • @dhtmlx/trial-react-gantt/dist/dhtmlxgantt.react.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dhtmlx/trial-react-gantt) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DHTMLX React Gantt

dhtmlx.com npm: v.9.1.4 License: Evaluation

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

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.4 Professional Evaluation

This software is covered by DHTMLX Evaluation License. Contact sales@dhtmlx.com to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software

Follow us