Column reordering in React Gantt component

2 Feb 202324 minutes to read

The column reordering can be done by dragging a column header from one index to another index within the TreeGrid. To enable reordering, set the allowReordering property to true.

To use the column reordering feature, inject the Reorder module to the Gantt component.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, 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 = {
    columnIndex: 5
  };
  return <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} allowReordering={true} height='450px'>
    <Inject services={[Reorder]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, SplitterSettings, Inject, 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: SplitterSettings = {
    columnIndex: 5
  };
  return <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} allowReordering={true} height='450px'>
    <Inject services={[Reorder]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

You can disable the reordering of a particular column by setting the columns.allowReordering property to false.

Reorder Events

During the reorder action, the gantt component triggers the below three events.

The columnDragStart event triggers when column header element drag (move) starts.
The columnDrag event triggers when column header element is dragged (moved) continuously.
The columnDrop event triggers when a column header element is dropped on the target column.

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

function App() {
  let ganttInstance;
  let messageElement;

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

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

  const columnDragStart = (args) => {
    messageElement.textContent = 'columnDragStart event triggered';
    if (args.column.field === 'TaskName') {
      args.column.headerText = 'Project Task';
      messageElement.textContent = `Header text changed for column: ${args.column.field}`;
    }
  };

  const columnDrag = (args) => {
    messageElement.textContent = 'columnDrag event triggered';
    if (args.column.field === 'Duration') {
      args.column.allowReordering = false;
      messageElement.textContent = `Reordering disabled for column: ${args.column.field}`;
    }
  };

  const columnDrop = (args) => {
    messageElement.textContent = 'columnDrop event triggered';
    if (args.column.field === 'TaskID') {
      args.column.allowReordering = false;
      messageElement.textContent = `Reordering cancelled for column: ${args.column.field}`;
    }
  };

  return (
    <div>
      <div style=>
        <p style= ref={(el) => (messageElement = el)}></p>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
          columnDragStart={columnDragStart}
          columnDrag={columnDrag}
          columnDrop={columnDrop}
        >
          <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" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </div>
  );
}

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

function App() {
    let ganttInstance: GanttComponent;
    let messageElement: HTMLParagraphElement;

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

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

    const columnDragStart = (args: ColumnDragEventArgs): void => {
        messageElement.textContent = 'columnDragStart event triggered';
        if (args.column.field === 'TaskName') {
            args.column.headerText = 'Project Task';
            messageElement.textContent = `Header text changed for column: ${args.column.field}`;
        }
    };

    const columnDrag = (args: ColumnDragEventArgs): void => {
        messageElement.textContent = 'columnDrag event triggered';
        if (args.column.field === 'Duration') {
            args.column.allowReordering = false;
            messageElement.textContent = `Reordering disabled for column: ${args.column.field}`;
        }
    };

    const columnDrop = (args: ColumnDragEventArgs): void => {
        messageElement.textContent = 'columnDrop event triggered';
        if (args.column.field === 'TaskID') {
            args.column.allowReordering = false;
            messageElement.textContent = `Reordering cancelled for column: ${args.column.field}`;
        }
    };

    return (
        <div>
            <div style=>
                <p style= ref={(el) => (messageElement = el!)}></p>
            </div>
            <div style=>
                <GanttComponent
                    ref={(gantt) => (ganttInstance = gantt!)}
                    dataSource={data}
                    taskFields={taskFields}
                    splitterSettings={splitterSettings}
                    allowReordering={true}
                    treeColumnIndex={1}
                    height="430px"
                    columnDragStart={columnDragStart}
                    columnDrag={columnDrag}
                    columnDrop={columnDrop}
                >
                    <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" />
                        <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                    </ColumnsDirective>
                    <Inject services={[Reorder]} />
                </GanttComponent>
            </div>
        </div>
    );
}

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

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.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>
<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>

Reorder multiple columns

Multiple columns can be reordered at a time by using the reorderColumns method.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Reorder } 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 = {
      position : '90%'
  };
  function clickHandler(){
   ganttInstance.reorderColumns(['TaskID','TaskName'],'Progress');
  }
        return (<div>
        <ButtonComponent onClick= {clickHandler}>Reorder Task ID and Task Name to Last</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} allowReordering={true} height = '450px' ref={gantt => ganttInstance = gantt}>
            <Inject services={[Reorder]} />
        </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, Reorder } 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 splitterSettings: any = {
      position : '90%'
  };
  function clickHandler(){
   ganttInstance.reorderColumns(['TaskID','TaskName'],'Progress');
  }
        return (<div>
        <ButtonComponent onClick= {clickHandler}>Reorder Task ID and Task Name to Last</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} allowReordering={true} height = '450px' ref={gantt => ganttInstance = gantt}>
            <Inject services={[Reorder]} />
        </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/32.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>
<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>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Column reordering in React Gantt component

Reorder Events

Reorder multiple columns