Column template in React Gantt Chart Component

12 Jan 202624 minutes to read

The Syncfusion® React Gantt Chart component provides a template option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column.

When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for gantt actions like sorting, filtering, editing unless field property of the column is specified.

Render image in a column

To render an image in a Gantt column, define a template using the template property. This property accepts either an HTML element or a function that returns HTML content.

The following example demonstrates how to render an image for the Resources field to display an image element.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data, ProjectResources } from './datasource';

function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
        resourceInfo: 'resources'
    };
    const splitterSettings = {
        columnIndex: 7
    };
    const resourceFields = {
        id: 'resourceID',
        name: 'resourceName',
    };
    function ganttTemplate(props) {
        var src = props.TaskID + '.png';
        return (<div className='image' >
            <img src={src} style={{ height: '42px' }} />
        </div>);
    };
    const template = ganttTemplate;
    return <GanttComponent dataSource={data} rowHeight={60} taskFields={taskFields}
        splitterSettings={splitterSettings} resourceFields={resourceFields} resources={ProjectResources} height='450px'>
        <ColumnsDirective>
            <ColumnDirective field='TaskID'></ColumnDirective>
            <ColumnDirective field='resources' headerText='Resources' width='250' template={template} textAlign='Center'></ColumnDirective>
            <ColumnDirective field='TaskName'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, SplitterSettings, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data, ProjectResources } from './datasource';

function App() {
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
        resourceInfo: 'resources'
    };
    const splitterSettings: SplitterSettings = {
        columnIndex: 7
    };
    const resourceFields: any = {
        id: 'resourceID',
        name: 'resourceName',
    };
    function ganttTemplate(props: any) {
        var src = props.TaskID + '.png';
        return (<div className='image' >
            <img src={src} style={{ height: '42px' }} />
        </div>);
    };
    const template: any = ganttTemplate;
    return <GanttComponent dataSource={data} rowHeight={60} taskFields={taskFields}
        splitterSettings={splitterSettings} resourceFields={resourceFields} resources={ProjectResources} height='450px'>
        <ColumnsDirective>
            <ColumnDirective field='TaskID'></ColumnDirective>
            <ColumnDirective field='resources' headerText='Resources' width='250' template={template} textAlign='Center'></ColumnDirective>
            <ColumnDirective field='TaskName'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

The template option allows to define any HTML content within a column.

The Gantt Chart component supports hyperlink columns and allows routing on click using the template property. This is useful for displaying data that links to another page or website.

To configure a hyperlink column, define a template for the column and use an tag inside it. The onClick handler is triggered when the hyperlink is clicked.

The example below demonstrates how to render a hyperlink for the TaskName field.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID',
  };
  const splitterSettings = {
    columnIndex: 7
  };

  const ganttTemplate = (props) => {
    const handleClick = (event) => {
      event.preventDefault();
      const baseUrl = 'https://www.meaningofthename.com/';
      const searchUrl = `${baseUrl}${encodeURIComponent(props.TaskName)}`;
      window.open(searchUrl, '_blank');
    };
    return (<a href="#" onClick={handleClick}>{props.TaskName}</a>
    );
  };

  const template = ganttTemplate;
  return <GanttComponent dataSource={data} rowHeight={60} taskFields={taskFields} splitterSettings={splitterSettings} height='450px'>
    <ColumnsDirective>
      <ColumnDirective field='TaskID'></ColumnDirective>
      <ColumnDirective field='TaskName' template={template}></ColumnDirective>
      <ColumnDirective field='StartDate'></ColumnDirective>
      <ColumnDirective field='Duration'></ColumnDirective>
      <ColumnDirective field='Progress'></ColumnDirective>
    </ColumnsDirective>
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, SplitterSettings, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID',
    resourceInfo: 'resources'
  };
  const splitterSettings: SplitterSettings = {
    columnIndex: 7
  };
  const ganttTemplate = (props: any) => {
    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
      event.preventDefault();
      const baseUrl = 'https://www.meaningofthename.com/';
      const searchUrl = `${baseUrl}${encodeURIComponent(props.TaskName)}`;
      window.open(searchUrl, '_blank');
    };
    return (<a href="#" onClick={handleClick}>{props.TaskName}</a>
    );
  };

  const template: any = ganttTemplate;
  return <GanttComponent dataSource={data} rowHeight={60} taskFields={taskFields} splitterSettings={splitterSettings} height='450px'>
    <ColumnsDirective>
      <ColumnDirective field='TaskID'></ColumnDirective>
      <ColumnDirective field='TaskName' template={template}></ColumnDirective>
      <ColumnDirective field='StartDate'></ColumnDirective>
      <ColumnDirective field='Duration'></ColumnDirective>
      <ColumnDirective field='Progress'></ColumnDirective>
    </ColumnsDirective>
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

The window.open() method is a built-in JavaScript function that opens a new browser window or tab with the specified URL.

Render other components in a column

The column template has options to render a custom component in a gantt column instead of a field value.

Render LineChart component in a column

The LineChart component from Syncfusion® offers a clear and effective way to visualize and compare data trends over time using connected data points. It can be integrated into a Gantt column by configuring the template property in the column configuration.

The following example demonstrates how to render a LineChart for the customData field.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID',
    customData: 'customData'
  };

  const splitterSettings = {
    position: '75%'
  };

  const lineData = [
    [0, 6, -4, 1, -3, 2, 5],
    [5, -4, 6, 3, -1, 2, 0],
    [6, 4, 0, 3, -2, 5, 1],
    [4, -6, 3, 0, 1, -2, 5],
    [3, 5, -6, -4, 0, 1, 2],
    [1, -3, 4, -2, 5, 0, 6],
    [2, 4, 0, -3, 5, -6, 1],
    [5, 4, -6, 3, 1, -2, 0],
    [0, -6, 4, 1, -3, 2, 5],
    [6, 4, 0, -3, 2, -5, 1]
  ];

  const sparklineTemplate = (props) => {
    const index = props.TaskID - 1;
    return (
      <SparklineComponent
        id={`spark-${props.TaskID}`}
        height="50px"
        width="100%"
        type="Line"
        lineWidth={2}
        valueType="Numeric"
        fill="#3C78EF"
        dataSource={lineData[index]}
      />
    );
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="customData" headerText="Custom Data" width="280" template={sparklineTemplate} />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID',
    customData: 'customData'
  };

  const splitterSettings: SplitterSettingsModel = {
    position: '75%'
  };

  const lineData: number[][] = [
    [0, 6, -4, 1, -3, 2, 5],
    [5, -4, 6, 3, -1, 2, 0],
    [6, 4, 0, 3, -2, 5, 1],
    [4, -6, 3, 0, 1, -2, 5],
    [3, 5, -6, -4, 0, 1, 2],
    [1, -3, 4, -2, 5, 0, 6],
    [2, 4, 0, -3, 5, -6, 1],
    [5, 4, -6, 3, 1, -2, 0],
    [0, -6, 4, 1, -3, 2, 5],
    [6, 4, 0, -3, 2, -5, 1]
  ];

  const sparklineTemplate = (props: any) => {
    const index = props.TaskID - 1;
    return (
      <SparklineComponent
        id={`spark-${props.TaskID}`}
        height="50px"
        width="100%"
        type="Line"
        lineWidth={2}
        valueType="Numeric"
        fill="#3C78EF"
        dataSource={lineData[index]}
      />
    );
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="customData" headerText="Custom Data" width="280" template={sparklineTemplate} />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Render ColorPicker component in a column

The Syncfusion® ColorPicker component offers a user-friendly interface for selecting colors from a predefined palette or custom options. It is useful in scenarios like theme selection or dynamic element styling.

To render the ColorPicker inside a Gantt column, configure the template property in the column definition.

The following example demonstrates how to render a ColorPicker for the Change color column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import { data } from './datasource';

function App() {
  let ganttInstance;

  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = {
    position: '75%'
  };

  const modeSettings = 'Palette';

  const changeColor = (args) => {
    const selectedRows = ganttInstance.treeGrid.getSelectedRows();
    for (const row of selectedRows) {
      row.style.backgroundColor = args.value;
    }
    ganttInstance.clearSelection();
  };

  const colorPickerTemplate = () => {
    return (
      <div className="colorpicker">
        <ColorPickerComponent
          id="color-picker"
          mode={modeSettings}
          change={changeColor}
        />
      </div>
    );
  };

  return (
    <GanttComponent
      ref={(gantt) => (ganttInstance = gantt)}
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Change" headerText="Change Color" width="120" textAlign="Center" template={colorPickerTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject services={[Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection,TaskFieldsModel, SplitterSettingsModel, } from '@syncfusion/ej2-react-gantt';
import { ColorPickerComponent, ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent;

  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: SplitterSettingsModel = {
    position: '75%'
  };

  const modeSettings = 'Palette';

  const changeColor = (args: ColorPickerEventArgs) => {
    const selectedRows = ganttInstance.treeGrid.getSelectedRows() as HTMLElement[];
    for (const row of selectedRows) {
      row.style.backgroundColor = args.value as string;
    }
    ganttInstance.clearSelection();
  };

  const colorPickerTemplate = () => {
    return (
      <div className="colorpicker">
        <ColorPickerComponent
          id="color-picker"
          mode={modeSettings}
          change={changeColor}
        />
      </div>
    );
  };

  return (
    <GanttComponent
      ref={(gantt) => (ganttInstance = gantt!)}
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Change" headerText="Change Color" width="120" textAlign="Center" template={colorPickerTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject services={[Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Render DropDownList component in a column

To render a DropDownList component in a Gantt column, define a template using the template property in the column configuration.

The following example demonstrates how to render the DropDownList component in the Task Priority column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    priority: 'Priority',
    parentID: 'ParentID'
  };

  const splitterSettings = {
    position: '75%'
  };

  const dropData = ['High', 'Medium', 'Low'];

  const dropDownTemplate = (props) => {
    return (
      <DropDownListComponent
        value={props.Priority}
        dataSource={dropData}
        width="100"
        popupHeight="150px"
        popupWidth="150px"
      />
    );
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Priority" headerText="Task Priority" width="200" template={dropDownTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    priority: 'Priority',
    parentID: 'ParentID'
  };

  const splitterSettings: SplitterSettingsModel = {
    position: '75%'
  };

  const dropData: string[] = ['High', 'Medium', 'Low'];

  const dropDownTemplate = (props: any) => {
    return (
      <DropDownListComponent
        value={props.Priority}
        dataSource={dropData}
        width="100"
        popupHeight="150px"
        popupWidth="150px"
      />
    );
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Priority" headerText="Task Priority" width="200" template={dropDownTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Render Chip component in a column

The Gantt chart component supports rendering the Syncfusion® Chips component in a column using the template property. This is useful for displaying data that benefits from a chip-style visual representation.

The following example demonstrates how to render the Chips component in the TaskName column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = { position: '75%' };

  const nameTemplate = (props) => (
    <div className="chip">
      <ChipListComponent id="chip" text={props.TaskName} />
    </div>
  );

  return (
    <GanttComponent height="430px" dataSource={data} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" template={nameTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: SplitterSettingsModel = { position: '75%' };

  const nameTemplate = (props: { TaskName: string }): React.ReactElement => (
    <div className="chip">
      <ChipListComponent id="chip" text={props.TaskName} />
    </div>
  );

  return (
    <GanttComponent height="430px" dataSource={data} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" template={nameTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Render RadioButton in a column

The Syncfusion® RadioButton component can be rendered in a grid column to display selection options like order statuses or approval choices.

The following example demonstrates rendering RadioButton components in the Order Status column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttData } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = { position: '75%' };

  const orderStatusTemplate = (props) => (
    <div style=>
      <RadioButtonComponent label="Pending" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Pending'} />
      <RadioButtonComponent label="Confirmed" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Confirmed'} />
      <RadioButtonComponent label="Shipped" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Shipped'} />
    </div>
  );

  return (
    <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
        <ColumnDirective field="OrderStatus" headerText="Order Status" width="180" template={orderStatusTemplate} />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttData } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: SplitterSettingsModel = { position: '75%' };

  const orderStatusTemplate = (props: any): React.ReactElement => (
    <div style=>
      <RadioButtonComponent label="Pending" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Pending'} />
      <RadioButtonComponent label="Confirmed" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Confirmed'} />
      <RadioButtonComponent label="Shipped" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Shipped'} />
    </div>
  );

  return (
    <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
        <ColumnDirective field="OrderStatus" headerText="Order Status" width="180" template={orderStatusTemplate} />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Using condition template

The conditional column template allows rendering elements based on specific conditions.

The following example code demonstrates how to render a checkbox only when the Discontinued field is true. This is achieved by applying a conditional check inside the template function:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttData } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = { position: '75%' };

  const orderStatusTemplate = (props) => (
    <div style=>
      <RadioButtonComponent label="Pending" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Pending'} />
      <RadioButtonComponent label="Confirmed" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Confirmed'} />
      <RadioButtonComponent label="Shipped" name={`radio-${props.TaskID}`} cssClass="e-success" checked={props.OrderStatus === 'Shipped'} />
    </div>
  );

  return (
    <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
        <ColumnDirective field="OrderStatus" headerText="Order Status" width="180" template={orderStatusTemplate} />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: SplitterSettingsModel = { position: '75%' };

  const discontinuedTemplate = (props: { Discontinued: boolean }): React.ReactElement => (
    <input type="checkbox" checked={props.Discontinued} readOnly />
  );

  return (
    <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
        <ColumnDirective field="Discontinued" headerText="Discontinued" width="150" textAlign="Center" template={discontinuedTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

You can use any template element or custom component instead of the checkbox in the conditional template based on your requirement.

How to get the row object by clicking on the template element

The Gantt chart component allows retrieving the row object of a selected record when a template element is clicked. This is useful for performing custom actions based on the selected data.

In the following example, a button is rendered in the Task Data column. The click event is bound to the showDetails method, which receives the data object from the template variable, enabling access to the selected row and displaying it in a dialog popup.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttData } from './datasource';

function App() {
  let dialog = null;

  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = { position: '75%' };

  const showDetails = (data) => {
    if (dialog) {
      dialog.content = `
        <p><b>TaskID:</b> ${data.TaskID}</p>
        <p><b>TaskName:</b> ${data.TaskName}</p>
        <p><b>Duration:</b> ${data.Duration}</p>
      `;
      dialog.show();
    }
  };

  const employeeTemplate = (props) => (
    <ButtonComponent cssClass='e-outline' onClick={() => showDetails(props)}>View</ButtonComponent>
  );

  return (
    <div>
      <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" width="80" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
          <ColumnDirective field="TaskData" headerText="Employee Data" width="150" template={employeeTemplate} />
          <ColumnDirective field="Duration" headerText="Duration" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" width="120" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>

      <DialogComponent
        ref={(dlg) => (dialog = dlg)}
        visible={false}
        width="50%"
        showCloseIcon={true}
        header="Selected Row Details"
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttData } from './datasource';

function App() {
  let dialog: DialogComponent | null = null;

  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: SplitterSettingsModel = { position: '75%' };

  const showDetails = (data: any) => {
    if (dialog) {
      dialog.content = `
        <p><b>TaskID:</b> ${data.TaskID}</p>
        <p><b>TaskName:</b> ${data.TaskName}</p>
        <p><b>Duration:</b> ${data.Duration}</p>
      `;
      dialog.show();
    }
  };

  const employeeTemplate = (props: any): React.ReactElement => (
    <ButtonComponent cssClass='e-outline' onClick={() => showDetails(props)}>View</ButtonComponent>
  );

  return (
    <div>
      <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" width="80" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
          <ColumnDirective field="TaskData" headerText="Employee Data" width="150" template={employeeTemplate} />
          <ColumnDirective field="Duration" headerText="Duration" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" width="120" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>

      <DialogComponent
        ref={(dlg) => (dialog = dlg)}
        visible={false}
        width="50%"
        showCloseIcon={true}
        header="Selected Row Details"
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Use custom helper inside the template

The Syncfusion® Gantt chart component supports using custom helper functions within the template of a column. This allows you to build advanced templates by incorporating logic beyond the default template syntax.

To use a custom helper function, define it in the template context using the let keyword. This creates a reference to the function that can be used within the template.

The following example demonstrates how to use a custom helper function inside the template property for the Progress column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = { position: '75%' };

  const formatProgressTemplate = (props) => (
    <span>{props.Progress ? props.Progress.toFixed(3) + '%' : '0%'}</span>
  );

  return (
    <GanttComponent
      id="ganttDefault"
      height="430px"
      dataSource={GanttData}
      taskFields={taskFields}
      treeColumnIndex={1}
      splitterSettings={splitterSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="TaskID" width="80" />
        <ColumnDirective field="TaskName" headerText="TaskName" width="290" />
        <ColumnDirective field="Progress" headerText="Progress" width="120" template={formatProgressTemplate} />
        <ColumnDirective field="Duration" headerText="Duration" width="90" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, QueryCellInfoEventArgs, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
  };

  const toolbar: string[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  // Column template for TaskName
  const taskNameTemplate = (props: any): React.ReactElement => (
    <span></span>
  );

  // Event for additional customization
  const queryCellInfo = (args: QueryCellInfoEventArgs) => {
    if (args.column.field === 'TaskName') {
      const value = (args.data as any).TaskName;
      const extraButton = new Button({ content: value });
      const buttonElement = document.createElement('button');
      buttonElement.classList.add('e-btn');
      (args.cell as HTMLElement).appendChild(buttonElement);
      extraButton.appendTo(buttonElement);
    }
  };

  return (
    <GanttComponent
      id="ganttDefault"
      height="430px"
      dataSource={GanttData}
      taskFields={taskFields}
      treeColumnIndex={1}
      editSettings={editSettings}
      toolbar={toolbar}
      queryCellInfo={queryCellInfo}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="80" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="250" template={taskNameTemplate} />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" format="yMd" type="date" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Custom helpers can only be used inside the template of the column.

Render a component in the template property using event

You can render a component inside a Gantt chart cell by setting the template property and using the queryCellInfo event to display it before the cell is rendered.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttData } from './datasource';

function App() {
  let dialog = null;

  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = { position: '75%' };

  const showDetails = (data) => {
    if (dialog) {
      dialog.content = `
        <p><b>TaskID:</b> ${data.TaskID}</p>
        <p><b>TaskName:</b> ${data.TaskName}</p>
        <p><b>Duration:</b> ${data.Duration}</p>
      `;
      dialog.show();
    }
  };

  const employeeTemplate = (props) => (
    <ButtonComponent cssClass='e-outline' onClick={() => showDetails(props)}>View</ButtonComponent>
  );

  return (
    <div>
      <GanttComponent height="430px" dataSource={GanttData} taskFields={taskFields} treeColumnIndex={1} splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" width="80" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="290" />
          <ColumnDirective field="TaskData" headerText="Employee Data" width="150" template={employeeTemplate} />
          <ColumnDirective field="Duration" headerText="Duration" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" width="120" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>

      <DialogComponent
        ref={(dlg) => (dialog = dlg)}
        visible={false}
        width="50%"
        showCloseIcon={true}
        header="Selected Row Details"
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, TaskFieldsModel, SplitterSettingsModel, QueryCellInfoEventArgs } from '@syncfusion/ej2-react-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource';

function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID',
    notes: 'info'
  };

  const splitterSettings: SplitterSettingsModel = { position: '75%' };

  const toolbar: string[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const queryCellInfo = (args: QueryCellInfoEventArgs) => {
    if (args.column.field === 'TaskName') {
      const value = (args.data as any).TaskName;
      const button = new Button({ content: value });
      const buttonElement = document.createElement('button');
      buttonElement.classList.add('e-btn');
      (args.cell as HTMLElement).appendChild(buttonElement);
      button.appendTo(buttonElement);
    }
  };

  return (
    <GanttComponent
      id="ganttDefault"
      height="430px"
      dataSource={GanttData}
      taskFields={taskFields}
      treeColumnIndex={1}
      splitterSettings={splitterSettings}
      projectStartDate={new Date('03/25/2024')}
      projectEndDate={new Date('07/28/2024')}
      editSettings={editSettings}
      toolbar={toolbar}
      queryCellInfo={queryCellInfo}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="80" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" format="yMd" type="date" />
      </ColumnsDirective>
      <Inject />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>