Syncfusion AI Assistant

How can I help you?

Columns in React Gantt Chart Component

30 Apr 202624 minutes to read

The Syncfusion® React Gantt Chart component displays task data in a tabular format using columns. Columns help organize data efficiently and support user interaction within the Gantt chart.

Each column is defined using the field property, which maps values from the dataSource. This mapping ensures accurate data binding and enables formatting and customization for each column.

Column types

The Syncfusion® React Gantt Chart component supports specifying the data type for each column using the type property. This ensures that values are displayed with the correct formatting—such as number or date—based on the column’s data.

Gantt supports the following column types:

  • string: Default type for text data.
  • number: For numeric values with formatting.
  • boolean: Displays checkboxes for true/false values.
  • date: For date values.
  • datetime: For date and time values.
  • checkbox: Displays a checkbox column.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Selection, Inject } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';

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

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

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={GanttData}
            taskFields={taskFields}
            height="450px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective type="checkbox" width="90" />
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" type="number" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" type="string" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" format="yMd" type="date" />
                <ColumnDirective field="EndDate" headerText="End Date" textAlign="Right" width="150" format="dd/MM/yyyy hh:mm" type="dateTime" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" type="number" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" type="number" />
                <ColumnDirective field="Verified" headerText="Verified" width="100" type="boolean" displayAsCheckBox={true} />
            </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, Selection, Inject } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';

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

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

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={GanttData}
            taskFields={taskFields}
            height="450px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective type="checkbox" width="90" />
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" type="number" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" type="string" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" format="yMd" type="date" />
                <ColumnDirective field="EndDate" headerText="End Date" textAlign="Right" width="150" format="dd/MM/yyyy hh:mm" type="dateTime" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" type="number" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" type="number" />
                <ColumnDirective field="Verified" headerText="Verified" width="100" type="boolean" displayAsCheckBox={true} />
            </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/33.2.3/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>

  • If type is not defined, it is auto-detected from the first record of the data source.
  • If the first record has a null or blank value, define the type explicitly to ensure correct filter dialog behavior.

Difference between boolean type and checkbox type column

  • Use boolean type to bind and edit true/false values from the data source.
  • Use checkbox type to enable row selection or deselection in the UI.
  • When column type is checkbox, Gantt selectionSettings defaults to multiple selection.
  • If multiple checkbox columns exist, selecting one auto-selects others in the same row.

To learn more about how to render boolean values as checkboxes in a Syncfusion® GanttColumn, please refer to the Render Boolean Values as Checkbox section.

Column width

In Syncfusion® Gantt for React, column width can be adjusted using the width property within the column configuration. This property accepts values in pixels (e.g., 100) or percentages (e.g., 25%) to define the column’s width relative to the Gantt container.

  1. Column width is calculated based on the total available width. For example, in a container with 4 columns and a total width of 800 pixels, each column will default to 200 pixels.
  2. If widths are defined for some columns but not others, the remaining width is distributed equally among columns without explicit widths. For example, if you have 3 columns with widths of 100px, 200px, and no width specified for the third column, the third column will occupy the remaining width after accounting for the first two columns.
  3. Percentage-based widths are responsive and adjust dynamically when the Gantt container is resized. For example, a column with a width of 50% will occupy 50% of the gantt width and will adjust proportionally when the gantt container is resized to a smaller size.
  4. When columns are manually resized, a minimum width is enforced to maintain readability. By default, this minimum is set to 10 pixels unless specified otherwise.
  5. If the total column width exceeds the container width, a horizontal scrollbar appears to enable scrolling.
  6. The Gantt Chart component inherits the width of its parent element. If the parent has a fixed width, the Gantt will occupy that space; otherwise, it adjusts dynamically based on available space.

To learn more about resizing, you can refer to the resizing section here

Supported types for column width

The Syncfusion® Gantt supports the following three types of column width:

1. Auto

The column width is automatically calculated based on the content within the column cells. If the content exceeds the width of the column, it will be truncated with an ellipsis (…) at the end. You can set the width for columns as auto in your Gantt configuration as shown below:

<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="auto" />

2. Percentage

The column width is specified as a percentage value relative to the width of the gantt container. For example, a column width of 25% will occupy 25% of the total gantt width. You can set the width for columns as percentage in your Gantt configuration as shown below:

<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="25%" />

3. Pixel

The column width is specified as an absolute pixel value. For example, a column width of 100px will have a fixed width of 100 pixels regardless of the gantt container size. You can set the width for columns as pixel in your Gantt configuration as shown below:

<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="100" />
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } 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: '90%' };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={GanttData}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="auto" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="30%" />
            </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 { GanttData } from './datasource';

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

    const splitterSettings: object = { position: '90%' };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={GanttData}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="auto" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="30%" />
            </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/33.2.3/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>

Column formatting

The Syncfusion® Gantt Chart component for React supports column formatting to customize data presentation. You can format numbers, dates, or apply templates based on specific requirements. Use the columns.format property to define the desired format for each column.

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',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" format="yyyy/MM/dd" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" format="C2" type="number" />
            </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: Object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" format="yyyy/MM/dd" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" format="C2" type="number" />
            </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/33.2.3/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 Gantt uses the Internalization library to format values based on the specified format and culture.
  • By default, the number and date values are formatted in en-US locale. You can localize the currency and date in different locale as explained here.
  • The available format codes may vary depending on the data type of the column.
  • You can also customize the formatting further by providing a custom function to the format property, instead of a format string.
  • Make sure that the format string is valid and compatible with the data type of the column, to avoid unexpected results.

Number formatting

The Syncfusion® Gantt Chart component for React supports number formatting through the columns.format property, where standard format strings define numeric value presentation including currency, percentage, and decimal formats. The following standard format strings are available:

Format Description Remarks
N Numeric format Use N2, N3, etc., to set the number of decimal places.
C Currency format Use C2, C3, etc., to define precision for currency values.
P Percentage format Input should be between 0 and 1; P2, P3, etc., control precision.

The following example code demonstrates the formatting of data for the TaskID column using the N format, the Progress column using the P format, and a currency column using the C format.

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',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" format="N" type="number" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" format="yMd" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress (%)" textAlign="Right" width="120" format="P2" />
                <ColumnDirective field="Progress" headerText="Progress ($)" textAlign="Right" width="120" format="C" type="number" />
            </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: Object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" format="N" type="number" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" format="yMd" />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress (%)" textAlign="Right" width="120" format="P2" />
                <ColumnDirective field="Progress" headerText="Progress ($)" textAlign="Right" width="120" format="C" type="number" />
            </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/33.2.3/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>

To learn more about number formatting, you can refer to the number section.

Date formatting

The Syncfusion® Gantt Chart component for React supports date formatting in columns using the columns.format property, where format strings such as d, D, MMM dd, yyyy can be applied. Both built-in formats like yMd and custom formats are supported to define the layout and detail of date and time values based on column requirements. The following custom formats and their corresponding output are listed below:

Format Formatted value
{ type:’date’, format:’dd/MM/yyyy’ } 04/07/1996
{ type:’date’, format:’dd.MM.yyyy’ } 04.07.1996
{ type:’date’, skeleton:’short’ } 7/4/96
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } 04/07/1996 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } 07/04/1996 12:00:00 AM 
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',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    // Format options for date and dateTime columns
    const startDateFormatOptions = { type: 'date', format: 'dd/MM/yyyy' };
    const endDateFormatOptions = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" format={startDateFormatOptions} />
                <ColumnDirective field="EndDate" headerText="End Date" textAlign="Right" width="210" format={endDateFormatOptions} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
            </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: object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    // Format options for date and dateTime columns
    const startDateFormatOptions: object = { type: 'date', format: 'dd/MM/yyyy' };
    const endDateFormatOptions: object = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" format={startDateFormatOptions} />
                <ColumnDirective field="EndDate" headerText="End Date" textAlign="Right" width="210" format={endDateFormatOptions} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
            </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/33.2.3/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>

To learn more about date formatting, you can refer to Date formatting.

Format the date column based on localization

You can format the date column in Gantt Chart component based on localization settings by using the format property to define the date pattern and the locale property to apply regional settings.

The following example demonstrates the format property specifies the date format as yyyy-MMM-dd, and the locale property specifies the locale as es-AR for Spanish (Argentina).

import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(cagregorian, numbers);
setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
        "id": "Ich würde",
        "name": "Name",
        "startDate": "Anfangsdatum",
        "duration": "Dauer",
        "progress": "Fortschritt",
      }
  }
});

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'parentId'
  };
  return (
    <GanttComponent 
      dataSource={data} 
      locale='de-DE' 
      allowSelection={true} 
      taskFields={taskFields}  
      height = '450px'
    >
    </GanttComponent>
  ); 
};
ReactDOM.render(<App />, document.getElementById('root'));
// import * as React from 'react';
// import * as ReactDOM from 'react-dom';
// import { GanttComponent, Inject, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
// import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
// import { data } from './datasource';
// import * as cagregorian from './ca-gregorian.json';
// import * as numbers from './numbers.json';

// setCulture('es-AR');
// setCurrencyCode('ARS');
// loadCldr(cagregorian, numbers);

// const formatOption = { type: 'date', format: 'y MMM d' }; // CLDR format

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

//   return (
//     <GanttComponent
//       dataSource={data}
//       locale="es-AR"
//       allowSelection={true}
//       taskFields={taskFields}
//       height="450px"
//     >
//       <ColumnsDirective>
//         <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" type="number" />
//         <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
//         <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" format={formatOption} />
//         <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
//         <ColumnDirective field="Progress" headerText="Progress (%)" textAlign="Right" width="120" />
//       </ColumnsDirective>
//     </GanttComponent>
//   );
// }

// ReactDOM.render(<App />, document.getElementById('root'));



import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { data } from './datasource';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';

function App() {
  var formatOption= { type: 'date', format: 'yyyy-MMM-dd' };
  var locale = 'es-AR';
  setCulture('es-AR');
  setCurrencyCode('ARS');
  loadCldr(
    cagregorian,
    numbers,
    
  );
  return <GridComponent dataSource={data} height={315} locale={locale}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' width='100' textAlign="Right" />
      <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
      <ColumnDirective field='OrderDate' width='140' textAlign="Right" format={formatOption} />
    </ColumnsDirective>
  </GridComponent>
}
export default App;
<!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/33.2.3/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>

Format template column value

You can customize the appearance of values in Gantt template columns using HTML markup and number formatting. To format values, use React pipes along with the format property. In this example, the date pipe formats the StartDate value as 'dd/MMM/yyyy'.

const dateTemplate = (props) => {
    const date = new Date(props.StartDate);
    return (
        <span>
            {date.getFullYear()}/{date.toLocaleString('default', { month: 'short' })}/{date.getDate()}
        </span>
    );
};
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, SplitterSettings } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

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

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

    // Custom date template
    const dateTemplate = (props) => {
        const date = new Date(props.StartDate);
        return (
            <span>
                {date.getFullYear()}/{date.toLocaleString('default', { month: 'short' })}/{date.getDate()}
            </span>
        );
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Left" width="120" template={dateTemplate} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Left" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Left" width="120" />
            </ColumnsDirective>
        </GanttComponent>
    );
};

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

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

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

    // Custom date template
    const dateTemplate = (props: { StartDate: string }) => {
        const date: Date = new Date(props.StartDate);
        return (
            <span>
                {date.getFullYear()}/{date.toLocaleString('default', { month: 'short' })}/{date.getDate()}
            </span>
        );
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Left" width="120" template={dateTemplate} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Left" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Left" width="120" />
            </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/33.2.3/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>

In React, you can use JavaScript or TypeScript formatting utilities like Intl.NumberFormat or toLocaleString() to format values such as dates, currency, decimals, or percentages in column templates based on your requirements.

Custom formatting

The Syncfusion® Gantt Chart component supports custom formatting for numeric and date values. You can use the format property to display data in a specific format based on requirements.

In the example below, numberFormatOptions is used for the Progress column to show four decimal places, and dateFormatOptions is used for the StartDate column to display the date as day-of-week, month abbreviation, day, and 2-digit year (e.g., Sun, May 8, ‘23).

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',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

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

    // Date format options.
    const dateFormatOptions = { type: 'date', format: "EEE, MMM d, ''yy" };

    // Number format options.
    const numberFormatOptions = { format: '##.0000' };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="170" format={dateFormatOptions} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" format={numberFormatOptions} />
            </ColumnsDirective>
        </GanttComponent>
    );
};

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

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

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

    // Date format options.
    const dateFormatOptions = { type: 'date', format: "EEE, MMM d, ''yy" };

    // Number format options.
    const numberFormatOptions = { format: '##.0000' };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            taskFields={taskFields}
            height="430px"
            treeColumnIndex={1}
            splitterSettings={splitterSettings}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="170" format={dateFormatOptions} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" format={numberFormatOptions} />
            </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/33.2.3/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>

To learn more about custom formatting, you can refer to Custom Date formatting and Custom Number formatting.

Align the text of content

You can use the textAlign property in Gantt Chart component to set the alignment of text within column cells. By default, the text is aligned to the left. The available options are:

  • Left: Aligns the text to the left (default).
  • Center: Aligns the text to the center.
  • Right: Aligns the text to the right.
  • Justify: Align the text to the justify.
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 { GanttData } from './datasource';

function App() {
    let gantt = null;

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

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

    const alignmentData = [
        { text: 'Left', value: 'Left' },
        { text: 'Right', value: 'Right' },
        { text: 'Center', value: 'Center' },
        { text: 'Justify', value: 'Justify' }
    ];

    const changeAlignment = (args) => {
        const alignment = args.value;
        if (gantt) {
            const columns = gantt.treeGrid.grid.columns;
            columns.forEach((col) => {
                col.textAlign = alignment;
            });
            gantt.treeGrid.grid.refreshColumns();
        }
    };

    return (
        <div>
            <div style=>
                <label style=>
                    Align the text for columns:
                </label>
                <DropDownListComponent width="120" dataSource={alignmentData} fields= value={alignmentData[1].value} change={changeAlignment} />
            </div>
            <GanttComponent ref={g => gantt = g} id="ganttDefault"
                height="370px" dataSource={GanttData} splitterSettings={splitterSettings} taskFields={taskFields}            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, SplitterSettings } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { GanttData } from './datasource';
import { ColumnModel } from '@syncfusion/ej2-grids';

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

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

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

    const alignmentData = [
        { text: 'Left', value: 'Left' },
        { text: 'Right', value: 'Right' },
        { text: 'Center', value: 'Center' },
        { text: 'Justify', value: 'Justify' }
    ];

    const changeAlignment = (args: ChangeEventArgs) => {
        const alignment = args.value;
        if (gantt) {
            const columns = gantt.treeGrid.grid.columns as ColumnModel[];
            columns.forEach((col: ColumnModel) => {
                col.textAlign = alignment;
            });
            gantt.treeGrid.grid.refreshColumns();
        }
    };

    return (
        <div>
            <div style=>
                <label style=>
                    Align the text for columns:
                </label>
                <DropDownListComponent width="120" dataSource={alignmentData} fields= value={alignmentData[1].value} change={changeAlignment} />
            </div>
            <GanttComponent ref={g => gantt = g} id="ganttDefault"
                height="370px" dataSource={GanttData} splitterSettings={splitterSettings} taskFields={taskFields}            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                </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/33.2.3/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 textAlign property changes the alignment for both the column content and header. If you want to align header differently, you can use the headerTextAlign property.

Render boolean value as checkbox

You can render boolean values as checkboxes in Gantt Chart component by setting the displayAsCheckBox property to true for the desired column. This replaces the default text representation of true or false with a checkbox, making boolean fields visually clearer and more intuitive.

The following sample demonstrates how to display a boolean value as a checkbox for the Verified column.

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

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

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

    return (
        <div>
            <GanttComponent
                dataSource={GanttData}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                treeColumnIndex={1}
                height="430px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="Verified" headerText="Verified" displayAsCheckBox={true} type="boolean" textAlign="Center" width="100" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

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

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

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

    return (
        <div>
            <GanttComponent
                dataSource={GanttData}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                treeColumnIndex={1}
                height="430px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="Verified" headerText="Verified" displayAsCheckBox={true} type="boolean" textAlign="Center" width="100" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                </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/33.2.3/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 displayAsCheckBox property is only applicable to boolean values in Gantt columns.
  • When displayAsCheckBox is set to true, the boolean values will be rendered as checkboxes in the Gantt column, with checked state indicating true and unchecked state indicating false.

How to prevent checkbox for particular row

You can prevent the checkbox from rendering in a specific row of the Gantt even when displayAsCheckBox is set to true for the column. This can be done using the rowDataBound event, where you check the row index and conditionally set the inner HTML of the target cell to an empty string to hide the checkbox.

The following sample hides the checkbox for the row with ariaRowIndex set to 3.

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

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

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

    const rowDataBound = (args) => {
        if (args.row && args.row.getAttribute('aria-rowindex') === '3') {
            args.row.children[3].innerHTML = '';
        }
    };

    return (
        <div>
            <GanttComponent
                dataSource={GanttData}
                taskFields={taskFields}
                treeColumnIndex={1}
                splitterSettings={splitterSettings}
                height="430px"
                rowDataBound={rowDataBound}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width={90} />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width={270} />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width={90} />
                    <ColumnDirective field="verified" headerText="Verified" displayAsCheckBox={true} type="boolean" textAlign="Center" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={120} />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

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

function App() {
    const taskFields: object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
        verified: 'verified'
    };

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

    const rowDataBound = (args: RowDataBoundEventArgs) => {
        if (args.row && args.row.getAttribute('aria-rowindex') === '3') {
            args.row.children[3].innerHTML = '';
        }
    };

    return (
        <div>
            <GanttComponent
                dataSource={GanttData}
                taskFields={taskFields}
                treeColumnIndex={1}
                splitterSettings={splitterSettings}
                height="430px"
                rowDataBound={rowDataBound}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width={90} />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width={270} />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width={90} />
                    <ColumnDirective field="verified" headerText="Verified" displayAsCheckBox={true} type="boolean" textAlign="Center" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={120} />
                </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/33.2.3/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>

AutoFit columns

The Syncfusion® Gantt Chart component for React supports automatic column width adjustment based on content. Double-clicking the column header resizer adjusts the width to fit the maximum content, ensuring clear data visibility without wrapping.

To enable this feature, set allowResizing to true and inject Resize in the Gantt Chart component.

The following screenshot represents the resizing the column using resizer symbol.

Resizing

Resizing a column to fit its content using method support

You can resize a column in Gantt to fit its content using the autoFitColumns method from the treeGrid object. This adjusts the column width based on the widest cell without wrapping. To apply this during initial rendering, call the method in the dataBound event.

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

function App() {
    var gantt = null;

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

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

    const dataBound = () => {
        gantt.treeGrid.autoFitColumns(['TaskName']);
    };

    return (
        <div>
            <GanttComponent
                ref={g=> gantt = g}
                dataSource={GanttData}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                height="430px"
                allowResizing={true}
                dataBound={dataBound}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width={90} />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width={270} />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" width={120} />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width={90} />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={120} />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

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

function App() {
    var gantt: GanttComponent = null;

    const taskFields: object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };

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

    const dataBound = () => {
        gantt.treeGrid.autoFitColumns(['TaskName']);
    };

    return (
        <div>
            <GanttComponent
                ref={g=> gantt = g}
                dataSource={GanttData}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                height="430px"
                allowResizing={true}
                dataBound={dataBound}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width={90} />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width={270} />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" width={120} />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width={90} />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={120} />
                </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/33.2.3/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>

You can autofit all the columns by invoking the autoFitColumns method without specifying column names.

Locked columns

You can lock columns in Syncfusion® Gantt Chart component to prevent them from being reordered and to keep them fixed at the first position. This is achieved by setting the column.lockColumn property to true in the column configuration. To visually differentiate locked columns, you can apply custom CSS using attribute selectors.

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

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

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

    return (
        <div>
            <GanttComponent
                dataSource={GanttData}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                height="430px"
                allowReordering={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                    <ColumnDirective
                        field="TaskName"
                        headerText="Task Name"
                        width="270"
                        lockColumn={true}
                        customAttributes=
                    />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

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

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

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

    return (
        <div>
            <GanttComponent
                dataSource={GanttData}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                height="430px"
                allowReordering={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                    <ColumnDirective
                        field="TaskName"
                        headerText="Task Name"
                        width="270"
                        lockColumn={true}
                        customAttributes=
                    />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </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/33.2.3/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-grid .e-rowcell.customcss {
            background-color: #ecedee;
        }

        .e-grid .e-headercell.customcss {
            background-color: #ecedee;
        }
    </style>
</head>

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

</html>

Show or hide columns

The Syncfusion® React Gantt Chart component allows dynamic control over column visibility using built-in properties and methods. This is useful for customizing which columns are shown or hidden based on specific requirements.

Using property

You can control the visibility of columns in the React Gantt Chart component by setting the visible property of each column to true or false.

The following example illustrates how to dynamically toggle the visibility of the Duration column. Initially, the column is set with the visible property as false. When the switch component triggers a change event, the getColumnByField method retrieves the column, its visible property is updated based on the switch state, and refreshColumns is called to apply the changes to the UI.

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

function App() {
    var gantt;

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

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

    const handleSwitchChange = (args) => {
        if (gantt) {
            const durationColumn = gantt.treeGrid.grid.getColumnByField('Duration');
            durationColumn.visible = args.checked ? true : false;
            gantt.treeGrid.grid.refreshColumns();
        }
    };

    return (
        <div>
            <div style=>
                <label style=>Enable or disable visible property</label>
                <SwitchComponent id="switch" change={handleSwitchChange} />
            </div>
            <GanttComponent
                ref={g => gantt = g}
                dataSource={data}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                treeColumnIndex={1}
                height="430px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" visible={false} />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

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

function App() {
    var gantt: GanttComponent;

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

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

    const handleSwitchChange = (args: ChangeEventArgs) => {
        if (gantt) {
            const durationColumn = gantt.treeGrid.grid.getColumnByField('Duration');
            durationColumn.visible = args.checked ? true : false;
            gantt.treeGrid.grid.refreshColumns();
        }
    };

    return (
        <div>
            <div style=>
                <label style=>Enable or disable visible property</label>
                <SwitchComponent id="switch" change={handleSwitchChange} />
            </div>
            <GanttComponent
                ref={g => gantt = g}
                dataSource={data}
                taskFields={taskFields}
                splitterSettings={splitterSettings}
                treeColumnIndex={1}
                height="430px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" visible={false} />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
                </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/33.2.3/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>

  • Hiding a column using the visible property affects only its display; the data remains accessible in the source.
  • Hidden columns are excluded from the total width calculation.
  • To keep a column hidden permanently, set visible to false or remove its definition.

Using methods

You can also show or hide columns in the React Gantt Chart component using the showColumn and hideColumn methods available in the Gantt. These methods allow you to control column visibility based on either the headerText or the field property.

Based on header text:

You can dynamically show or hide columns by passing either a single header text or an array of header texts as the first parameter, and specifying headerText as the second parameter. This enables dynamic control over column visibility based on the displayed header.

You can use the getGanttColumns method to retrieve all defined columns, and the getVisibleColumns method to get only the visible columns.

The following sample demonstrates how to hide and show columns using button clicks. When the Hide Column button is clicked, the hideColumn method is called with Duration as the first parameter and headerText as the second. Clicking the Show Column button restores the column using the showColumn method.

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

function App() {
    var gantt = null;

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

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

    const showColumn = () => {
        if (gantt) {
            const allColumns = gantt.getGanttColumns();
            if (allColumns.length > 0) {
                const firstColumnHeader = allColumns[2].headerText as string;
                gantt.showColumn(firstColumnHeader, 'headerText');
            }
        }
    };

    const hideColumn = () => {
        if (gantt) {
            const visibleColumns = gantt.treeGrid.getVisibleColumns();
            if (visibleColumns.length > 0) {
                const firstVisibleHeader = visibleColumns[2].headerText;
                gantt.hideColumn(firstVisibleHeader, 'headerText');
            }
        }
    };

    return (<div>
            <ButtonComponent id="show" onClick={showColumn} style=>
                Show Column
            </ButtonComponent>
            <ButtonComponent id="hide" onClick={hideColumn}>
                Hide Column
            </ButtonComponent>
            <GanttComponent
                ref={g => gantt = g}
                height="430px"
                dataSource={data}
                taskFields={taskSettings}
                treeColumnIndex={1}
                splitterSettings={splitterSettings}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
};

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

function App() {
    var gantt: GanttComponent = null;

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

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

    const showColumn = () => {
        if (gantt) {
            const allColumns = gantt.getGanttColumns();
            if (allColumns.length > 0) {
                const firstColumnHeader = allColumns[2].headerText as string;
                gantt.showColumn(firstColumnHeader, 'headerText');
            }
        }
    };

    const hideColumn = () => {
        if (gantt) {
            const visibleColumns = gantt.treeGrid.getVisibleColumns();
            if (visibleColumns.length > 0) {
                const firstVisibleHeader = visibleColumns[2].headerText;
                gantt.hideColumn(firstVisibleHeader, 'headerText');
            }
        }
    };

    return (<div>
            <ButtonComponent id="show" onClick={showColumn} style=>
                Show Column
            </ButtonComponent>
            <ButtonComponent id="hide" onClick={hideColumn}>
                Hide Column
            </ButtonComponent>
            <GanttComponent
                ref={g => gantt = g}
                height="430px"
                dataSource={data}
                taskFields={taskSettings}
                treeColumnIndex={1}
                splitterSettings={splitterSettings}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                </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/33.2.3/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>

Based on field:

You can dynamically show or hide columns by passing either a single field name or an array of field names as the first parameter, and field as the second parameter to indicate that visibility is controlled using the field name.

The following sample demonstrates how to hide and show columns using button clicks. When the Hide Column button is clicked, the hideColumn method is triggered with ['TaskName', 'Duration'] as the first parameter and field as the second. Clicking the Show Column button displays the columns again using the showColumn method.

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

function App() {
  let gantt = null;

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

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

  const showColumns = () => {
    if (gantt) {
      gantt.showColumn(['TaskName', 'Duration'], 'field');
    }
  };

  const hideColumns = () => {
    if (gantt) {
      gantt.hideColumn(['TaskName', 'Duration'], 'field');
    }
  };

  return (
    <div>
      <ButtonComponent id="show" onClick={showColumns} style=>
        Show Column
      </ButtonComponent>
      <ButtonComponent id="hide" onClick={hideColumns}>
        Hide Column
      </ButtonComponent>
      <br /><br /><br />
      <GanttComponent
        ref={(g) => (gantt = g)}
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        treeColumnIndex={1}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
          <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
          <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
          <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
          <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
        </ColumnsDirective>
      </GanttComponent>
    </div>
  );
}

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

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

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

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

  const showColumns = () => {
    if (gantt) {
      gantt.showColumn(['TaskName', 'Duration'], 'field');
    }
  };

  const hideColumns = () => {
    if (gantt) {
      gantt.hideColumn(['TaskName', 'Duration'], 'field');
    }
  };

  return (
    <div>
      <ButtonComponent id="show" onClick={showColumns} style=>
        Show Column
      </ButtonComponent>
      <ButtonComponent id="hide" onClick={hideColumns}>
        Hide Column
      </ButtonComponent>
      <br /><br /><br />
      <GanttComponent
        ref={(g) => (gantt = g)}
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        treeColumnIndex={1}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
          <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
          <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
          <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
          <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
        </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/33.2.3/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>

Controlling Gantt actions

You can manage actions like filtering, sorting, resizing, reordering, editing, and searching for specific columns in the Syncfusion® React Gantt using the following options:

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

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

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

    return (
        <div>
            <GanttComponent
                height="430px"
                dataSource={data}
                taskFields={taskSettings}
                treeColumnIndex={1}
                splitterSettings={splitterSettings}
                allowSorting={true}
                allowFiltering={true}
                allowReordering={true}
                allowResizing={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="120" allowSorting={false} />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" allowFiltering={false} />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" allowResizing={false} />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="150" allowReordering={false} />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
                </ColumnsDirective>
                <Inject services={[Resize, Reorder, Sort, Filter]} />
            </GanttComponent>
        </div>
    );
}

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

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

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

    return (
        <div>
            <GanttComponent
                height="430px"
                dataSource={data}
                taskFields={taskSettings}
                treeColumnIndex={1}
                splitterSettings={splitterSettings}
                allowSorting={true}
                allowFiltering={true}
                allowReordering={true}
                allowResizing={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="120" allowSorting={false} />
                    <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" allowFiltering={false} />
                    <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="150" allowResizing={false} />
                    <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="150" allowReordering={false} />
                    <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
                </ColumnsDirective>
                <Inject services={[Resize, Reorder, Sort, Filter]} />
            </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/33.2.3/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>

Customize column styles

Customizing Gantt column styles allows you to modify the appearance to match your design needs. You can customize font, background color, and other style attributes using supported events, CSS, properties, or methods.

For more information check on this documentation.

Updating column definitions

To update column definitions in React Gantt Chart component, modify the columns property to adjust column appearance and behavior by changing attributes like headerText, width, or visible. After making the required updates, use the refreshColumns method from the treeGrid object to apply and reflect the changes in the Gantt chart.

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

function App() {
  let gantt = null;

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

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

  const updateColumns = () => {
    if (gantt) {
      const columns = gantt.treeGrid.columns;
      if (columns && columns.length > 0) {
        columns[0].textAlign = 'Center';
        columns[0].width = '100';
        columns[2].visible = false;
        columns[1].customAttributes = { class: 'customcss' };
        gantt.treeGrid.refreshColumns();
      }
    }
  };

  return (
    <div>
      <ButtonComponent cssClass="e-info" style= onClick={updateColumns}>
        Update Columns
      </ButtonComponent>
      <GanttComponent
        ref={(g) => (gantt = g)}
        height="430px"
        dataSource={GanttData}
        taskFields={taskSettings}
        treeColumnIndex={1}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
          <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
          <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
          <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
        </ColumnsDirective>
      </GanttComponent>
    </div>
  );
}

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

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

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

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

  const updateColumns = () => {
    if (gantt) {
      const columns = gantt.treeGrid.columns;
      if (columns && columns.length > 0) {
        columns[0].textAlign = 'Center';
        columns[0].width = '100';
        columns[2].visible = false;
        columns[1].customAttributes = { class: 'customcss' };
        gantt.treeGrid.refreshColumns();
      }
    }
  };

  return (
    <div>
      <ButtonComponent cssClass="e-info" style= onClick={updateColumns}>
        Update Columns
      </ButtonComponent>
      <GanttComponent
        ref={(g) => (gantt = g)}
        height="430px"
        dataSource={GanttData}
        taskFields={taskSettings}
        treeColumnIndex={1}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
          <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
          <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
          <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
        </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/33.2.3/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-headercell.customcss {
            background-color: rgb(43, 195, 226);
        }

        .e-gantt .e-grid .e-rowcell.customcss {
            background-color: rgb(43, 195, 226);
        }
    </style>
</head>

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

</html>

Adding/removing columns

You can add or remove columns in the React Gantt by updating the columns option in the Gantt instance. To add a column, push a new column object into the columns array. To remove a column, use pop to delete the last item or splice to remove a specific one from the array.

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

function App() {
  let gantt = null;

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

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

  const addColumns = () => {
    const newColumns = [
      { field: 'TaskID', headerText: 'TaskID', width: 120 },
      { field: 'StartDate', headerText: 'StartDate', width: 120, format: 'yMd' }
    ];
    newColumns.forEach(col => {
      gantt.treeGrid.grid.columns.push(col);
    });
    gantt.treeGrid.grid.refreshColumns();
  };

  const deleteColumns = () => {
    gantt.treeGrid.grid.columns.pop();
    gantt.treeGrid.grid.refreshColumns();
  };

  return (
    <div>
      <div style=>
        <ButtonComponent id="add" cssClass="e-info" onClick={addColumns} style=>
          Add Column
        </ButtonComponent>
        <ButtonComponent id="delete" cssClass="e-info" onClick={deleteColumns}>
          Delete Column
        </ButtonComponent>
      </div>
      <GanttComponent
        ref={g => (gantt = g)}
        height="430px"
        dataSource={GanttData}
        taskFields={taskSettings}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
          <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
          <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
          <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
        </ColumnsDirective>
      </GanttComponent>
    </div>
  );
}

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

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

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

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

  const addColumns = () => {
    const newColumns = [
      { field: 'TaskID', headerText: 'TaskID', width: 120 },
      { field: 'StartDate', headerText: 'StartDate', width: 120, format: 'yMd' }
    ];
    newColumns.forEach(col => {
      gantt.treeGrid.grid.columns.push(col);
    });
    gantt.treeGrid.grid.refreshColumns();
  };

  const deleteColumns = () => {
    gantt.treeGrid.grid.columns.pop();
    gantt.treeGrid.grid.refreshColumns();
  };

  return (
    <div>
      <div style=>
        <ButtonComponent id="add" cssClass="e-info" onClick={addColumns} style=>
          Add Column
        </ButtonComponent>
        <ButtonComponent id="delete" cssClass="e-info" onClick={deleteColumns}>
          Delete Column
        </ButtonComponent>
      </div>
      <GanttComponent
        ref={g => (gantt = g)}
        height="430px"
        dataSource={GanttData}
        taskFields={taskSettings}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
          <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="270" />
          <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
          <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
          <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
        </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/33.2.3/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-grid .e-rowcell.customcss {
            background-color: #ecedee;
        }

        .e-grid .e-headercell.customcss {
            background-color: #ecedee;
        }
    </style>
</head>

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

</html>

Responsive columns

The Syncfusion® React Gantt Chart component provides a built-in feature to control column visibility based on media queries using the hideAtMedia property in the column object. This method can be used to hide columns automatically when the screen width matches specified media query conditions.

The following example demonstrates a Gantt chart where the Task Name column is set to (min-width: 700px), meaning it will be hidden when the browser width is less than or equal to 700px. Similarly, the Duration column is set to (max-width: 500px), so it will be hidden when the browser width exceeds 500px.

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 taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

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

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      treeColumnIndex={1}
      splitterSettings={splitterSettings}
      allowResizing={true}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
        <ColumnDirective
          field="TaskName"
          headerText="Task Name"
          textAlign="Left"
          width="290"
          hideAtMedia="(min-width: 700px)"
        />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
        <ColumnDirective
          field="Duration"
          headerText="Duration"
          textAlign="Right"
          width="90"
          hideAtMedia="(max-width: 500px)"
        />
        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
      </ColumnsDirective>
    </GanttComponent>
  );
}

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

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

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

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      treeColumnIndex={1}
      splitterSettings={splitterSettings}
      allowResizing={true}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
        <ColumnDirective
          field="TaskName"
          headerText="Task Name"
          textAlign="Left"
          width="290"
          hideAtMedia="(min-width: 700px)"
        />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
        <ColumnDirective
          field="Duration"
          headerText="Duration"
          textAlign="Right"
          width="90"
          hideAtMedia="(max-width: 500px)"
        />
        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="150" />
      </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/33.2.3/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>

Clip mode

The clip mode provides options to display overflow cell content using the columns.clipMode property. The following are three types of clipMode:

  • Clip: Truncates content that exceeds the cell width.
  • Ellipsis: Displays ellipsis when content exceeds the cell area.
  • EllipsisWithTooltip: Displays ellipsis and shows full content in a tooltip on hover.

By default, all the column’s clipMode property is defined as EllipsisWithTooltip.

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 taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };

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

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      treeColumnIndex={1}
      splitterSettings={splitterSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width={120} />
        <ColumnDirective
          field="TaskName"
          headerText="Task Name"
          textAlign="Right"
          clipMode="EllipsisWithTooltip"
          width={90}
        />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width={60} />
        <ColumnDirective
          field="Duration"
          headerText="Duration"
          textAlign="Right"
          clipMode="Ellipsis"
          width={60}
        />
        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={190} />
      </ColumnsDirective>
    </GanttComponent>
  );
}

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

function App() {
  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };

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

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      treeColumnIndex={1}
      splitterSettings={splitterSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width={120} />
        <ColumnDirective
          field="TaskName"
          headerText="Task Name"
          textAlign="Right"
          clipMode="EllipsisWithTooltip"
          width={90}
        />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width={60} />
        <ColumnDirective
          field="Duration"
          headerText="Duration"
          textAlign="Right"
          clipMode="Ellipsis"
          width={60}
        />
        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={190} />
      </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/33.2.3/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>