Using DHTMLX Gantt Properties in ReactGantt

This page describes the props accepted by React Gantt and how they map to DHTMLX Gantt features.

Available Props

Prop	Type	Description
tasks	Task[]	An array of task objects.
links	Link[]	An array of link objects.
templates	GanttTemplates	Overrides gantt.templates, for example: tasktext, taskclass, scalecellclass.
config	GanttConfig	Merged into gantt.config, for example: scalesconfig, columnsconfig, autosize_config.
resources	Resource[]	An array of resource objects.
baselines	Baseline[]	An array of baseline objects.
markers	Marker[]	An array of marker objects for timeline markers.
plugins	GanttPlugins	Gantt extensions that need to be activated (for example: criticalpath, autoscheduling).
data	( load?: string, save?: string	RouterFunction, batchSave?: BatchChanges)
locale	string	Sets gantt.i18n.setLocale(locale). Defaults to “en”.
theme	string	Applies gantt.setSkin(theme). Defaults to “terrace”.
customLightbox	ReactElement	null
inlineEditors	( [editorType: string]: React.ComponentType )	Allows mapping your React-based inline editors to DHTMLX’s inline editor interface.
groupTasks	GroupConfig	boolean
filter	((task: Task) => boolean)	null
resourceFilter	((resource: Resource) => boolean)	null
modals	GanttModals	Allows replacing onBeforeTaskDelete and onBeforeLinkDelete modals with custom components.
(Event Props)	Function	The wrapper also supports passing event handler props that correspond to DHTMLX Gantt events. For example, onTaskClick, onAfterTaskAdd, etc. If the prop name matches the event name, it’s attached automatically.

Example Usage

<ReactGantt
 tasks={tasks}
 links={links}
 theme="material"
 locale="en"
 config={{
    scales: [
     { unit: "year", step: 1, format: "%Y" },
     { unit: "month", step: 1, format: "%M" }
    ],
    columns: [
     { name: "text", tree: true, width: '*' },
     { name: "start_date", align: "center" },
     { name: "duration", align: "center" },
     { name: "add" }
    ],
    // any other gantt.config you want
 }}
 onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true;
 }}
 templates={{
    task_text: (start, end, task) => #${task.id}: ${task.text},
 }}
/>

Using Event Props

You can pass any DHTMLX Gantt event as a prop. For example:

<ReactGantt
 onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true;
 }}
/>

Internally, the wrapper calls gantt.attachEvent(“onBeforeTaskAdd”, handler) if you pass a prop named onBeforeTaskAdd. For a full event list, see DHTMLX Gantt API.

Combining Props and the DHTMLX API

The @dhx/react-gantt library is designed to be as declarative as possible for day-to-day usage - most use cases can be addressed through the standard props (such as tasks, links, resources, templates, etc.). However, there may be scenarios where you need a deeper access to the Gantt engine. For example, for:

Worktime calculations
Auto scheduling logic or advanced features like resource computations
Calling any of specialized methods of the Gantt API In these cases, you can use two additional approaches to tap into the underlying DHTMLX Gantt functionality:
React hooks specifically provided by the wrapper to bridge Gantt’s data stores and scheduling logic
Direct access to the Gantt instance via a if the built-in hooks don’t cover all your needs

Using built-in hooks

The @dhx/react-gantt library exposes a set of optional hooks that connect React components to internal Gantt APIs. These hooks provide a ‘bridge’ to Gantt’s underlying methods and data stores. You can either call these hooks directly in your components or compose them into your own custom hooks for specialized features like resource histograms.

useGanttDatastore<T>(ganttRef, storeName)

The useGanttDatastore hook hives a read-only access to a specific Gantt datastore. The common use is accessing the resource datastore, baseline, or any other built-in or custom store. It provides the following functions:

getItem(id) - returns a specified item from the datastore
getItems() - returns all items in the specified datastore
hasChild(id: string | number) - checks if an item has children
getChildren(id: string | number) - retrieves child items

import { useMemo } from 'react';
import { useGanttDatastore } from '@dhx/react-gantt';
function MyResourceList({ ganttRef }) {
 const resourceStore = useGanttDatastore(ganttRef, 'resource');
 const resourceIds = resourceStore.getItems().map(item => item.id);
 // for demonstration, just log the data
 useMemo(() => {
    console.log('Resource IDs:', resourceIds);
 }, [resourceIds]);
 return null;
}

You can use this hook whenever you need direct low-level data from a specific datastore. For example, checking if a resource is a group vs. an individual.

Using DHTMLX Gantt Properties in ReactGantt