# gantt-exporting

> Gantt chart with toolbar buttons that export the chart as Excel or PDF document.

**Framework:** react  **Component:** Gantt  **Variant:** exporting

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/gantt-exporting.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-navigations @syncfusion/ej2-react-gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-exporting/Gantt.jsx

```jsx
import { useRef } from 'react';
import { GanttComponent, Inject, Selection, Toolbar, ExcelExport, PdfExport, ColumnsDirective, ColumnDirective, DayMarkers } from '@syncfusion/ej2-react-gantt';

let editingData = [
    { TaskID: 1, TaskName: "Planning and permits", StartDate: new Date("04/02/2025"), EndDate: new Date("04/10/2025"), Duration: 7, Progress: 100, resources: [1, 2, 3] },
    { TaskID: 2, TaskName: "Site evaluation", StartDate: new Date("04/02/2025"), EndDate: new Date("04/04/2025"), Duration: 2, Progress: 100, ParentId: 1, resources: [1] },
    { TaskID: 3, TaskName: "Obtain permits", StartDate: new Date("04/07/2025"), EndDate: new Date("04/09/2025"), Duration: 3, Progress: 100, ParentId: 1, Predecessor: "2", resources: [2, 4] },
    { TaskID: 4, TaskName: "Finalize planning", StartDate: new Date("04/10/2025"), EndDate: new Date("04/11/2025"), Duration: 2, Progress: 100, ParentId: 1, Predecessor: "3", resources: [3] },
    { TaskID: 5, TaskName: "Site preparation", StartDate: new Date("04/14/2025"), EndDate: new Date("04/18/2025"), Duration: 5, Progress: 100, resources: [5, 6, 12] },
    { TaskID: 6, TaskName: "Site clearing", StartDate: new Date("04/14/2025"), Duration: 0, Progress: 100, ParentId: 5, Predecessor: "4", resources: [5] },
    { TaskID: 7, TaskName: "Grading and excavation", StartDate: new Date("04/15/2025"), EndDate: new Date("04/17/2025"), Duration: 3, Progress: 100, ParentId: 5, Predecessor: "6", resources: [6, 7] },
    { TaskID: 8, TaskName: "Foundation work", StartDate: new Date("04/18/2025"), EndDate: new Date("04/21/2025"), Duration: 4, Progress: 100, ParentId: 5, Predecessor: "7", resources: [12] },
    { TaskID: 9, TaskName: "Foundation and basement", StartDate: new Date("04/22/2025"), EndDate: new Date("04/28/2025"), Duration: 5, Progress: 100, ParentId: 5, resources: [8, 9, 10] },
    { TaskID: 10, TaskName: "Pour foundation", StartDate: new Date("04/22/2025"), EndDate: new Date("04/23/2025"), Duration: 2, Progress: 100, ParentId: 9, Predecessor: "8", resources: [8] },
    { TaskID: 11, TaskName: "Cure foundation", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 2, Progress: 100, ParentId: 9, Predecessor: "10", resources: [9] },
    { TaskID: 12, TaskName: "Basement walls", StartDate: new Date("04/28/2025"), EndDate: new Date("04/30/2025"), Duration: 3, Progress: 100, ParentId: 9, Predecessor: "11", resources: [10, 11] },
    { TaskID: 13, TaskName: "Framing", StartDate: new Date("05/01/2025"), EndDate: new Date("05/07/2025"), Duration: 5, Progress: 100, resources: [11, 12, 1] },
    { TaskID: 14, TaskName: "Frame floors", StartDate: new Date("05/01/2025"), EndDate: new Date("05/02/2025"), Duration: 2, Progress: 100, ParentId: 13, Predecessor: "12", resources: [11] },
    { TaskID: 15, TaskName: "Frame walls", StartDate: new Date("05/05/2025"), EndDate: new Date("05/06/2025"), Duration: 2, Progress: 100, ParentId: 13, Predecessor: "14", resources: [12] },
    { TaskID: 16, TaskName: "Install trusses", StartDate: new Date("05/07/2025"), EndDate: new Date("05/08/2025"), Duration: 2, Progress: 100, ParentId: 13, Predecessor: "15", resources: [1, 2] },
    { TaskID: 17, TaskName: "Roofing", StartDate: new Date("05/09/2025"), EndDate: new Date("05/13/2025"), Duration: 3, Progress: 100, Predecessor: "16", resources: [3, 4] },
    { TaskID: 18, TaskName: "Mechanical, Electrical, Plumbing", StartDate: new Date("05/14/2025"), EndDate: new Date("05/24/2025"), Duration: 9, Progress: 50, resources: [5, 6, 7] },
    { TaskID: 19, TaskName: "HVAC installation", StartDate: new Date("05/14/2025"), EndDate: new Date("05/16/2025"), Duration: 3, Progress: 100, ParentId: 18, Predecessor: "17", resources: [5] },
    { TaskID: 20, TaskName: "Plumbing installation", StartDate: new Date("05/19/2025"), EndDate: new Date("05/21/2025"), Duration: 3, Progress: 50, ParentId: 18, Predecessor: "19", resources: [6] },
    { TaskID: 21, TaskName: "Electrical installation", StartDate: new Date("05/22/2025"), EndDate: new Date("05/24/2025"), Duration: 3, Progress: 0, ParentId: 18, Predecessor: "20", resources: [7, 8] },
    { TaskID: 22, TaskName: "Interior finishing", StartDate: new Date("05/26/2025"), EndDate: new Date("06/17/2025"), Duration: 15, Progress: 0, Predecessor: "21", resources: [9, 10, 11] },
    { TaskID: 23, TaskName: "Insulation and drywall", StartDate: new Date("05/26/2025"), EndDate: new Date("05/30/2025"), Duration: 5, Progress: 0, ParentId: 22, Predecessor: "21", resources: [9] },
    { TaskID: 24, TaskName: "Interior painting", StartDate: new Date("06/02/2025"), EndDate: new Date("06/05/2025"), Duration: 4, Progress: 0, ParentId: 22, Predecessor: "23", resources: [10] },
    { TaskID: 25, TaskName: "Flooring installation", StartDate: new Date("06/06/2025"), EndDate: new Date("06/09/2025"), Duration: 4, Progress: 0, ParentId: 22, Predecessor: "24", resources: [11] },
    { TaskID: 26, TaskName: "Cabinet and fixture setup", StartDate: new Date("06/10/2025"), EndDate: new Date("06/12/2025"), Duration: 3, Progress: 0, ParentId: 22, Predecessor: "25", resources: [12] },
    { TaskID: 27, TaskName: "Final fixture installation", StartDate: new Date("06/13/2025"), EndDate: new Date("06/15/2025"), Duration: 3, Progress: 0, ParentId: 22, Predecessor: "26", resources: [1] },
    { TaskID: 28, TaskName: "Exterior finishing", StartDate: new Date("06/16/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 0, Predecessor: "27", resources: [2, 3] },
    { TaskID: 29, TaskName: "Landscaping", StartDate: new Date("06/20/2025"), EndDate: new Date("06/25/2025"), Duration: 5, Progress: 0, Predecessor: "28", resources: [4, 5] },
    { TaskID: 30, TaskName: "Final inspection", StartDate: new Date("06/26/2025"), EndDate: new Date("06/30/2025"), Duration: 3, Progress: 0, Predecessor: "29", resources: [6] },
    { TaskID: 31, TaskName: "Correction of issues", StartDate: new Date("07/01/2025"), EndDate: new Date("07/03/2025"), Duration: 3, Progress: 0, Predecessor: "30", resources: [7, 8] },
    { TaskID: 32, TaskName: "Final walkthrough", StartDate: new Date("07/04/2025"), EndDate: new Date("07/07/2025"), Duration: 2, Progress: 0, Predecessor: "31", resources: [9] },
    { TaskID: 33, TaskName: "Handover preparation", StartDate: new Date("07/08/2025"), EndDate: new Date("07/10/2025"), Duration: 3, Progress: 0, Predecessor: "32", resources: [10] },
    { TaskID: 34, TaskName: "Client handover", StartDate: new Date("07/11/2025"), EndDate: new Date("07/12/2025"), Duration: 2, Progress: 0, Predecessor: "33", resources: [11] },
    { TaskID: 35, TaskName: "Warranty period begins", StartDate: new Date("07/14/2025"), EndDate: new Date("07/15/2025"), Duration: 2, Progress: 0, Predecessor: "34", resources: [12] },
    { TaskID: 36, TaskName: "Routine maintenance visits", StartDate: new Date("07/16/2025"), EndDate: new Date("07/25/2025"), Duration: 10, Progress: 0, Predecessor: "35", resources: [1, 2] },
    { TaskID: 37, TaskName: "First year warranty review", StartDate: new Date("07/28/2025"), EndDate: new Date("08/01/2025"), Duration: 5, Progress: 0, Predecessor: "36", resources: [3, 4] },
    { TaskID: 38, TaskName: "Final project documentation", StartDate: new Date("08/04/2025"), EndDate: new Date("08/06/2025"), Duration: 3, Progress: 0, Predecessor: "37", resources: [5] },
    { TaskID: 39, TaskName: "Celebrate project completion", StartDate: new Date("08/07/2025"), EndDate: new Date("08/09/2025"), Duration: 3, Progress: 0, Predecessor: "38", resources: [6, 7] },
    { TaskID: 40, TaskName: "Begin next project planning", StartDate: new Date("08/10/2025"), EndDate: new Date("08/13/2025"), Duration: 4, Progress: 0, Predecessor: "39", resources: [8, 9] }
];

let editingResources = [
    { resourceId: 1, resourceName: 'Martin Tamer' },
    { resourceId: 2, resourceName: 'Rose Fuller' },
    { resourceId: 3, resourceName: 'Margaret Buchanan' },
    { resourceId: 4, resourceName: 'Fuller King' },
    { resourceId: 5, resourceName: 'Davolio Fuller' },
    { resourceId: 6, resourceName: 'Van Jack' },
    { resourceId: 7, resourceName: 'Fuller Buchanan' },
    { resourceId: 8, resourceName: 'Jack Davolio' },
    { resourceId: 9, resourceName: 'Tamer Vinet' },
    { resourceId: 10, resourceName: 'Vinet Fuller' },
    { resourceId: 11, resourceName: 'Bergs Anton' },
    { resourceId: 12, resourceName: 'Construction Supervisor' }
];

const Exporting = () => {
    let ganttInstance = useRef(null);
    let isFitToWidth;
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentId',
        resourceInfo: 'resources'
    };
    const resourceFields = {
        id: 'resourceId',
        name: 'resourceName'
    };
    const splitterSettings = {
        position: "35%"
    };
    const projectStartDate = new Date('03/26/2025');
    const projectEndDate = new Date('09/01/2025');
    const gridLines = 'Both';
    const toolbar = ['ExcelExport', 'CsvExport', 'PdfExport'];
    const timelineSettings = {
        topTier: {
            unit: 'Week',
            format: 'MMM dd, y',
        },
        bottomTier: {
            unit: 'Day',
        },
    };
    const labelSettings = {
        leftLabel: 'TaskName'
    };
    const toolbarClick = (args) => {
        if (args.item.id === "GanttExport_excelexport") {
            ganttInstance.current.excelExport();
        }
        else if (args.item.id === "GanttExport_csvexport") {
            ganttInstance.current.csvExport();
        }
        else if (args.item.id === "GanttExport_pdfexport") {
            ganttInstance.current.pdfExport();
        }
    };
    return (<div className='control-pane'>
      <div className='control-section'>
        <GanttComponent id='GanttExport' ref={ganttInstance} dataSource={editingData} dateFormat={'MMM dd, y'} treeColumnIndex={1} allowExcelExport={true} allowPdfExport={true} allowSelection={true} showColumnMenu={false} highlightWeekends={true} allowUnscheduledTasks={true} projectStartDate={projectStartDate} projectEndDate={projectEndDate} splitterSettings={splitterSettings} taskFields={taskFields} timelineSettings={timelineSettings} labelSettings={labelSettings} toolbarClick={toolbarClick.bind(this)} height='650px' taskbarHeight={25} rowHeight={46} gridLines={gridLines} toolbar={toolbar} resourceFields={resourceFields} resources={editingResources}>
          <ColumnsDirective>
            <ColumnDirective field='TaskID' width='80'></ColumnDirective>
            <ColumnDirective field='TaskName' width='250'></ColumnDirective>
          </ColumnsDirective>
          <Inject services={[Selection, Toolbar, ExcelExport, PdfExport, DayMarkers]}/>
        </GanttComponent>
      </div>
    </div>);
};
export default Exporting;
```