Syncfusion AI Assistant

How can I help you?

Excel Export in React Gantt Chart Component

24 Mar 202624 minutes to read

The Syncfusion React Gantt Chart component supports exporting project data to Excel and CSV formats, enabling seamless sharing, reporting, and offline analysis.

To enable Excel or CSV export functionality, set the allowExcelExport property to true and inject the ExcelExport service into the component’s providers array.

You can trigger export operations using the excelExport or csvExport methods, typically within the toolbarClick event.

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

function App() {
    let ganttInstance = null;

    const data = GanttData;

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

    const toolbar = ['ExcelExport', 'CsvExport'];

    function toolbarClick(args) {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance.excelExport();
        } else if (args.item.id === 'ganttDefault_csvexport') {
            ganttInstance.csvExport();
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            height="370px"
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            toolbarClick={toolbarClick}
            ref={(g) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './datasource';

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

    const data: object[] = GanttData;

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

    const toolbar: ToolbarItems[] = ['ExcelExport', 'CsvExport'];

    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance!.excelExport();
        } else if (args.item.id === 'ganttDefault_csvexport') {
            ganttInstance!.csvExport();
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={data}
            height="370px"
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            toolbarClick={toolbarClick}
            ref={(g: GanttComponent | null) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, 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%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>

Binding custom data source while exporting

You can bind a custom data source for Excel or CSV export in the React Gantt Chart component by assigning it dynamically before the export begins. To achieve this, set the required data to the dataSource property within the ExcelExportProperties configuration.

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

function App() {
    let ganttInstance = null;

    const data = editingData;

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

    const toolbar = ['ExcelExport'];

    function toolbarClick(args) {
        if (args.item.id === 'ganttDefault_excelexport') {
            const excelProps = {
                dataSource: editingData.slice(0, 4)
            };
            ganttInstance.excelExport(excelProps);
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="430px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            ref={(g) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './datasource';

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

    const data: object[] = editingData;

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

    const toolbar: ToolbarItems[] = ['ExcelExport'];

    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            const excelProps: ExcelExportProperties = {
                dataSource: editingData.slice(0, 4)
            };
            ganttInstance!.excelExport(excelProps);
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="430px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            ref={(g: GanttComponent | null) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport]} />
        </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%;
        }

        .e-gantt .e-gantt-chart .e-custom-holiday {
            background-color: lightgreen;
        }
    </style>
</head>

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

</html>

Exporting with cell and row spanning

To export merged cells and rows in Excel or CSV files using the React Gantt Chart component, handle the excelQueryCellInfo event and apply rowSpan and colSpan during the export process. The queryCellInfo event can be used to customize cell rendering within the Gantt view.

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

function App() {

    let ganttInstance = null;

    const data = GanttData;

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

    const toolbar = ['ExcelExport'];

    function toolbarClick(args) {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance.excelExport();
        } else if (args.item.id === 'ganttDefault_csvexport') {
            ganttInstance.csvExport();
        }
    }

    function queryCellInfoEvent(args) {
        const d = args.data;
        if (d.TaskID === 4 && args.column.field === 'TaskName') {
            args.rowSpan = 2;
        }
        if (d.TaskID === 6 && args.column.field === 'TaskName') {
            args.colSpan = 2;
        }
    }

    function excelQueryCellInfo(args) {
        const d = args.data;
        if (d.TaskID === 4 && (args.column).field === 'TaskName') {
            args.rowSpan = 2;
        }
        if (d.TaskID === 6 && (args.column).field === 'TaskName') {
            args.colSpan = 2;
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="450px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            toolbarClick={toolbarClick}
            queryCellInfo={queryCellInfoEvent}
            excelQueryCellInfo={excelQueryCellInfo}
            ref={(g) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs, Column } from '@syncfusion/ej2-grids';
import { ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './datasource';

function App() {

    let ganttInstance: GanttComponent | null = null;

    const data: object[] = GanttData;

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

    const toolbar: ToolbarItems[] = ['ExcelExport'];

    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance!.excelExport();
        } else if (args.item.id === 'ganttDefault_csvexport') {
            ganttInstance!.csvExport();
        }
    }

    function queryCellInfoEvent(args: ExcelQueryCellInfoEventArgs): void {
        const d: any = args.data;
        if (d.TaskID === 4 && args.column.field === 'TaskName') {
            (args as any).rowSpan = 2;
        }
        if (d.TaskID === 6 && args.column.field === 'TaskName') {
            args.colSpan = 2;
        }
    }

    function excelQueryCellInfo(args: QueryCellInfoEventArgs): void {
        const d: any = args.data;
        if (d.TaskID === 4 && (args.column as Column).field === 'TaskName') {
            args.rowSpan = 2;
        }
        if (d.TaskID === 6 && (args.column as Column).field === 'TaskName') {
            args.colSpan = 2;
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="450px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            toolbarClick={toolbarClick}
            queryCellInfo={queryCellInfoEvent}
            excelQueryCellInfo={excelQueryCellInfo}
            ref={(g: GanttComponent | null) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, 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%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>

Show spinner while exporting

To indicate progress during the export operation in the React Gantt Chart component, use the showSpinner method within the toolbarClick event when initiating Excel or CSV export. After the export process completes, hide the spinner by calling the hideSpinner method inside the excelExportComplete event.

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

function App() {

    let ganttInstance = null;

    const data = GanttData;

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

    const toolbar = ['ExcelExport'];

    function toolbarClick(args) {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance.showSpinner();
            setTimeout(() => {
                ganttInstance.excelExport();
            }, 2000);
        }
    }

    function excelExportComplete() {
        ganttInstance.hideSpinner();
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="450px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            toolbarClick={toolbarClick}
            excelExportComplete={excelExportComplete}
            ref={(g) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection, TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ExcelExportCompleteArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './datasource';

function App() {

    let ganttInstance: GanttComponent | null = null;

    const data: object[] = GanttData;

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

    const toolbar: ToolbarItems[] = ['ExcelExport'];

    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance!.showSpinner();
            setTimeout(() => {
                ganttInstance!.excelExport();
            }, 2000);
        }
    }

    function excelExportComplete(args: ExcelExportCompleteArgs): void {
        ganttInstance!.hideSpinner();
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="450px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            toolbarClick={toolbarClick}
            excelExportComplete={excelExportComplete}
            ref={(g: GanttComponent | null) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="120" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="180" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="120" />
                <ColumnDirective field="Progress" headerText="Progress" width="120" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, 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%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>

Exporting with custom date format

To apply a custom date format to columns during Excel or CSV export in the React Gantt Chart component, define the desired format using the format property in the column configuration.

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

function App() {
    let ganttInstance = null;

    const data = GanttData;

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

    const toolbar = ['ExcelExport', 'CsvExport'];

    const formatOptions = { type: 'date', format: 'dd/MM/yyyy' };

    function toolbarClick(args) {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance.excelExport();
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="430px"
            dataSource={data}
            taskFields={taskSettings}
            toolbar={toolbar}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            ref={(g) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <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={formatOptions} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width={90} type="number" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={120} type="number" />
            </ColumnsDirective>
            <Inject services={[Toolbar, ExcelExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection, TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './datasource';

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

    const data: object[] = GanttData;

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

    const toolbar: ToolbarItems[] = ['ExcelExport', 'CsvExport'];

    const formatOptions: object = { type: 'date', format: 'dd/MM/yyyy' };

    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttInstance!.excelExport();
        }
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="430px"
            dataSource={data}
            taskFields={taskSettings}
            toolbar={toolbar}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            ref={(g: GanttComponent | null) => { ganttInstance = g; }}
        >
            <ColumnsDirective>
                <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={formatOptions} />
                <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width={90} type="number" />
                <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width={120} type="number" />
            </ColumnsDirective>
            <Inject services={[Toolbar, ExcelExport, 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%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>

Exporting multiple Gantt charts

The React Gantt Chart component supports exporting multiple Gantt Charts either into a single worksheet or across separate sheets when generating Excel or CSV files.

Same sheet

To export multiple datasets into a single worksheet, set multipleExport.type to AppendToSheet within the ExcelExportProperties configuration. To add spacing between datasets, define the number of blank rows using the multipleExport.blankRows property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { firstGanttData, secondGanttData } from './datasource';
function App() {
    let firstGantt;
    let secondGantt;
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentID'
    };
    const toolbarOptions = ['ExcelExport'];
    function toolbarClick(args) {
        if (args.item.id === 'FirstGantt_excelexport') {
            const appendExcelExportProperties = {
                multipleExport: { type: 'AppendToSheet', blankRows: 2 }
            };
            const firstGanttExport = firstGantt.excelExport(appendExcelExportProperties, true);
            firstGanttExport.then((fData) => {
                secondGantt.excelExport(appendExcelExportProperties, false, fData);
            });
        }
    };
    return (
        <div>
            <p><b>First Gantt:</b></p>
            <GanttComponent
                id='FirstGantt'
                dataSource={firstGanttData}
                taskFields={taskFields}
                toolbar={toolbarOptions}
                toolbarClick={toolbarClick}
                allowExcelExport={true}
                height='280px'
                ref={gantt => firstGantt = gantt}
                treeColumnIndex={1}
                projectStartDate='03/31/2019'
                projectEndDate='04/14/2019'
            >
                <Inject services={[Toolbar, ExcelExport, Selection]} />
            </GanttComponent>
            <p><b>Second Gantt:</b></p>
            <GanttComponent
                id='SecondGantt'
                dataSource={secondGanttData}
                taskFields={taskFields}
                allowExcelExport={true}
                height='250px'
                ref={gantt => secondGantt = gantt}
                treeColumnIndex={1}
            >
                <Inject services={[ExcelExport, Selection]} />
            </GanttComponent>
        </div>
    );
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { firstGanttData, secondGanttData } from './datasource';
function App() {
    let firstGantt: GanttComponent;
    let secondGantt: GanttComponent;
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentID'
    };
    const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'FirstGantt_excelexport') {
            const appendExcelExportProperties: ExcelExportProperties = {
                multipleExport: { type: 'AppendToSheet', blankRows: 2 }
            };
            const firstGanttExport: Promise<any> = firstGantt.excelExport(appendExcelExportProperties, true);
            firstGanttExport.then((fData: any) => {
                secondGantt.excelExport(appendExcelExportProperties, false, fData);
            });
        }
    };
    return (
        <div>
            <p><b>First Gantt:</b></p>
            <GanttComponent
                id='FirstGantt'
                dataSource={firstGanttData}
                taskFields={taskFields}
                toolbar={toolbarOptions}
                toolbarClick={toolbarClick}
                allowExcelExport={true}
                height='280px'
                ref={gantt => firstGantt = gantt}
                treeColumnIndex={1}
                projectStartDate='03/31/2019'
                projectEndDate='04/14/2019'
            >
                <Inject services={[Toolbar, ExcelExport, Selection]} />
            </GanttComponent>
            <p><b>Second Gantt:</b></p>
            <GanttComponent
                id='SecondGantt'
                dataSource={secondGanttData}
                taskFields={taskFields}
                allowExcelExport={true}
                height='250px'
                ref={gantt => secondGantt = gantt}
                treeColumnIndex={1}
            >
                <Inject services={[ExcelExport, Selection]} />
            </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-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>

By default, multipleExport.blankRows value is 5.

New sheet

To export each Gantt to a separate worksheet, set multipleExport.type to NewSheet in the ExcelExportProperties configuration. This ensures each dataset is placed on its own sheet.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection } from '@syncfusion/ej2-react-gantt';
import { firstGanttData, secondGanttData } from './datasource';
function App (){
    let firstGantt;
    let secondGantt;
    const taskFields = {
        id: 'TaskId',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentId'
    };
    const toolbarOptions = ['ExcelExport'];
    function toolbarClick(args) {
       if (args.item.id === 'FirstGantt_excelexport') {
           const appendExcelExportProperties = {
                multipleExport: {type: 'NewSheet'}
            };
            const firstGanttExport = firstGantt.excelExport(appendExcelExportProperties,true);
            firstGanttExport.then((fData) => {
                secondGantt.excelExport(appendExcelExportProperties,false,fData);
            });
        }
    };
    return (
        <div>
        <p><b>First Gantt:</b></p>
        <GanttComponent 
            id='FirstGantt' 
            dataSource={firstGanttData} 
            taskFields={taskFields} 
            toolbar={toolbarOptions}
            toolbarClick={toolbarClick} 
            allowExcelExport={true} 
            height='280px' 
            ref={gantt => firstGantt = gantt} 
            treeColumnIndex={1} 
            projectStartDate='03/31/2019' 
            projectEndDate='04/14/2019'
        >
            <Inject services={[Toolbar, ExcelExport, Selection]} />
        </GanttComponent>
        <p><b>Second Gantt:</b></p>
        <GanttComponent 
            id='SecondGantt' 
            dataSource={secondGanttData} 
            taskFields={taskFields} 
            allowExcelExport={true} 
            height='250px' 
            ref={gantt => secondGantt = gantt} 
            treeColumnIndex={1}
        >
            <Inject services={[ExcelExport, Selection]} />
        </GanttComponent>
        </div>
    );
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { firstGanttData, secondGanttData } from './datasource';
function App() {
    let firstGantt: GanttComponent;
    let secondGantt: GanttComponent;
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentID'
    };
    const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'FirstGantt_excelexport') {
            const appendExcelExportProperties: ExcelExportProperties = {
                multipleExport: { type: 'NewSheet' }
            };
            const firstGanttExport: Promise<any> = firstGantt.excelExport(appendExcelExportProperties, true);
            firstGanttExport.then((fData: any) => {
                secondGantt.excelExport(appendExcelExportProperties, false, fData);
            });
        }
    };
    return (
        <div>
            <p><b>First Gantt:</b></p>
            <GanttComponent
                id='FirstGantt'
                dataSource={firstGanttData}
                taskFields={taskFields}
                toolbar={toolbarOptions}
                toolbarClick={toolbarClick}
                allowExcelExport={true}
                height='280px'
                ref={gantt => firstGantt = gantt}
                treeColumnIndex={1}
                projectStartDate='03/31/2019'
                projectEndDate='04/14/2019'
            >
                <Inject services={[Toolbar, ExcelExport, Selection]} />
            </GanttComponent>
            <p><b>Second Gantt:</b></p>
            <GanttComponent
                id='SecondGantt'
                dataSource={secondGanttData}
                taskFields={taskFields}
                allowExcelExport={true}
                height='250px'
                ref={(gantt: any) => secondGantt = gantt}
                treeColumnIndex={1}
            >
                <Inject services={[ExcelExport, Selection]} />
            </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-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>

Export Gantt data as a Blob

To export Gantt data as a Blob object for advanced processing or custom download workflows, set the isBlob parameter to true in the excelExport or csvExport method. Use the excelExportComplete event to access the Blob and implement custom logic.

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

function App() {

    let ganttRef = null;

    const data = GanttData;

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

    const toolbar = ['ExcelExport', 'CsvExport'];

    function toolbarClick(args) {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttRef.excelExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'ganttDefault_csvexport') {
            ganttRef.csvExport(undefined, undefined, undefined, true);
        }
    }

    function excelExportComplete(args) {
        if (args && args.promise) {
            args.promise.then((e) => {
                exportBlob(e.blobData);
            });
        }
    }

    function exportBlob(blob) {
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="370px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            excelExportComplete={excelExportComplete}
            ref={(g) => { ganttRef = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="150" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" visible={false} />
                <ColumnDirective field="Duration" headerText="Duration" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" width="150" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, Selection]} />

        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection, TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ExcelExportCompleteArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './datasource';

function App() {

    let ganttRef: GanttComponent | null = null;

    const data: object[] = GanttData;

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

    const toolbar: ToolbarItems[] = ['ExcelExport', 'CsvExport'];

    function toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttRef!.excelExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'ganttDefault_csvexport') {
            ganttRef!.csvExport(undefined, undefined, undefined, true);
        }
    }

    function excelExportComplete(args: ExcelExportCompleteArgs): void {
        if (args && args.promise) {
            args.promise.then((e: { blobData: Blob }) => {
                exportBlob(e.blobData);
            });
        }
    }

    function exportBlob(blob: Blob): void {
        const a: HTMLAnchorElement = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url: string = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }

    return (
        <GanttComponent
            id="ganttDefault"
            height="370px"
            dataSource={data}
            taskFields={taskFields}
            toolbar={toolbar}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            excelExportComplete={excelExportComplete}
            ref={(g: GanttComponent | null) => { ganttRef = g; }}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="150" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" visible={false} />
                <ColumnDirective field="Duration" headerText="Duration" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" width="150" />
            </ColumnsDirective>

            <Inject services={[Toolbar, ExcelExport, 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%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

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

</html>