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: task_text, task_class, scale_cell_class.
config	GanttConfig	Merged into gantt.config, for example: scales, columns, autosize.
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: critical_path, auto_scheduling).
data	{ load?: string, save?: string|RouterFunction, batchSave?: BatchChanges}	Allows loading data via the built-in Gantt transport and provides callbacks for changes made to Gantt data.
locale	string	Sets gantt.i18n.setLocale(locale). Defaults to "en".
theme	string	Applies gantt.setSkin(theme). Defaults to "terrace".
customLightbox	ReactElement | null	A React component that replaces the built-in Lightbox (see Custom Lightbox.)
inlineEditors	{ [editorType: string]: React.ComponentType }	Allows mapping your React-based inline editors to DHTMLX's inline editor interface.
filter	((task: Task) => boolean) | null	A function used to filter Gantt tasks.
resourceFilter	((resource: Resource) => boolean) | null	A function used to filter resources for the Resource Panel.
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 ref 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(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.

useResourceAssignments(ganttRef)

The useResourceAssignments hook exposes Gantt's resource-related methods, such as retrieving assignments for a resource or enumerating which resources are assigned to a given task.

It provides the following functions:

• getResourceAssignments(resourceId, taskId?) - bridge to getResourceAssignments
• getTaskResources(taskId) - bridge to getTaskResources

import React from 'react';
import { useResourceAssignments } from '@dhx/react-gantt';
 
export function ResourceUsage({ ganttRef, taskId }) {
  const { getTaskResources } = useResourceAssignments(ganttRef);
 
  const resources = getTaskResources(taskId);
  return (
    <div>
      Task {taskId} assigned to: 
      {resources.map(r => r.text).join(', ')}
    </div>
  );
}

You may need this hook for any custom logic around resource usage, e.g., calculating allocated hours or grouping tasks by owner

useWorkTime(ganttRef)

Provides a direct bridge for built-in DHTMLX Gantt worktime functions, such as isWorkTime, calculateEndDate, calculateDuration.

You'll need this hook for highlighting working/non-working time according to Gantt work calendar settings, as well as for date operations in accordance to work calendars.

It provides the following functions:

• isWorkTime({ date:Date, unit?: string, task?:Task }) - bridge to isWorkTime
• calculateEndDate({start:Date, duration:number, unit?: string, task?: Task}) - bridge to calculateEndDate
• calculateDuration({start:Date, end:Date, task?: Task}) - bridge to calculateDuration
• getClosestWorkTime({ date:Date, unit?: string, task?: Task, dir?: "past"|"future" }) - bridge to getClosestWorkTime

import { useEffect, useRef, useState } from 'react';
import ReactGantt, {GanttTemplates, useWorkTime} from "@dhx/react-gantt";
import "@dhx/react-gantt/dist/react-gantt.css";
 
export default function GanttTemplatesDemo() {
  const ganttRef = useRef<ReactGanttRef>(null);
 
  const { isWorkTime }= useWorkTime(ganttRef);
  ...
  const templates: GanttTemplates = {
    timeline_cell_class: (task: Task, date: Date) => {
      return isWorkTime({date, task}) ? "" : "weekend";
    }
  };
  ...

Composing hooks into your own custom hooks

A great practice is to build your own domain or project-specific hooks using these fundamental bridging hooks. For instance, if you want to create a resource histogram, you might create a custom hook that caches capacity values, sums resource usage, etc.:

import { useMemo } from 'react';
import { useGanttDatastore, useResourceAssignments } from '@dhx/react-gantt';
 
export function useResourceHistogram(ganttRef) {
  const resourceStore = useGanttDatastore(ganttRef, 'resource');
  const { getResourceAssignments } = useResourceAssignments(ganttRef);
 
  // Custom logic: capacity caching, group detection, etc.
  // ...
  return {
    // e.g. getCapacity, getAllocatedValue
  };
}

Direct access to Gantt instance with ref

While these hooks handle most advanced needs, you might still want direct access to the entire Gantt instance. For that, the ref approach remains available:

import React, { useRef, useEffect } from 'react';
import ReactGantt, { ReactGanttRef } from '@dhx/react-gantt';
 
export function DirectRefExample({ tasks, links }) {
  const ganttRef = useRef<ReactGanttRef>(null);
 
  useEffect(() => {
    const gantt = ganttRef.current?.instance;
    if (!gantt) return;
 
    // here you can call ANY Gantt API method
    console.log('All tasks:', gantt.getTaskByTime());
    gantt.showDate(new Date());
  }, []);
 
  return (
    <ReactGantt
      ref={ganttRef}
      tasks={tasks}
      links={links}
    />
  );
}

Be mindful that if you alter tasks/links in the direct Gantt instance while also feeding them as React props, you should keep them in sync or re-parse the data. Otherwise, the next React re-rendering may overwrite your manual changes.

If you want to do something not exposed by a prop, you can still call gantt methods directly. See Accessing the Underlying Gantt API for more details.

Back to top