{ "$schema": "https://ai.syncfusion.com/schema/registry-item.json", "name": "gantt-resource-view", "framework": "react", "type": "registry:component", "component": "Gantt", "variant": "resource-view", "dependencies": [ "@syncfusion/ej2-navigations", "@syncfusion/ej2-react-gantt" ], "description": "Gantt chart with resource rows and resource-unit allocations on parent tasks.", "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/ts/gantt-resource-view.md" }, "files": [ { "target": "src/components/gantt-resource-view/Gantt.tsx", "content": "import { useRef } from 'react';\nimport type { ClickEventArgs } from '@syncfusion/ej2-navigations';\nimport { GanttComponent, type TaskFieldsModel, DayMarkers, Inject, Selection, Toolbar, Edit, Resize, ColumnsDirective, ColumnDirective, type EditSettingsModel, type LabelSettingsModel, type ResourceFieldsModel, type SplitterSettingsModel, type TaskType } from '@syncfusion/ej2-react-gantt';\n\nlet resourcesData = [\n {\n TaskID: 1,\n TaskName: 'Project initiation',\n StartDate: new Date('03/29/2025'),\n EndDate: new Date('04/21/2025'),\n subtasks: [\n {\n TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2025'), Duration: 3,\n Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]\n },\n {\n TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2025'), Duration: 4,\n resources: [{ resourceId: 2, resourceUnit: 70 }], Progress: 30, work: 20\n },\n {\n TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2025'), Duration: 4,\n resources: [{ resourceId: 1, resourceUnit: 75 }], Predecessor: 2, Progress: 30, work: 10,\n },\n ]\n },\n {\n TaskID: 5,\n TaskName: 'Project estimation', StartDate: new Date('03/29/2025'), EndDate: new Date('04/21/2025'),\n subtasks: [\n {\n TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2025'),\n Duration: 3, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 70 }], Predecessor: '3FS+2', work: 30\n },\n {\n TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2025'), Duration: 12,\n resources: [{ resourceId: 6, resourceUnit: 40 }], Progress: 30, work: 40\n },\n {\n TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/03/2025'),\n Duration: 10, resources: [{ resourceId: 5, resourceUnit: 75 }], Progress: 30, work: 60,\n },\n {\n TaskID: 9, TaskName: 'Excavate for foundations', StartDate: new Date('04/01/2025'),\n Duration: 4, Progress: 30, resources: [{ resourceId: 4, resourceUnit: 100 }], work: 32\n },\n {\n TaskID: 10, TaskName: 'Install plumbing grounds', StartDate: new Date('04/08/2025'), Duration: 4,\n Progress: 30, Predecessor: '9SS', resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32\n },\n {\n TaskID: 11, TaskName: 'Dig footer', StartDate: new Date('04/08/2025'),\n Duration: 3, resources: [{ resourceId: 2, resourceUnit: 100 }], work: 24\n },\n {\n TaskID: 12, TaskName: 'Electrical utilities', StartDate: new Date('04/03/2025'),\n Duration: 4, Progress: 30, resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32\n }\n ]\n },\n {\n TaskID: 13, TaskName: 'Sign contract', StartDate: new Date('04/04/2025'), Duration: 2,\n Progress: 30,\n }\n];\n\nlet resourceCollection = [\n { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team' },\n { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team' },\n { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },\n { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },\n { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },\n { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team' }\n];\n\nconst ResourceView = () => {\n let ganttInstance = useRef(null);\n const taskFields: TaskFieldsModel = {\n id: 'TaskID',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n duration: 'Duration',\n progress: 'Progress',\n dependency: 'Predecessor',\n resourceInfo: 'resources',\n work: 'work',\n child: 'subtasks'\n };\n const taskType: TaskType = \"FixedWork\";\n const resourceFields: ResourceFieldsModel = {\n id: 'resourceId',\n name: 'resourceName',\n unit: 'resourceUnit',\n group: 'resourceGroup'\n };\n const editSettings: EditSettingsModel = {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n allowTaskbarEditing: true,\n showDeleteConfirmDialog: true\n };\n const toolbar: any = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',\n { text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar' }];\n const splitterSettings: SplitterSettingsModel = {\n columnIndex: 3\n };\n const projectStartDate: Date = new Date('03/26/2025');\n const projectEndDate: Date = new Date('05/18/2025');\n const labelSettings: LabelSettingsModel = {\n rightLabel: 'resources',\n taskLabel: 'Progress'\n };\n const toolbarClick = (args: ClickEventArgs): void => {\n if (args.item.id === 'showhidebar') {\n ganttInstance.current.showOverAllocation = ganttInstance.current.showOverAllocation ? false : true;\n }\n };\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n )\n}\nexport default ResourceView;" } ] }