React Gantt Quick-Start
Starter project showing how to use DHTMLX React Gantt in a React App.
Related tutorial: https://docs.dhtmlx.com/gantt/integrations/react/quick-start/
How to start
Online
On the local host
Clone the repo and run
git clone https://github.com/dhtmlx/react-gantt-quick-start.git
cd react-gantt-quick-start
yarn
yarn start
Code example
The component allows simple declarative initialization:
import { useRef } from 'react';
import Gantt, { ReactGanttRef, Task, Link, GanttConfig } from '@dhtmlx/trial-react-gantt';
import "@dhtmlx/trial-react-gantt/dist/react-gantt.css";
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: string, action: string, data: any, id: string|number) => {
console.log(`${entity} - ${action} - ${id}`, data);
}
}}
/>
);
}
Check the Online documentation to find more.
Project structure
src/
components/Gantt
Gantt.tsx <- <GanttChart /> component
demoData.ts <- minimal task/link arrays
App.tsx <- mounts Gantt
main.tsx
public/
index.html
Want full-featured examples?
Start your 30-day trial to download the complete sample pack (auto-scheduling, resource histogram, Redux integration, etc.).
License
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.