Column Headers in React Gantt Chart Component

4 Jul 202624 minutes to read

The React Gantt Chart component provides flexible options to manage and customize column headers. You can define static header text, apply custom templates, align header content, and even update header titles dynamically through events or methods. These features help tailor the Gantt chart to match specific UI requirements and improve readability.

Set custom header text

By default, column headers in the Gantt chart display the value defined in the field property. To customize the header title, use the headerText property within the column configuration. This allows you to define meaningful labels for each column as needed.

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",
        };
   let ganttInstance;
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} height="450px" ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID"  width="100" ></ColumnDirective>
            <ColumnDirective field="TaskName" headerText="Task Name"></ColumnDirective>
            <ColumnDirective field="StartDate" headerText="Start Date" ></ColumnDirective>
            <ColumnDirective field="Duration" headerText="Duration"></ColumnDirective>
            <ColumnDirective field="Progress" headerText="Progress"></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-grids';

import { data } from './datasource';
function App() {
  const taskFields: any = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    parentID: "ParentID"
  };
  let ganttInstance: any;
  return <GanttComponent dataSource={data} taskFields={taskFields} height="450px" ref={gantt => ganttInstance = gantt}>
    <ColumnsDirective>
      <ColumnDirective field="TaskID" headerText="Task ID" width="100" ></ColumnDirective>
      <ColumnDirective field="TaskName" headerText="Task Name"></ColumnDirective>
      <ColumnDirective field="StartDate" headerText="Start Date" ></ColumnDirective>
      <ColumnDirective field="Duration" headerText="Duration"></ColumnDirective>
      <ColumnDirective field="Progress" headerText="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/34.1.29/tailwind3.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>
</head>

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

</html>

  • The headerText property is optional. If not defined, the column’s field value will be used as the header text by default.
  • To apply custom HTML content to the header cell, use the headerTemplate property.

Customize header using template

You can customize the column header in the Gantt chart using the headerTemplate property. This allows rendering custom HTML or React components within the header.

In this example, custom elements are applied to both the TaskName and Duration column headers.

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",
    };
    function ganttTemplate(props) {
        var src = props.field + ".png";
        return (<div className="image" >
            <img src={src} style= /> {props.field}
        </div>);
    };
    const template = ganttTemplate;
    return <GanttComponent dataSource={data} taskFields={taskFields} height="450px">
        <ColumnsDirective>
            <ColumnDirective field="TaskName" headerTemplate={template} headerText="Task Name"></ColumnDirective>
            <ColumnDirective field="StartDate" headerText="Start Date"></ColumnDirective>
            <ColumnDirective field="Duration" headerTemplate={template} headerText="Duration"></ColumnDirective>
            <ColumnDirective field="Progress" headerText="Progress"></ColumnDirective>
        </ColumnsDirective>
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById("root"));
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: any = {
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        duration: "Duration",
        progress: "Progress",
        parentID: "ParentID",
    };
    function ganttTemplate(props: any) {
        var src = props.field + ".png";
        return (<div className="image" >
            <img src={src} style= /> {props.field}
        </div>);
    };
    const template: any = ganttTemplate;
    return <GanttComponent dataSource={data} taskFields={taskFields} height="450px">
        <ColumnsDirective>
            <ColumnDirective field="TaskName" headerTemplate={template} headerText="Task Name"></ColumnDirective>
            <ColumnDirective field="StartDate" headerText="Start Date"></ColumnDirective>
            <ColumnDirective field="Duration" headerTemplate={template} headerText="Duration"></ColumnDirective>
            <ColumnDirective field="Progress" headerText="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/34.1.29/tailwind3.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>
</head>

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

</html>

  • The headerTemplate property is only applicable to Gantt columns that have a header element.

Align header text

You can align the column header text in the React Gantt Chart component using the headerTextAlign property. By default, the text is aligned to the left. The available alignment options are:

  • Left: Aligns text to the left (default).
  • Center: Aligns text to the center.
  • Right: Aligns text to the right.
  • Justify: Distributes text evenly across the header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective } 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",
        parentID: "ParentID",
    };
    let gantt;
    const alignmentData = [
        { text: 'Left', value: 'Left' },
        { text: 'Right', value: 'Right' },
        { text: 'Center', value: 'Center' },
        { text: 'Justify', value: 'Justify' },
    ];
    const changeAlignment = ((args) => {
        gantt.treeGrid.grid.columns.forEach((col) => {
            col.headerTextAlign = args.value;
        });
        gantt.treeGrid.grid.refreshHeader();
    })
    return <div>
        <label style=>Align the text for columns :</label>
        <DropDownListComponent dataSource={alignmentData} index={0} width="100" change={changeAlignment}></DropDownListComponent>
        <div style=></div>
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
            <ColumnsDirective>
                <ColumnDirective field="TaskName" headerText="Task Name"></ColumnDirective>
                <ColumnDirective field="StartDate" headerText="Start Date"></ColumnDirective>
                <ColumnDirective field="Duration" headerText="Duration"></ColumnDirective>
                <ColumnDirective field="Progress" headerText="Progress"></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent></div>
};
ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-gantt";
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

import { data } from "./datasource";
function App() {
  const taskFields: any = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    parentID: "ParentID",
  };
  let gantt: GanttComponent | null;
  const alignmentData: any = [
    { text: 'Left', value: 'Left' },
    { text: 'Right', value: 'Right' },
    { text: 'Center', value: 'Center' },
    { text: 'Justify', value: 'Justify' },
  ];
  const changeAlignment = ((args: any) => {
    (gantt as any).treeGrid.grid.columns.forEach((col: any) => {
      col.headerTextAlign = (args as any).value;
    });
    (gantt as any).treeGrid.grid.refreshHeader();
  })
  return <div>
    <label style=>Align the text for columns :</label>
    <DropDownListComponent dataSource={alignmentData} index={0} width="100" change={changeAlignment}></DropDownListComponent>
    <div style=></div>
    <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
      <ColumnsDirective>
        <ColumnDirective field="TaskName" headerText="Task Name"></ColumnDirective>
        <ColumnDirective field="StartDate" headerText="Start Date"></ColumnDirective>
        <ColumnDirective field="Duration" headerText="Duration"></ColumnDirective>
        <ColumnDirective field="Progress" headerText="Progress"></ColumnDirective>
      </ColumnsDirective>
    </GanttComponent></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/34.1.29/tailwind3.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>
</head>

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

</html>

  • The headerTextAlign property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the textAlign property.

Enable header text wrapping

You can enable autowrap in the React Gantt Chart component to allow cell content to wrap onto the next line when it exceeds the defined column width. This wrapping behavior is based on the whitespace between words. To activate this feature, set the allowTextWrap property to true and specify an appropriate column width.

The wrapping behavior is defined using the textWrapSettings.wrapMode property of the treeGrid object. Available options include:

  • Header: Wraps only the header text.
  • Content: Wraps only the cell content.
  • Both: Wraps both header and content (default).
  • If column width is not defined, autowrap adjusts based on the overall Gantt chart width.
  • Header text without white space may not wrap.
  • If cell content includes HTML tags, autowrap may not function as expected. In such cases, use headerTemplate and template properties to customize the header and cell layout.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective } 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",
        parentID: "ParentID",
    };
    let gantt;
    const dropDownData = [
        { text: 'Header', value: 'Header' },
        { text: 'Content', value: 'Content' },
        { text: 'Both', value: 'Both' },
    ];
    const valueChange = ((args) => {
        gantt.treeGrid.textWrapSettings.wrapMode = args.value;
        gantt.treeGrid.allowTextWrap = true;
    })
    return <div>
        <label style=>Autowrap for header column :</label>
        <DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
        <div style=></div>
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
            <ColumnsDirective>
                <ColumnDirective field="TaskName" headerText="Task Name"></ColumnDirective>
                <ColumnDirective field="StartDate" headerText="Start Date"></ColumnDirective>
                <ColumnDirective field="Duration" headerText="Duration"></ColumnDirective>
                <ColumnDirective field="Progress" headerText="Progress"></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent></div>
};
ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-gantt";
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from "./datasource";

function App() {
  const taskFields: any = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    parentID: "ParentID",
  };
  let gantt: GanttComponent | null;
  const dropDownData = [
    { text: 'Header', value: 'Header' },
    { text: 'Content', value: 'Content' },
    { text: 'Both', value: 'Both' },
  ];
  const valueChange = ((args: any) => {
    gantt.treeGrid.textWrapSettings.wrapMode = args.value;
    gantt.treeGrid.allowTextWrap = true;
  })
  return <div>
    <label style=>Autowrap for header column :</label>
    <DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
    <div style=></div>
    <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
      <ColumnsDirective>
        <ColumnDirective field="TaskName" headerText="Task Name"></ColumnDirective>
        <ColumnDirective field="StartDate" headerText="Start Date"></ColumnDirective>
        <ColumnDirective field="Duration" headerText="Duration"></ColumnDirective>
        <ColumnDirective field="Progress" headerText="Progress"></ColumnDirective>
      </ColumnsDirective>
    </GanttComponent></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/34.1.29/tailwind3.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>
</head>

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

</html>

Update header text dynamically

The React Gantt Chart component allows dynamic updates to column header text, either through events or method calls. This is useful for customizing headers based on user input or application logic.

Using Event

To modify header text during rendering, use the headerCellInfo event. After updating the text, call the refreshHeader method of the treeGrid object to apply changes.

Using method

You can also change header text programmatically using the following methods:

  • getColumnByField: Returns the column object by field name.
  • getColumnHeaderByField: Returns the header element by field name.
  • getColumnIndexByField: Returns the column index by field name.
  • getColumnByUid: Returns the column object by UID.
  • getColumnHeaderByIndex: Returns the header element by index.
  • getColumnIndexByUid: Returns the column index by UID.
  • getColumnHeaderByUid: Returns the header element by UID.

These methods allow access to the column or header element, where you can update the headerText or textContent as needed.

  • After modifying header text, call refreshHeader to reflect the changes.
  • Column UID’s are auto-generated and may change when the chart is refreshed

Here is an example of how to change the header text of a column using the getColumnByField method:

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

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

  let dropDown = null;
  let textBox = null;
  let gantt = null;

  const field = { text: 'text', value: 'value' };

  const alignmentData = [
    { text: 'TaskName', value: 'TaskName' },
    { text: 'StartDate', value: 'StartDate' },
    { text: 'Duration', value: 'Duration' },
    { text: 'Progress', value: 'Progress' },
  ];
  const changeHeaderText = () => {
    if (dropDown && textBox && gantt) {
      const selectedField = dropDown.value;
      const column = gantt.treeGrid.grid.getColumnByField(selectedField);
      if (column && textBox.element.value.trim() !== '') {
        column.headerText = textBox.element.value;
        gantt.treeGrid.grid.refreshHeader();
      }
    }
  };

  return (
    <div>
      <label style=>Select column name:</label>
      <DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="150" fields={field} />
      <br />
      <label style=>Enter new header text:</label>
      <TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
      <br />
      <label style=>Click the change button:</label>
      <ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
      <div style=>
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" />
            <ColumnDirective field="TaskName" headerText="Task Name" />
            <ColumnDirective field="StartDate" headerText="Start Date" />
            <ColumnDirective field="Duration" headerText="Duration" />
            <ColumnDirective field="Progress" headerText="Progress" />
          </ColumnsDirective>
          <Inject />
        </GanttComponent>
      </div>
    </div>
  );
}

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

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

  let dropDown: DropDownListComponent | null = null;
  let textBox: TextBoxComponent | null = null;
  let gantt: GanttComponent | null = null;

  const field: Object = { text: 'text', value: 'value' };

  const alignmentData: Object[] = [
    { text: 'TaskName', value: 'TaskName' },
    { text: 'StartDate', value: 'StartDate' },
    { text: 'Duration', value: 'Duration' },
    { text: 'Progress', value: 'Progress' },
  ];
  const changeHeaderText = () => {
    if (dropDown && textBox && gantt) {
      const selectedField = dropDown.value as string;
      const column = gantt.treeGrid.grid.getColumnByField(selectedField);
      if (column && textBox.element.value.trim() !== '') {
        column.headerText = textBox.element.value;
        gantt.treeGrid.grid.refreshHeader();
      }
    }
  };

  return (
    <div>
      <label style=>Select column name:</label>
      <DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="150" fields={field} />
      <br />
      <label style=>Enter new header text:</label>
      <TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
      <br />
      <label style=>Click the change button:</label>
      <ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
      <div style=>
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" />
            <ColumnDirective field="TaskName" headerText="Task Name" />
            <ColumnDirective field="StartDate" headerText="Start Date" />
            <ColumnDirective field="Duration" headerText="Duration" />
            <ColumnDirective field="Progress" headerText="Progress" />
          </ColumnsDirective>
          <Inject />
        </GanttComponent>
      </div>
    </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/34.1.29/tailwind3.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>
</head>

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

</html>

Changing the header text of all columns:

To modify the header text of all columns in the Gantt Chart component, iterate through the columns collection and set the headerText property for each column. This approach ensures consistent customization across all headers.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, ColumnModel } from "@syncfusion/ej2-react-gantt";
import { ButtonComponent } 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",
  };
  let gantt = null;

  const headerTextMap = {
    TaskID: 'ID',
    TaskName: 'Name',
    StartDate: 'Start Date',
    Duration: 'Task Duration',
    Progress: 'Task Progress'
  };

  const changeHeaderText = () => {
    if (gantt) {
      gantt.treeGrid.grid.columns.forEach((column) => {
        column.headerText = headerTextMap[column.field];
      });
      gantt.treeGrid.grid.refreshHeader();
    }
  };

  return (
    <div>
      <ButtonComponent id="button" style= cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" />
            <ColumnDirective field="TaskName" headerText="Task Name" />
            <ColumnDirective field="StartDate" headerText="Start Date" />
            <ColumnDirective field="Duration" headerText="Duration" />
            <ColumnDirective field="Progress" headerText="Progress" />
          </ColumnsDirective>
          <Inject />
        </GanttComponent>
      </div>
  );
}

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

function App() {
  const taskFields: any = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    parentID: "ParentID",
  };
  let gantt: GanttComponent | null = null;

  const headerTextMap: { [key: string]: string } = {
    TaskID: 'ID',
    TaskName: 'Name',
    StartDate: 'Start Date',
    Duration: 'Task Duration',
    Progress: 'Task Progress'
  };

  const changeHeaderText = () => {
    if (gantt) {
      gantt.treeGrid.grid.columns.forEach((column: ColumnModel) => {
        column.headerText = headerTextMap[column.field as string];
      });
      gantt.treeGrid.grid.refreshHeader();
    }
  };

  return (
    <div>
      <ButtonComponent id="button" style= cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" />
            <ColumnDirective field="TaskName" headerText="Task Name" />
            <ColumnDirective field="StartDate" headerText="Start Date" />
            <ColumnDirective field="Duration" headerText="Duration" />
            <ColumnDirective field="Progress" headerText="Progress" />
          </ColumnsDirective>
          <Inject />
        </GanttComponent>
    </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/34.1.29/tailwind3.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>
</head>

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

</html>

Rotate header text

By default, header text in the Gantt Chart component is displayed horizontally. To rotate it vertically, diagonally, or at a custom angle, follow the steps below using the customAttributes property of the column.

Step 1: Create a CSS class with rotation styles.

.e-gantt .e-headercell.orientationcss  {
  transform: rotate(90deg);
  text-align: center;
}

Step 2: Apply the CSS class to the desired column using customAttributes.

 <ColumnDirective field="Duration" headerText="Duration" customAttributes={customAttributes} textAlign="Center" />

Step 3: Adjust the header cell height to fit the rotated text.

  const customAttributes = { class: "orientationcss" };
  const setHeaderHeight = () => {
    const headerDiv = document.querySelector(".orientationcss > div") as HTMLElement | null;
    if (!headerDiv) return;

    const textWidth: number = headerDiv.scrollWidth;
    const headerCells: NodeListOf<HTMLElement> = document.querySelectorAll(".e-headercell");

    headerCells.forEach(cell => {
      cell.style.height = textWidth + "px";
    });
  };
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from "@syncfusion/ej2-react-gantt";
import { data } from "./datasource";

function App() {
  let gantt = null;

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

  const customAttributes = { class: "orientationcss" };

  const setHeaderHeight = () => {
    const headerDiv = document.querySelector(".orientationcss > div");
    if (!headerDiv) return;

    const textWidth = headerDiv.scrollWidth;
    const headerCells = document.querySelectorAll(".e-headercell");

    headerCells.forEach(cell => {
      cell.style.height = textWidth + "px";
    });
  };

  return (
    <div>
      <GanttComponent
        ref={g => (gantt = g)}
        dataSource={data}
        taskFields={taskFields}
        height="450px"
        created={setHeaderHeight}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" customAttributes={customAttributes} textAlign="Center" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </div>
  );
}

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

function App() {
  let gantt: GanttComponent | null = null;

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

  const customAttributes = { class: "orientationcss" };

  const setHeaderHeight = () => {
    const headerDiv = document.querySelector(".orientationcss > div") as HTMLElement | null;
    if (!headerDiv) return;

    const textWidth: number = headerDiv.scrollWidth;
    const headerCells: NodeListOf<HTMLElement> = document.querySelectorAll(".e-headercell");

    headerCells.forEach(cell => {
      cell.style.height = textWidth + "px";
    });
  };

  return (
    <div>
      <GanttComponent
        ref={g => (gantt = g)}
        dataSource={data}
        taskFields={taskFields}
        height="450px"
        created={setHeaderHeight}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" customAttributes={customAttributes} textAlign="Center"/>
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </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/34.1.29/tailwind3.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%;
        }

        .orientationcss .e-headercelldiv {
            transform: rotate(90deg);
            text-align: center;
        }
    </style>
</head>

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

</html>

Add custom tooltip to header

You can display additional information in the React Gantt Chart component by adding custom tooltips to column headers. This is especially helpful when space is limited or when extra context is needed. To implement this, use the beforeRender event of the Tooltip component. This event triggers before each header cell is rendered, allowing you to assign a custom tooltip dynamically.

The following example demonstrates how to use the beforeRender event to add a tooltip to a header cell:

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

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

  let toolTip;
  let gantt;

  const columnDescriptions = {
    "Task ID": "Unique identifier for the task.",
    "Task Name": "Name of the task.",
    "Start Date": "The date when the task starts.",
    "Duration": "Number of days the task will take.",
    "Progress": "Completion percentage of the task."
  };

  const beforeRender = args => {
    const headerText = args.target.innerText;
    const description = columnDescriptions[headerText];
    if (description) {
      toolTip.content = `${headerText}: ${description}`;
    }
  };

  return (
    <div>
      <TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender} target=".e-headertext">
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" />
            <ColumnDirective field="TaskName" headerText="Task Name" />
            <ColumnDirective field="StartDate" headerText="Start Date" />
            <ColumnDirective field="Duration" headerText="Duration" />
            <ColumnDirective field="Progress" headerText="Progress" />
          </ColumnsDirective>
          <Inject />
        </GanttComponent>
      </TooltipComponent>
    </div>
  );
}

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

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

  let toolTip: TooltipComponent | null;
  let gantt: GanttComponent | null;

  const columnDescriptions: Record<string, string> = {
    "Task ID": "Unique identifier for the task.",
    "Task Name": "Name of the task.",
    "Start Date": "The date when the task starts.",
    "Duration": "Number of days the task will take.",
    "Progress": "Completion percentage of the task."
  };

  const beforeRender = (args: TooltipEventArgs) => {
    const headerText = (args as any).target.innerText;
    const description = columnDescriptions[headerText];
    if (description) {
      (toolTip as TooltipComponent).content = `${headerText}: ${description}`;
    }
  };

  return (
    <div>
      <TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender} target=".e-headertext">
        <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px">
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" />
            <ColumnDirective field="TaskName" headerText="Task Name" />
            <ColumnDirective field="StartDate" headerText="Start Date" />
            <ColumnDirective field="Duration" headerText="Duration" />
            <ColumnDirective field="Progress" headerText="Progress" />
          </ColumnsDirective>
          <Inject />
        </GanttComponent>
      </TooltipComponent>
    </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/34.1.29/tailwind3.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>
</head>

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

</html>

  • The headerCellInfo event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.

Style header text

To modify the appearance of column headers in the Gantt, follow the steps below. You can use CSS, properties, methods, or events provided by the React Gantt Chart component.

Using CSS

You can apply styles to Gantt Chart component header cells using the .e-headercell class. This allows you to customize font, background color, and other visual properties.

  .e-gantt .e-headercell {
    background-color: #a2d6f4;
    color:rgb(3, 2, 2);
  }
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } 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",
  };
  let gantt;
  const splitterSettings = {
    position: "75%"
  }
  return (
    <div>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } 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",
  };
  let gantt: GanttComponent;
  const splitterSettings: object = {
    position: "75%"
  }
  return (
    <div>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </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/34.1.29/tailwind3.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%;
        }

        .e-gantt .e-headercell {
            background-color: #a2d6f4;
            color: rgb(3, 2, 2);
        }
    </style>
</head>

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

</html>

Using property

To customize the appearance of column headers in the Gantt Chart component, use the customAttributes property. It accepts an object containing CSS class names that apply styles directly to header cells.

Step 1: Define a CSS class with the desired styles.

.e-gantt .e-headercell.customcss {
  background-color: rgb(43, 205, 226);
  color: black;
}

Step 2: Assign the class using customAttributes in the column definition.

<ColumnDirective field="Duration" headerText="Duration" customAttributes={{ class: 'customcss' }} />
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } 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",
  };
  let gantt;
  const splitterSettings = {
    position: "75%"
  }
  return (
    <div>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" customAttributes={{ class: 'customcss' }} />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" customAttributes={{ class: 'customcss' }} />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } 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",
  };
  let gantt: GanttComponent;
  const splitterSettings: object = {
    position: "75%"
  }
  return (
    <div>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings}>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" customAttributes={{ class: 'customcss' }} />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" customAttributes={{ class: 'customcss' }} />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </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/34.1.29/tailwind3.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%;
        }

        .e-gantt .e-headercell.customcss {
            background-color: rgb(43, 205, 226);
            color: black;
        }
    </style>
</head>

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

</html>

Using method

The Gantt Chart component provides methods in the treeGrid object to customize column header appearance:

  • getColumnHeaderByIndex(index) – Gets the header element by column index.
  • getColumnHeaderByField(field) – Retrieves the header element using the field name.
  • getColumnHeaderByUid(uid) – Accesses the header element by unique ID.
  • getColumnIndexByField(field) – Returns the index of a column using its field name.
  • getColumnIndexByUid(uid) – Returns the index of a column using its unique ID.

The following example demonstrates how to apply custom styles to specific column headers in the Gantt chart using the dataBound event:

  • Set font color to black for the header at index 0 of the TaskID column.
  • Apply pink background and black font color to the TaskName header.
  • Apply the same styles to the Duration header using both UID (grid-column11) and index 3.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Inject
} 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"
  };

  let gantt;

  const onDataBound = () => {
    if (!gantt) return;

    // Style by index
    const headerByIndex = gantt.treeGrid.getColumnHeaderByIndex(0);
    if (headerByIndex) headerByIndex.style.color = "#0d0b0b";

    // Style by field
    const taskNameHeader = gantt.treeGrid.getColumnHeaderByField("TaskName");
    if (taskNameHeader) {
      taskNameHeader.style.backgroundColor = "#f45ddeab";
      taskNameHeader.style.color = "#0d0b0b";
    }

    // Style by UID
    const headerByUid = gantt.treeGrid.getColumnHeaderByUid("grid-column3");
    if (headerByUid) {
      headerByUid.style.backgroundColor = "#f45ddeab";
      headerByUid.style.color = "#0d0b0b";
    }

    // Style by field index
    const durationIndex = gantt.treeGrid.getColumnIndexByField("Duration");
    const durationHeader = gantt.treeGrid.getColumnHeaderByIndex(durationIndex);
    if (durationHeader) durationHeader.style.color = "#0d0b0b";

    // Style by UID index
    const uidIndex = gantt.treeGrid.getColumnIndexByUid("grid-column4");
    const uidHeader = gantt.treeGrid.getColumnHeaderByIndex(uidIndex);
    if (uidHeader) uidHeader.style.color = "#0d0b0b";
  };

  return (
    <div>
      <GanttComponent
        ref={g => gantt = g}
        dataSource={data}
        taskFields={taskFields}
        height="450px"
        dataBound={onDataBound}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Inject
} 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"
  };

  let gantt: GanttComponent | null;

  const onDataBound = () => {
    if (!gantt) return;

    // Style by index
    const headerByIndex = gantt.treeGrid.getColumnHeaderByIndex(0);
    if (headerByIndex) headerByIndex.style.color = "#0d0b0b";

    // Style by field
    const taskNameHeader = gantt.treeGrid.getColumnHeaderByField("TaskName");
    if (taskNameHeader) {
      taskNameHeader.style.backgroundColor = "#f45ddeab";
      taskNameHeader.style.color = "#0d0b0b";
    }

    // Style by UID
    const headerByUid = gantt.treeGrid.getColumnHeaderByUid("grid-column3");
    if (headerByUid) {
      headerByUid.style.backgroundColor = "#f45ddeab";
      headerByUid.style.color = "#0d0b0b";
    }

    // Style by field index
    const durationIndex = gantt.treeGrid.getColumnIndexByField("Duration");
    const durationHeader = gantt.treeGrid.getColumnHeaderByIndex(durationIndex);
    if (durationHeader) durationHeader.style.color = "#0d0b0b";

    // Style by UID index
    const uidIndex = gantt.treeGrid.getColumnIndexByUid("grid-column4");
    const uidHeader = gantt.treeGrid.getColumnHeaderByIndex(uidIndex);
    if (uidHeader) uidHeader.style.color = "#0d0b0b";
  };

  return (
    <div>
      <GanttComponent
        ref={g => gantt = g}
        dataSource={data}
        taskFields={taskFields}
        height="450px"
        dataBound={onDataBound}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </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/34.1.29/tailwind3.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>
</head>

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

</html>

  • The UID is automatically generated by the Gantt chart component and may change whenever the gantt chart is refreshed or updated.

Using event

To customize the Gantt Chart component header appearance, use the headerCellInfo event. This event triggers when each header cell is rendered and provides access to its details, allowing you to apply custom styles.

The following example demonstrates how to check if the current header column is the TaskID field and apply a CSS class conditionally:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject} 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",
  };
  let gantt;
  const splitterSettings = {
    position: "75%"
  }
  const onHeaderCellInfo = (args)=>{
    const column = args.cell.column;
    if (column.field === 'TaskID') {
        (args.node).classList.add('customcss');
    }
  }
  return (
    <div>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings} headerCellInfo={ onHeaderCellInfo }>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, HeaderCellInfoEventArgs, Column } 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",
  };
  let gantt: GanttComponent;
  const splitterSettings: object = {
    position: "75%"
  }
  const onHeaderCellInfo = (args: HeaderCellInfoEventArgs)=>{
    const column = args.cell.column as Column;
    if (column.field === 'TaskID') {
        (args.node as HTMLElement).classList.add('customcss');
    }
  }
  return (
    <div>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings} headerCellInfo={ onHeaderCellInfo }>
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </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/34.1.29/tailwind3.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%;
        }

        .e-gantt .e-headercell.customcss {
            background-color: #a2d6f4;
            color: rgb(3, 2, 2);
        }
    </style>
</head>

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

</html>

Refresh header programmatically

To refresh the header in Gantt Chart component after updating column properties (such as text, width, or alignment), use the refreshHeader method from the treeGrid object. This method re-renders the header to reflect the latest column changes.

The following example demonstrates how to update the header text of the column at index 1 for the TaskName column using a button click.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from "@syncfusion/ej2-react-gantt";
import { ButtonComponent } 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",
  };
  let gantt;
  const splitterSettings = {
    position: "75%"
  }
  const refreshHeader = ()=>{
    const column = gantt.treeGrid.grid.getColumnByIndex(1);
    if (column) {
      column.headerText = 'New Header Text';
      gantt.treeGrid.grid.refreshHeader();
    }
  }
  return (
    <div>
      <ButtonComponent id="button" cssClass="e-outline" onClick={refreshHeader}>Refresh Header</ButtonComponent>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings} >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from "@syncfusion/ej2-react-gantt";
import { ButtonComponent } 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",
  };
  let gantt: GanttComponent;
  const splitterSettings: object = {
    position: "75%"
  }
  const refreshHeader = ()=>{
    const column = (gantt as GanttComponent).treeGrid.grid.getColumnByIndex(1);
    if (column) {
      column.headerText = 'New Header Text';
      (gantt as GanttComponent).treeGrid.grid.refreshHeader();
    }
  }
  return (
    <div>
      <ButtonComponent id="button" cssClass="e-outline" onClick={refreshHeader}>Refresh Header</ButtonComponent>
      <GanttComponent ref={g => gantt = g} dataSource={data} taskFields={taskFields} height="450px" splitterSettings={splitterSettings} >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" />
          <ColumnDirective field="TaskName" headerText="Task Name" />
          <ColumnDirective field="StartDate" headerText="Start Date" />
          <ColumnDirective field="Duration" headerText="Duration" />
          <ColumnDirective field="Progress" headerText="Progress" />
        </ColumnsDirective>
        <Inject />
      </GanttComponent>
    </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/34.1.29/tailwind3.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>
</head>

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

</html>

Access header element

To retrieve the header element in a Gantt chart component, you can use one of the following methods available in the treeGrid object of the Gantt instance:

  1. getHeaderContent: This method returns the header <div> element of the Gantt chart. You can use it to access the entire header content.

     const headerElement = gantt.treeGrid.getHeaderContent();

  2. getHeaderTable: This method returns the header <table> element of the Gantt chart. You can use it to access only the header table.

     const headerTableElement = gantt.treeGrid.getHeaderTable();

  3. getColumnHeaderByUid: This method returns the column header element by its unique identifier (UID).

     const columnHeaderElement = gantt.treeGrid.getColumnHeaderByUid("e-grid2");

  4. getColumnHeaderByIndex: This method returns the column header element by its index.

     const columnHeaderElement = gantt.treeGrid.getColumnHeaderByIndex(0);

  5. getColumnHeaderByField: This method returns the column header element by its field name.

     const columnHeaderElement = gantt.treeGrid.getColumnHeaderByField("TaskID");
  • The UID is automatically generated by the Gantt chart component and may change whenever the Gantt is refreshed or updated.