Excel export in React Gantt component
2 Feb 20237 minutes to read
Gantt supports client-side exporting, which allows you to export its data to the Excel and CSV formats. Use the excelExport
and csvExport
methods for exporting. To enable Excel export in the Gantt, set the allowExcelExport
to true.
To export data to Excel and CSV, inject the ExcelExport
module in Gantt.
To get start quickly with Excel exporting and to know its functionalities, you can check on this video
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } 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',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport', 'CsvExport'];
function toolbarClick(args) {
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
ganttInstance.csvExport();
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
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, Selection } 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',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
ganttInstance.csvExport();
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt}>
<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/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%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</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>