React Gantt Chart With Custom Column Templates And Toolbar

A React sample repository demonstrating the Syncfusion React Gantt Chart component with custom column templates, resource rendering, and toolbar-based interactions.

Repository description

This repository provides a React example that showcases a Syncfusion Gantt Chart configured with custom resource column templates, header templates, and toolbar actions for controlling filtering and task presentation.

Project Overview

The sample focuses on extending the default Gantt chart behavior by customizing how resource information is displayed within columns and by handling toolbar actions programmatically. It highlights how template support and toolbar events can be used together to control filtering and task visibility in a structured project timeline.

Features

• Custom Resources column template
• Custom Resources header template
• Built-in toolbar actions such as CollapseAll and ExpandAll
• Custom toolbar actions for filtering and clearing filters
• Programmatic filtering triggered through toolbar events
• Support for nested tasks, dependencies, and resource assignment

Getting Started

Prerequisites

• Node.js (LTS or later)
• npm

Install

npm install

Run

npm start

Open http://localhost:3000.

Notes

• The sample renders a GanttComponent configured with taskFields mapping.
• Column customization is implemented using template and headerTemplate.
• Toolbar click handlers apply and clear filters dynamically.
• Resource images are loaded from a public Syncfusion demo CDN for display purposes.