Task list and hierarchy

A project is easier to navigate when tasks sit under phases. Turn on the task list to show names beside the timeline, then enable hierarchy to make parent tasks summarize their children.

Build a task treeCopy Anchor Link

Set each child's parentId to its parent's id. Use sequence to place the parent before its children.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

const initialTasks: Task[] = [
  { id: 'release', name: 'Release', parentId: null, sequence: '1',
    startDate: '2026-09-01', endDate: '2026-09-18' },
  { id: 'design', name: 'Design', parentId: 'release', sequence: '1.1',
    startDate: '2026-09-01', endDate: '2026-09-08', progress: 100 },
  { id: 'build', name: 'Build', parentId: 'release', sequence: '1.2',
    startDate: '2026-09-08', endDate: '2026-09-18', progress: 40 },
];

export function ProjectChart() {
  const [tasks, setTasks] = useState(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
      showTaskList
      hierarchy
      height={420}
    />
  );
}

showTaskList displays the left pane. hierarchy enables parent summaries and collapse controls. Both are off by default, so enable both for the example above.

Understand parent tasksCopy Anchor Link

A task with children becomes a summary row. Its displayed dates span the earliest child start to the latest child end, including nested descendants.

If the parent has no progress, the chart calculates it from the children's progress, weighted by duration. Set the parent's progress explicitly to use your own value.

Dragging a summary bar moves its descendants together. Summary bars cannot be resized or have their progress dragged. See Editing tasks for drag behavior and Tree helpers for the calculation rules.

sequence still controls row order. With hierarchy on, parentId controls depth; with it off, the dots in sequence provide indentation only. Keep the two fields consistent when preparing task data.

Collapse sectionsCopy Anchor Link

Use defaultCollapsedIds to start with a section closed and let the chart handle later toggles:

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  showTaskList
  hierarchy
  defaultCollapsedIds={['release']}
/>

To save expansion state in your app, use collapsedIds and onCollapsedChange together:

const [collapsedIds, setCollapsedIds] = useState<string[]>(['release']);

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  showTaskList
  hierarchy
  collapsedIds={collapsedIds}
  onCollapsedChange={setCollapsedIds}
/>

The callback receives the complete next list of collapsed ids. When you supply collapsedIds, pass that list back to update the view. Collapsing hides descendants while keeping the parent visible.

Adjust the task listCopy Anchor Link

Add showRowNumbers to display outline numbers such as 1.2 beside names.

Drag the splitter to resize the pane, or double-click it to fit visible task names. The splitter also supports arrow keys and Enter. Width is local state and resets when the chart remounts; there is no width prop or change callback.

The pane shows task names and optional outline numbers. Put additional fields and editors in a detail panel. To let users add tasks from the pane's footer, connect task creation.

Before you integrateCopy Anchor Link

• Use unique ids and valid parent links. Missing parents and cycles are treated as roots for rendering, without correcting your source data.
• Keep summary tasks out of shared lanes. A packed row represents several tasks and does not provide a reliable summary collapse target.
• Collapse controls require hierarchy. Task names are not inline-editable, and the pane has no custom column, sorting, or filtering API.

See GanttProps for prop definitions and Keyboard and screen readers for navigation.