Merge pull request #2 from SyncfusionExamples/1021730-readme

1021730: Create and Add a Comprehensive README for EJ2 Gantt Chart Repositories

Author: lokesharjunan

README.md

@@ -1,25 +1,47 @@
-# Customizing Columns using Templates and Adding a Custom Toolbar in React Gantt Chart 
+# React Gantt Chart with Custom Column Templates and Toolbar
 
-A quick-start project that helps you to customize the column header and data in the Gantt Chart using templates. This project also contains a code snippet to add a custom toolbar button in the Gantt Chart. 
+A React sample repository demonstrating the Syncfusion React Gantt Chart component with custom column templates, resource rendering, and toolbar-based interactions.
 
-Documentation: 
+## 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.
 
-Column Template: https://ej2.syncfusion.com/react/documentation/gantt/columns/#column-template
+## Project Overview
 
-Header Template: https://ej2.syncfusion.com/react/documentation/gantt/columns/#custom-column-header
+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.
 
-Toolbar Template: https://ej2.syncfusion.com/react/documentation/gantt/tool-bar/#built-in-and-custom-items-in-toolbar
+## Features
 
-Online examples:
+- 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
 
-Column Template: https://ej2.syncfusion.com/react/demos/#/material/gantt/column-template
+## Getting Started
 
-Header Template: https://ej2.syncfusion.com/react/demos/#/material/gantt/header-template
+### Prerequisites
 
-Toolbar Template: https://ej2.syncfusion.com/react/demos/#/material/gantt/toolbar-template
+- Node.js (LTS or later)
+- npm
 
-## Project prerequisites
-Make sure that you have the latest versions of NodeJS and visual studio code in your machine before starting to work on this project.
+### Install
 
-### How to run this application?
-To run this application, you need to clone the `customizing-columns-using-templates-and-adding-a-custom-toolbar-in-react-gantt-chart` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the npm install command and run your project using the npm start command.
+```bash
+npm install
+```
+
+### Run
+
+```bash
+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.

package.json

@@ -13,7 +13,7 @@
     "@types/react-dom": "^16.9.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
+    "react-scripts": "5.0.1",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4"
   },