Starter project showing how to use DHTMLX React Gantt in a React App.
Note, @dhx/react-gantt and @dhx/trial-react-gantt are hosted on a private Npm registry. You need to configure your npm client and request access to them.
-
Start a trial to gain access to @dhx npm registry and follow the provided instructions for npm configuration.
-
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';
import Gantt, { ReactGanttRef, Task, Link, GanttConfig } from '@dhx/trial-react-gantt';
import "@dhx/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.
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 @dhx/trial-react-gantt are commercial libraries - use them under a valid license or evaluation agreement.