Columns in React Gantt component

30 Jan 202524 minutes to read

The column displays information from a bound data source, and you can edit the values of column to update the task details through TreeGrid. The operations such as sorting, filtering, and searching can be performed based on column definitions. To display a Gantt column, the field property should be mapped from the data source to the column.

If the column field is not specified in the data source, the column values will be empty.

The treeColumnIndex property is used to define the expander column in the Gantt component to expand and collapse the child rows.

Defining columns

Using the columns property, you can define the columns in Gantt. If the columns are not defined, then the default columns will be rendered based on the mapped data source fields in the taskFields property. Refer to the following code example for defining the columns in Gantt along with their widths.

index.jsx

let data = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 50 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 50 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 50 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 50 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 50 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 50 }
];

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

function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    return <GanttComponent dataSource={data} taskFields={taskFields} height='450px'>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' width='150' ></ColumnDirective>
            <ColumnDirective field='TaskName' width='250'></ColumnDirective>
        </ColumnsDirective>
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

let data: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 50 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 50 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 50 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 50 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 50 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 50 }
];
  
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { GanttComponent,ColumnsDirective,ColumnDirective } from '@syncfusion/ej2-react-gantt';
  
  function App (){
      const taskFields: any = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
          return <GanttComponent dataSource={data} taskFields={taskFields} height = '450px'>
           <ColumnsDirective>
                  <ColumnDirective field='TaskID' width='150' ></ColumnDirective>
                  <ColumnDirective field='TaskName' width='250'></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>
  };
  ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Custom column header

The column header text can be defined using the headerText property, and you can customize the column headers using the headerTemplate property.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
   const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
 };
  const splitterSettings = {
      columnIndex: 7
  };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'>
            <ColumnsDirective>
                <ColumnDirective field='TaskName' headerText='Job Name' headerTemplate={() => {
                  return (<div><img src="taskname.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Task Name</b></div>);
                }}></ColumnDirective>
                <ColumnDirective field='StartDate' headerTemplate={() => {
                  return (<div><img src="startdate.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Start Date</b></div>);
                }}></ColumnDirective>
                <ColumnDirective field='Duration' headerTemplate={() => {
                  return (<div><img src="duration.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Duration</b></div>);
                }}></ColumnDirective>
                <ColumnDirective field='Progress' headerTemplate={() => {
                  return (<div><img src="progress.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Progress</b></div>);
                }}></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
   const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
 };
  const splitterSettings: any = {
      columnIndex: 7
  };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'>
            <ColumnsDirective>
                <ColumnDirective field='TaskName' headerText='Job Name' headerTemplate={() => {
                  return (<div><img src="taskname.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Task Name</b></div>);
                }}></ColumnDirective>
                <ColumnDirective field='StartDate' headerTemplate={() => {
                  return (<div><img src="startdate.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Start Date</b></div>);
                }}></ColumnDirective>
                <ColumnDirective field='Duration' headerTemplate={() => {
                  return (<div><img src="duration.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Duration</b></div>);
                }}></ColumnDirective>
                <ColumnDirective field='Progress' headerTemplate={() => {
                  return (<div><img src="progress.png" width="20" height="20" className="e-image" />
                    <b className='e-header'>Progress</b></div>);
                }}></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Format

To format the cell values based on a specific culture, use the columns.format property. The Gantt component uses the Internationalization library to format number and date values.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
    const  taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const  splitterSettings = {
      columnIndex : 4
  };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'>
            <ColumnsDirective>
                <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
                <ColumnDirective field='TaskName' headerText='Job Name' width='250'></ColumnDirective>
                <ColumnDirective field='StartDate'></ColumnDirective>
                <ColumnDirective field='Progress' format='P2'></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Predecessor'></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
    const  taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const  splitterSettings = {
      columnIndex : 4
  };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'>
            <ColumnsDirective>
                <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
                <ColumnDirective field='TaskName' headerText='Job Name' width='250'></ColumnDirective>
                <ColumnDirective field='StartDate'></ColumnDirective>
                <ColumnDirective field='Progress' format='P2'></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Predecessor'></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

By default, the number and date values are formatted in en-US culture.

Number formatting

The number or integer values can be formatted using the following format strings.

Format	Description	Remarks
N	Denotes numeric type.	The numeric format is followed by an integer value like N2 or N3, which denotes the number of precisions to be allowed.
C	Denotes currency type.	The currency format is followed by an integer value like C2 or C3, which denotes the number of precisions to be allowed.
P	Denotes percentage type	The percentage format expects the input value to be in the range of 0 to 100. For example, the cell value 0.2 is formatted as 20%. The percentage format is followed by an integer value like P2, P3, which denotes the number of precisions to be allowed.

Date formatting

You can format date values either using the built-in date format string or a custom format string.

For the built-in date format, you can specify the columns.format property as string (example: yMd).

You can also use the custom format string to format the date values. Some of the custom formats and the formatted date values are given in the following table.

Format	Formatted value
{ type:’date’, format:’dd/MM/yyyy’ }	04/07/2019
{ type:’date’, format:’dd.MM.yyyy’ }	04.07.2019
{ type:’date’, skeleton:’short’ }	7/4/19
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ }	04/07/2019 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ }	07/04/2019 12:00:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy HH:mm:ss’ }	07/04/2019 17:00:00

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App () {
   const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
  const  splitterSettings = {
        columnIndex: 4
    };
  const  formatOption = { type: 'date', format: 'dd.MM.yyyy' };
  
        return <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px'>
            <ColumnsDirective>
                <ColumnDirective field='TaskID' width='100'></ColumnDirective>
                <ColumnDirective field='TaskName' headerText='Job Name' width='250'></ColumnDirective>
                <ColumnDirective field='StartDate' format={formatOption}></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Progress'></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>;
    }

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

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  public splitterSettings: any = {
      columnIndex : 4
  };
  public formatOption: Object = {type:'date', format:'dd.MM.yyyy'};
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}
        splitterSettings={this.splitterSettings} height = '450px'>
            <ColumnsDirective>
                <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
                <ColumnDirective field='TaskName' headerText='Job Name' width='250'></ColumnDirective>
                <ColumnDirective field='StartDate' format={this.formatOption}></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Progress'></ColumnDirective>
            </ColumnsDirective>
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Change tree/expander column

The tree/expander column is a column in the Gantt component, that has icons to expand or collapse the parent records. You can define the tree column index in the Gantt component by using the treeColumnIndex property and the default value of this property is 0. The following code example shows how to use this property.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
    const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings = {
    position : '90%'
};
        return <GanttComponent dataSource={data} splitterSettings={splitterSettings} taskFields={taskFields} treeColumnIndex={2}
        height = '450px'>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings: any = {
    position : '90%'
};
        return <GanttComponent dataSource={data} splitterSettings={splitterSettings} taskFields={taskFields} treeColumnIndex={2}
        height = '450px'>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Show or hide columns dynamically

You can show or hide gantt columns dynamically using external buttons by invoking the showColumn or hideColumn method.

index.jsx

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

function  App(){
    let ganttInstance;
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
   const splitterSettings = {
        columnIndex : 5
    };
    function show() {
        /** show by HeaderText */
        ganttInstance.showColumn(['Duration']);
    }

    function hide(){
        /** hide by HeaderText */
        ganttInstance.hideColumn(['Duration']);
    }
        return (<div>
        <ButtonComponent onClick= { show }>Show</ButtonComponent>
        <ButtonComponent onClick= { hide }>Hide</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'
        ref={gantt => ganttInstance = gantt}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration' headerText='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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

function  App(){
    let ganttInstance: GanttComponent;
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
   const splitterSettings: any = {
        columnIndex : 5
    };
    function show() {
        /** show by HeaderText */
        ganttInstance.showColumn(['Duration']);
    }

    function hide(){
        /** hide by HeaderText */
        ganttInstance.hideColumn(['Duration']);
    }
        return (<div>
        <ButtonComponent onClick= { show }>Show</ButtonComponent>
        <ButtonComponent onClick= { hide }>Hide</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'
        ref={gantt => ganttInstance = gantt}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration' headerText='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Controlling Gantt column actions

You can enable or disable gantt action for a particular column by setting the allowFiltering, allowSorting, allowReordering, and allowEditing properties.

index.jsx

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

    function App(){
        const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const splitterSettings = {
        position : '90%'
    };
    let ganttInstance;
    const editSettings = {
        allowEditing : true
    };
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px' allowSorting={true} allowFiltering={true} allowReordering={true} editSettings={editSettings}
        ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' allowSorting= {false}></ColumnDirective>
            <ColumnDirective field='StartDate' allowEditing= {false}></ColumnDirective>
            <ColumnDirective field='Duration' allowFiltering= {false}></ColumnDirective>
            <ColumnDirective field='Progress' allowReordering= {false}></ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, Reorder, Edit]}/>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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

    function App(){
        const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const splitterSettings: any = {
        position : '90%'
    };
    let ganttInstance:any;
    const editSettings: any = {
        allowEditing : true
    };
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px' allowSorting={true} allowFiltering={true} allowReordering={true} editSettings={editSettings}
        ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' allowSorting= {false}></ColumnDirective>
            <ColumnDirective field='StartDate' allowEditing= {false}></ColumnDirective>
            <ColumnDirective field='Duration' allowFiltering= {false}></ColumnDirective>
            <ColumnDirective field='Progress' allowReordering= {false}></ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, Reorder, Edit]}/>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Column type

Column type can be specified using the columns.type property. It specifies the type of data the column binds.

If the format is defined for a column, the column uses type to select the appropriate format option number or date.

Gantt column supports the following types:

• string
• number
• boolean
• date
• datetime

If the type is not defined, it will be determined from the first record of the dataSource.
In case if the first record of the dataSource is null/blank value for a column then it is necessary to define the type for that column.