{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-exporting",
  "framework": "react",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "exporting",
  "dependencies": [
    "@syncfusion/ej2-navigations",
    "@syncfusion/ej2-react-gantt"
  ],
  "description": "Gantt chart with toolbar buttons that export the chart as Excel or PDF document.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/gantt-exporting.md"
  },
  "files": [
    {
      "target": "src/components/gantt-exporting/Gantt.jsx",
      "content": "import { useRef } from 'react';\nimport { GanttComponent, Inject, Selection, Toolbar, ExcelExport, PdfExport, ColumnsDirective, ColumnDirective, DayMarkers } from '@syncfusion/ej2-react-gantt';\n\nlet editingData = [\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { TaskID: 6, TaskName: \"Site clearing\", StartDate: new Date(\"04/14/2025\"), Duration: 0, Progress: 100, ParentId: 5, Predecessor: \"4\", resources: [5] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { TaskID: 13, TaskName: \"Framing\", StartDate: new Date(\"05/01/2025\"), EndDate: new Date(\"05/07/2025\"), Duration: 5, Progress: 100, resources: [11, 12, 1] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] }\n];\n\nlet editingResources = [\n    { resourceId: 1, resourceName: 'Martin Tamer' },\n    { resourceId: 2, resourceName: 'Rose Fuller' },\n    { resourceId: 3, resourceName: 'Margaret Buchanan' },\n    { resourceId: 4, resourceName: 'Fuller King' },\n    { resourceId: 5, resourceName: 'Davolio Fuller' },\n    { resourceId: 6, resourceName: 'Van Jack' },\n    { resourceId: 7, resourceName: 'Fuller Buchanan' },\n    { resourceId: 8, resourceName: 'Jack Davolio' },\n    { resourceId: 9, resourceName: 'Tamer Vinet' },\n    { resourceId: 10, resourceName: 'Vinet Fuller' },\n    { resourceId: 11, resourceName: 'Bergs Anton' },\n    { resourceId: 12, resourceName: 'Construction Supervisor' }\n];\n\nconst Exporting = () => {\n    let ganttInstance = useRef(null);\n    let isFitToWidth;\n    const taskFields = {\n        id: 'TaskID',\n        name: 'TaskName',\n        startDate: 'StartDate',\n        endDate: 'EndDate',\n        duration: 'Duration',\n        progress: 'Progress',\n        dependency: 'Predecessor',\n        parentID: 'ParentId',\n        resourceInfo: 'resources'\n    };\n    const resourceFields = {\n        id: 'resourceId',\n        name: 'resourceName'\n    };\n    const splitterSettings = {\n        position: \"35%\"\n    };\n    const projectStartDate = new Date('03/26/2025');\n    const projectEndDate = new Date('09/01/2025');\n    const gridLines = 'Both';\n    const toolbar = ['ExcelExport', 'CsvExport', 'PdfExport'];\n    const timelineSettings = {\n        topTier: {\n            unit: 'Week',\n            format: 'MMM dd, y',\n        },\n        bottomTier: {\n            unit: 'Day',\n        },\n    };\n    const labelSettings = {\n        leftLabel: 'TaskName'\n    };\n    const toolbarClick = (args) => {\n        if (args.item.id === \"GanttExport_excelexport\") {\n            ganttInstance.current.excelExport();\n        }\n        else if (args.item.id === \"GanttExport_csvexport\") {\n            ganttInstance.current.csvExport();\n        }\n        else if (args.item.id === \"GanttExport_pdfexport\") {\n            ganttInstance.current.pdfExport();\n        }\n    };\n    return (<div className='control-pane'>\n      <div className='control-section'>\n        <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}>\n          <ColumnsDirective>\n            <ColumnDirective field='TaskID' width='80'></ColumnDirective>\n            <ColumnDirective field='TaskName' width='250'></ColumnDirective>\n          </ColumnsDirective>\n          <Inject services={[Selection, Toolbar, ExcelExport, PdfExport, DayMarkers]}/>\n        </GanttComponent>\n      </div>\n    </div>);\n};\nexport default Exporting;"
    }
  ]
}