Syncfusion AI Assistant

How can I help you?

Filtering in React Gantt Chart Component

31 Jan 202624 minutes to read

Filtering allows you to view specific or related records based on filter criteria. This can be done in the Gantt Chart component by using the filter menu and toolbar search. To enable filtering in the Gantt Chart component, set the allowFiltering to true. Menu -filtering support can be configured using the filterSettings property and toolbar searching can be configured using the searchSettings property.

To use filter, inject the Filter module into the Gantt Chart component.

Filter hierarchy modes

The Gantt Chart component supports a set of filtering modes with the filterSettings.hierarchyMode property. The following are the types of filter hierarchy modes available in the Gantt Chart component:

  • Parent: This is the default filter hierarchy mode in Gantt. The filtered records are displayed with their parent records. If the filtered records do not have any parent record, then only the filtered records will be displayed.

  • Child: Displays the filtered records with their child record. If the filtered records do not have any child record, then only the filtered records will be displayed.

  • Both: Displays the filtered records with their both parent and child records. If the filtered records do not have any parent or child records, then only the filtered records will be displayed.

  • None: Displays only the filtered records.

let DropData =  [
    { text: 'Parent', value: 'Parent' },
    { text: 'Child', value: 'Child' },
    { text: 'Both', value: 'Both' },
    { text: 'None', value: 'None' },
  ];
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
  import { GanttComponent, Inject, Filter } 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'
    };
    function onChange(sel) {
          let mode= sel.value.toString();
          ganttInstance.filterSettings.hierarchyMode = mode;
          ganttInstance.clearFiltering();
      }
      return(<div>
          <DropDownListComponent dataSource={DropData}
          change={onChange} width= {150} value="Parent"></DropDownListComponent>
          <GanttComponent dataSource={data} taskFields={taskFields}
           allowFiltering={true} height = '450px' ref={gantt => ganttInstance = gantt}>
            <Inject services={[Filter]} />
          </GanttComponent></div>)
      };
  ReactDOM.render(<App />, document.getElementById('root'));
let DropData: any[] =  [
  { text: 'Parent', value: 'Parent' },
  { text: 'Child', value: 'Child' },
  { text: 'Both', value: 'Both' },
  { text: 'None', value: 'None' },
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DropDownListComponent, ChangeEventArgs } from "@syncfusion/ej2-react-dropdowns";
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
    let ganttInstance: any;
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  function onChange(sel: ChangeEventArgs): void {
        let mode:any = sel.value.toString();
        ganttInstance.filterSettings.hierarchyMode = mode;
        ganttInstance.clearFiltering();
    }
    return(<div>
        <DropDownListComponent dataSource={DropData}
        change={onChange} width= {150} value="Parent"></DropDownListComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
         allowFiltering={true} height = '450px' ref={gantt => ganttInstance = gantt}>
          <Inject services={[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.1.44/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>

Initial filter

To apply the filter at initial rendering, set the filter to predicate object in the filterSettings.columns property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter} 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 FilterOptions = {
    columns: [
        { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
       { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }]
};
     return <GanttComponent dataSource={data} taskFields={taskFields}
         allowFiltering={true} filterSettings={FilterOptions} height = '450px'>
         <Inject services={[Filter]} />
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, FilterSettingsModel } 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 FilterOptions: FilterSettingsModel = {
    columns: [
        { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
       { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }]
};
     return <GanttComponent dataSource={data} taskFields={taskFields}
         allowFiltering={true} filterSettings={FilterOptions} height = '450px'>
         <Inject services={[Filter]} />
        </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.1.44/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>

Filter operators

The filter operator for a column can be defined in the filterSettings.columns.operator property.

The available operators and their supported data types are:

Operator Description Supported Types
startswith Checks whether the value begins with the specified value. String
endswith Checks whether the value ends with the specified value. String
contains Checks whether the value contains the specified value. String
equal Checks whether the value is equal to the specified value. String | Number | Boolean | Date
notequal Checks for the values that are not equal to the specified value. String | Number | Boolean | Date
greaterthan Checks whether the value is greater than the specified value. Number | Date
greaterthanorequal Checks whether the value is greater than or equal to the specified value. Number | Date
lessthan Checks whether the value is less than the specified value. Number | Date
lessthanorequal Checks whether the value is less than or equal to the specified value. Number | Date

By default, the filterSettings.columns.operator value is equal

Diacritics

By default, the Gantt Chart component ignores the diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent to true.

In the following sample, type Perform in the TaskName column to filter diacritic characters.

let data = [
    { TaskID: 1, TaskName: 'Projéct initiàtion', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
    { TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
    { TaskID: 3, TaskName: 'Perförm soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
    { TaskID: 4, TaskName: 'Soil tëst appröval', 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: 'Develöp floor plan for estimàtion', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
    { TaskID: 7, TaskName: 'List matërials', 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, Inject, Filter} from '@syncfusion/ej2-react-gantt';
  
  function App(){
   const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const FilterOptions = {
            ignoreAccent:true
        };
  return <GanttComponent dataSource={data} taskFields={taskFields}
         allowFiltering={true} filterSettings={FilterOptions} height = '450px'>
            <Inject services={[Filter]} />
        </GanttComponent>
    };
  ReactDOM.render(<App />, document.getElementById('root'));
let data: Object[] = [
    { TaskID: 1, TaskName: 'Projéct initiàtion', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
    { TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
    { TaskID: 3, TaskName: 'Perförm soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
    { TaskID: 4, TaskName: 'Soil tëst appröval', 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: 'Develöp floor plan for estimàtion', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
    { TaskID: 7, TaskName: 'List matërials', 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, Inject, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-gantt';
  
  function App(){
   const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const FilterOptions: FilterSettingsModel = {
            ignoreAccent:true
        };
  return <GanttComponent dataSource={data} taskFields={taskFields}
         allowFiltering={true} filterSettings={FilterOptions} height = '450px'>
            <Inject services={[Filter]} />
        </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.1.44/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>

Filtering a specific column by method

You can filter the columns dynamically by using the filterByColumn method.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
     const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
   let ganttInstance;
   function clickHandler() {
        ganttInstance.filterByColumn('TaskName', 'startswith', 'Perf');
    }
  return (<div>
    <ButtonComponent onClick={clickHandler}>Filter Column</ButtonComponent>
    <GanttComponent dataSource={data} taskFields={taskFields} allowFiltering={true} height='450px' ref={gantt => ganttInstance = gantt}>
        <Inject services={[Filter]}/>
    </GanttComponent></div>);
    };
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
     const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
   let ganttInstance;
   function clickHandler() {
        ganttInstance.filterByColumn('TaskName', 'startswith', 'Perf');
    }
  return (<div>
    <ButtonComponent onClick={clickHandler}>Filter Column</ButtonComponent>
    <GanttComponent dataSource={data} taskFields={taskFields} allowFiltering={true} height='450px' ref={gantt => ganttInstance = gantt}>
        <Inject services={[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.1.44/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>

Clear filtered columns

You can clear all the filtering conditions done in the Gantt Chart component by using the clearFiltering method.The following code snippet explains the above behavior.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } 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 FilterOptions = {
            columns: [
                { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'perfor' },
               { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 3 }]
        };
  function clickHandler(){
    ganttInstance .clearFiltering();
}
    return(<div>
        <ButtonComponent  onClick= {clickHandler}>Clear Filter</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields} filterSettings={FilterOptions}
         allowFiltering={true} height = '450px' ref={gantt => ganttInstance  = gantt}>
            <Inject services={[Filter]} />
        </GanttComponent></div>)
    };
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
    let ganttInstance : any;
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
 const FilterOptions: FilterSettingsModel = {
            columns: [
                { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'perfor' },
               { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 3 }]
        };
  function clickHandler(){
    ganttInstance .clearFiltering();
}
    return(<div>
        <ButtonComponent  onClick= {clickHandler}>Clear Filter</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields} filterSettings={FilterOptions}
         allowFiltering={true} height = '450px' ref={gantt => ganttInstance  = gantt}>
            <Inject services={[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.1.44/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>

Custom component in filter menu

The column.filter.ui is used to add custom filter components to a particular column.
To implement a custom filter UI, define the following functions:

  • create: Creates custom component.
  • write: Write events for custom component.
  • read: Read the filter value from custom component.

In the following sample, the dropdown is used as a custom component in the TaskName column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
function App () {
   
      const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
        let dropInstance;
       const Filters = {
            ui: {
                create: (args) => {
                    const flValInput = createElement('input', { className: 'flm-input' });
                    args.target.appendChild(flValInput);
                    dropInstance = new DropDownList({
                        dataSource: new DataManager(data),
                        fields: { text: 'TaskName', value: 'TaskName' },
                        placeholder: 'Select a value',
                        popupHeight: '200px'
                    });
                   dropInstance.appendTo(flValInput);
                },
                read: (args) => {
                    args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value);
                },
                write: (args) => {
                    dropInstance.value = args.filteredValue;
                }
            }
        };
 
 
        return <GanttComponent dataSource={data} taskFields={taskFields} allowFiltering={true} height='450px'>
<ColumnsDirective>
          <ColumnDirective field="TaskID"></ColumnDirective>
          <ColumnDirective field="TaskName" headerText="Job Name" filter={Filters}></ColumnDirective>
          <ColumnDirective field="StartDate"></ColumnDirective>
          <ColumnDirective field="Duration"></ColumnDirective>
          <ColumnDirective field="Progress"></ColumnDirective>
          <ColumnDirective field="Predecessor"></ColumnDirective>
</ColumnsDirective>
<Inject services={[Filter]}/>
    </GanttComponent>;
    
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, IFilter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';

function  App (){
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  let dropInstance:any;
const Filters : IFilter = {
  ui: {
  create: (args: { target: Element, column: object }) => {
      const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
      args.target.appendChild(flValInput);
       dropInstance = new DropDownList({
          dataSource: new DataManager(data),
          fields: { text: 'TaskName', value: 'TaskName' },
          placeholder: 'Select a value',
          popupHeight: '200px'
      });
      dropInstance.appendTo(flValInput);
  },
  read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
      args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value);
      },
  write: (args: {
      column: object, target: Element, parent: any,
      filteredValue: number | string }) => {
          dropInstance.value = args.filteredValue;
      }
  }
  };
    return <GanttComponent dataSource={data} taskFields={taskFields}
         allowFiltering={true} height = '450px'>
    <ColumnsDirective>
              <ColumnDirective field="TaskID" ></ColumnDirective>
              <ColumnDirective
                field="TaskName"
                headerText="Job Name"
                filter={Filters}
              ></ColumnDirective>
              <ColumnDirective field="StartDate"></ColumnDirective>
              <ColumnDirective field="Duration"></ColumnDirective>
              <ColumnDirective field="Progress"></ColumnDirective>
              <ColumnDirective field="Predecessor"></ColumnDirective>
    </ColumnsDirective>
    <Inject services={[Filter]} />
        </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.1.44/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>