Starter project showing how to use DHTMLX React Gantt in a React App.
Related tutorial: https://docs.dhtmlx.com/gantt/integrations/react/quick-start/
Clone the repo and run
git clone https://github.com/dhtmlx/react-gantt-quick-start.git
cd react-gantt-quick-start
yarn
yarn startThe component allows simple declarative initialization:
import{useRef}from'react';importGantt,{ReactGanttRef,Task,Link,GanttConfig}from'@dhtmlx/trial-react-gantt';import"@dhtmlx/trial-react-gantt/dist/react-gantt.css";exportinterfaceGanttProps{tasks: Task[];links: Link[];}exportdefaultfunctionGanttChart({ tasks, links }: GanttProps){constganttRef=useRef<ReactGanttRef>(null);constconfig: 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(<Ganttref={ganttRef}tasks={tasks}links={links}config={config}data={{save: (entity: string,action: string,data: any,id: string|number)=>{console.log(`${entity} - ${action} - ${id}`,data);}}}/>);}Check the Online documentation to find more.
src/
components/Gantt
Gantt.tsx <- <GanttChart /> component
demoData.ts <- minimal task/link arrays
App.tsx <- mounts Gantt
main.tsx
public/
index.html
Start your 30-day trial to download the complete sample pack (auto-scheduling, resource histogram, Redux integration, etc.).
The code in this repository is released under the MIT License.
@dhx/react-gantt and @dhtmlx/trial-react-gantt are commercial libraries - use them under a valid license or evaluation agreement.