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_config, columns_config, autosize_config.
calendars	Calendar[]	An array of work calendars. Example: Working Calendars.
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.
groupTasks	GroupConfig | boolean | null	Grouping configuration object or false/null to disable grouping (see Grouping Tasks .).
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.
htmlTemplatePolicy	HtmlTemplatePolicy	Controls how string values returned from template functions are rendered. "basic-sanitize" (default) allowlist-sanitizes the returned HTML: safe formatting, classes, limited inline styles, data-* attributes and img are kept, while scripts, event handlers and dangerous URLs are removed. "escape" renders the string as text; "unsafe-html" renders the raw string (pre-v10 behavior); a custom sanitizer object (mode: "sanitize" with a sanitize(html) function) lets you plug in a library such as DOMPurify. For per-template control, wrap individual template functions with the exported allowRawHTML() helper. See Migration notes.
(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.

Type Exports

The @dhx/react-gantt package re-exports several TypeScript types that you can use to annotate your application code:

Export	Description
Task	Internal Gantt task object. Dates are Date objects; includes $-prefixed system properties. Use inside event handlers and when working with data that Gantt owns.
Link	Internal Gantt link object. Use inside event handlers and when working with data that Gantt owns.
SerializedTask	User-facing task shape for store state, initial data, and save callback payloads. Date properties accept Date | string.
SerializedLink	User-facing link shape for store state, initial data, and save callback payloads.

When to use SerializedTask / SerializedLink vs Task / Link:

• SerializedTask / SerializedLink - for data you own: store state, API responses, initial data literals. Date fields accept strings (e.g. ISO dates).
• Task / Link - for data Gantt owns: inside event handlers, after Gantt parses the data. Date fields are Date objects. Task includes $-prefixed internal properties.

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 provides hooks for event subscriptions, resource management, datastore access, undo/redo, zoom, selection, and work time calculations.

See the dedicated Hooks page for the complete reference, including:

• useGanttEvent - event subscriptions with lifecycle management
• useResourceAssignments - resource assignment queries and mutations
• useGanttDatastore - read-only datastore access
• useUndoRedo - undo/redo state and actions
• useZoom - zoom control and state
• useSelection - task selection tracking
• useWorkTime - work time calculations

Direct access to Gantt instance with ref

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

import { 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;
    gantt.showDate(new Date());
  }, []);

  return <ReactGantt ref={ganttRef} tasks={tasks} links={links} />;
}

note

If you alter tasks or links via the direct Gantt instance while also feeding them as React props, keep them in sync. Otherwise, the next React re-render may overwrite your manual changes.

See Accessing the Underlying Gantt API for more details.