# gantt-resource-view

> Gantt chart with resource rows and resource-unit allocations on parent tasks.

**Framework:** vue  **Component:** Gantt  **Variant:** resource-view

## 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/vue/gantt-resource-view.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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-resource-view/Gantt.vue

```vue
<template>
    <div>
        <div class="control-section">
            <div class="content-wrapper">
                <ejs-gantt ref='gantt' id="ResourceView" :dataSource= "data" :viewType="viewType" :taskFields= "taskFields"
                    :allowSelection= "true" :allowResizing= "true" :resourceFields= "resourceFields" :taskType = "taskType"
                    :editSettings= "editSettings" :toolbar= "toolbar" :height="height" :rowHeight="46" :taskbarHeight="25"
                    :treeColumnIndex= "1" :resources= "resources" :highlightWeekends= "true" :columns= "columns"
                    :labelSettings= "labelSettings" :projectStartDate= "projectStartDate" :projectEndDate= "projectEndDate"
                    :splitterSettings= "splitterSettings" :showOverAllocation= "true" v-on:toolbarClick= "toolbarClick">
                </ejs-gantt>
            </div>
        </div>

    </div>
</template>
<script>
import { GanttComponent, Selection, Edit, DayMarkers, Toolbar, Resize } from "@syncfusion/ej2-vue-gantt";

const resourceCollection = [
    { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team' },
    { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team' },
    { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },
    { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },
    { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },
    { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team' }
];

const resourcesData = [
    {
        TaskID: 1,
        TaskName: 'Project initiation',
        StartDate: new Date('03/29/2025'),
        EndDate: new Date('04/21/2025'),
        subtasks: [
            {
                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2025'), Duration: 3,
                Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]
            },
            {
                TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2025'), Duration: 4,
                resources: [{ resourceId: 2, resourceUnit: 70 }], Progress: 30, work: 20
            },
            {
                TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2025'), Duration: 4,
                resources: [{ resourceId: 1, resourceUnit: 75 }], Predecessor: 2, Progress: 30, work: 10,
            },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project estimation', StartDate: new Date('03/29/2025'), EndDate: new Date('04/21/2025'),
        subtasks: [
            {
                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2025'),
                Duration: 3, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 70 }], Predecessor: '3FS+2', work: 30
            },
            {
                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2025'), Duration: 12,
                resources: [{ resourceId: 6, resourceUnit: 40 }], Progress: 30, work: 40
            },
            {
                TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/03/2025'),
                Duration: 10, resources: [{ resourceId: 5, resourceUnit: 75 }], Progress: 30, work: 60,
            },
            {
                TaskID: 9, TaskName: 'Excavate for foundations', StartDate: new Date('04/01/2025'),
                Duration: 4, Progress: 30, resources: [{ resourceId: 4, resourceUnit: 100 }], work: 32
            },
            {
                TaskID: 10, TaskName: 'Install plumbing grounds', StartDate: new Date('04/08/2025'), Duration: 4,
                Progress: 30, Predecessor: '9SS', resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32
            },
            {
                TaskID: 11, TaskName: 'Dig footer', StartDate: new Date('04/08/2025'),
                Duration: 3, resources: [{ resourceId: 2, resourceUnit: 100 }], work: 24
            },
            {
                TaskID: 12, TaskName: 'Electrical utilities', StartDate: new Date('04/03/2025'),
                Duration: 4, Progress: 30, resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32
            }
        ]
    },
    {
        TaskID: 13, TaskName: 'Sign contract', StartDate: new Date('04/04/2025'), Duration: 2,
        Progress: 30,
    }
];

export default {
    components: {
        'ejs-gantt': GanttComponent
    },
    data: function() {
        return{
            data: resourcesData,
            resources: resourceCollection,
            viewType: 'ResourceView',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                resourceInfo: 'resources',
                work: 'work',
                child: 'subtasks'
            },
            taskType: "FixedWork",
            resourceFields: {
                id: 'resourceId',
                name: 'resourceName',
                unit: 'resourceUnit',
                group: 'resourceGroup'
            },
            toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
            { text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar' }],
            height: '650px',
            columns: [
                { field: 'TaskID', visible: false },
                { field: 'TaskName', headerText: 'Name', width: 280 },
                { field: 'work', headerText: 'Work' },
                { field: 'Progress' },
                { field: 'resourceGroup', headerText: 'Group' },
                { field: 'StartDate' },
                { field: 'Duration' }
            ],
            editSettings: {
                allowAdding: true,
                allowEditing: true,
                allowDeleting: true,
                allowTaskbarEditing: true,
                showDeleteConfirmDialog: true
            },
            labelSettings: {
                rightLabel: 'resources',
                taskLabel: 'Progress'
            },
            projectStartDate: new Date('03/26/2025'),
            projectEndDate: new Date('05/18/2025'),
            splitterSettings: {
                columnIndex: 3
            }
        };
    },
    provide: {
        gantt: [ Selection, DayMarkers, Toolbar, Edit, Resize]
    },
    methods: {
        toolbarClick: function(args) {
            if (args.item.id === 'showhidebar') {
                this.$refs.gantt.ej2Instances.showOverAllocation =  this.$refs.gantt.ej2Instances.showOverAllocation ? false : true;
            }
        }
    }
}
</script>

```

### src/components/gantt-resource-view/GanttView.vue

```vue
<template>
  <Gantt />
</template>

<script setup>
import Gantt from '../../components/Gantt.vue'
</script>
```