Syncfusion AI Assistant

How can I help you?

Columns in Vue Gantt Chart Component

3 Feb 202624 minutes to read

Columns display information from the bound data source, and you can edit column values to update task details through the TreeGrid. Operations such as sorting, filtering, and searching can be performed based on column definitions. To display a Gantt Chart column, the field property should be mapped from the data source to the column.

If the column field is not specified in the data source, the column values will be empty.

The treeColumnIndex property is used to define the expander column in the Gantt Chart component to expand and collapse child rows.

To learn about customizing Gantt Chart column data, you can check this video:

Defining columns

Using the columns property, you can define the columns in the Gantt Chart. If columns are not defined, default columns will be rendered based on the mapped data source fields in the taskFields property. Refer to the following code example for defining columns with widths.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>

import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const splitterSettings = {
    columnIndex: 2
};
const height = '450px';
const columns = [
    { field: 'TaskID', width: '150' },
    { field: 'TaskName', width: '250' }
]
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns"  :splitterSettings = "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data:  [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
            ]
        },
    ],
            taskFields: {
             id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
        splitterSettings:{
            columnIndex:2
            },
            height:'450px',
            columns: [
                { field: 'TaskID', width: '150' },
                { field: 'TaskName', width: '250' }
        ]
      };
  },
};
</script>

Custom column header

The column header text can be defined using the headerText property. You can also customize column headers using the headerTemplate property.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :splitterSettings="splitterSettings">
            <e-columns>
                <e-column field='TaskName' :headerTemplate='projectName' width=150></e-column>
                <e-column field='StartDate' :headerTemplate='dateTemplate' width=150></e-column>
                <e-column field='Duration' :headerTemplate='durationTemplate' width=150></e-column>
                <e-column field='Progress' :headerTemplate='progressTemplate' width=150></e-column>
            </e-columns>
        </ejs-gantt>
    </div>
</template>
<script setup>
import { createApp } from "vue";
import { GanttComponent as EjsGantt, ColumnDirective as EColumn, ColumnsDirective as EColumns} from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const app = createApp();
const projectName = function () {
    return {
        template: app.component('columnTemplate', {
            template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Task Name
                </div>`,
            data: function () {
                return {
                    data: {}
                }
            },
            computed: {
                image: function () {
                    return "Taskname.png";
                }
            }
        })
    }
}
const dateTemplate = function () {
    return {
        template: app.component('columnTemplate', {
            template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Start Date
                </div>`,
            data: function () {
                return {
                    data: {}
                }
            },
            computed: {
                image: function () {
                    return "Startdate.png";
                }
            }
        })
    }
}
const durationTemplate = function () {
    return {
        template: app.component('columnTemplate', {
            template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Duration
                </div>`,
            data: function () {
                return {
                    data: {}
                }
            },
            computed: {
                image: function () {
                    return "Duration.png";
                }
            }
        })
    }
}
const progressTemplate = function () {
    return {
        template: app.component('columnTemplate', {
            template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Progress
                </div>`,
            data: function () {
                return {
                    data: {}
                }
            },
            computed: {
                image: function () {
                    return "progress.png";
                }
            }
        })
    }
}
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
    columnIndex: 4
};
const columns = [
    { field: 'TaskName', headerTemplate: '#projectName', width: '150' },
    { field: 'StartDate', headerTemplate: '#dateTemplate', width: '150' },
    { field: 'Duration', headerTemplate: '#durationTemplate', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerTemplate: '#progressTemplate', headerText: 'Progress', width: '150' },
];
</script>
<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :splitterSettings="splitterSettings">
      <e-columns>
        <e-column field='TaskName' :headerTemplate='projectName' width=150></e-column>
        <e-column field='StartDate' :headerTemplate='dateTemplate' width=150></e-column>
        <e-column field='Duration' :headerTemplate='durationTemplate' width=150></e-column>
        <e-column field='Progress' :headerTemplate='progressTemplate' width=150></e-column>
      </e-columns>
    </ejs-gantt>
  </div>
</template>
<script>

import { GanttComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
import { createApp } from "vue";
const app = createApp();
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data: function() {
      return{
         data: editingData,
         projectName: function () {
          return { template : app.component('columnTemplate',{
             template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Task Name
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    image: function() {
                        return "Taskname.png";
                    }
                }
          })}
      },
     dateTemplate: function () {
          return { template : app.component('columnTemplate',{
             template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Start Date
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    image: function() {
                        return "Startdate.png";
                    }
                }
          })}
      },
      durationTemplate: function () {
          return { template : app.component('columnTemplate',{
             template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Duration
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    image: function() {
                        return "Duration.png";
                    }
                }
          })}
      },
      progressTemplate: function () {
          return { template : app.component('columnTemplate',{
             template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Progress
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    image: function() {
                        return "progress.png" ;
                    }
                }
          })}
      },
      taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
        },
        height:'450px',
        splitterSettings:{
            columnIndex:4
            },
            columns: [
            { field: 'TaskName', headerTemplate:  '#projectName', width: '150' },
            { field: 'StartDate', headerTemplate: '#dateTemplate', width: '150' },
            { field: 'Duration',headerTemplate: '#durationTemplate', headerText: 'Duration', width: '150'},
            { field: 'Progress',headerTemplate: '#progressTemplate',  headerText: 'Progress', width: '150' },
        ],
      };
  },
};
</script>

Format

To format cell values based on a specific culture, use the columns.format property. The Gantt Chart component uses the Internationalization library to format number and date values.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :rowHeight="rowHeight" :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>

import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const rowHeight = 50;
const splitterSettings = {
    columnIndex: 3
};
const height = '450px';
const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'Progress', headerText: 'Progress', width: '150', format: 'C' },
    { field: 'TaskName', headerText: 'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' }
];
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :rowHeight = "rowHeight" :splitterSettings = "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: editingData,
            taskFields: {
             id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            rowHeight:50,
        splitterSettings:{
            columnIndex:3
            },
            height:'450px',
            columns: [
                { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'Progress', headerText: 'Progress', width: '150',format: 'C' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' }
        ]
      };
  },
};
</script>

By default, number and date values are formatted in the en-US culture.

Number formatting

Number or integer values can be formatted using the following format strings:

Format	Description	Remarks
N	Numeric type	Followed by precisions like N2, N3, etc.
C	Currency type	Followed by precisions like C2, C3, etc.
P	Percentage type	Expects a value from 0 to 1. Example: `0.2` formats to `20%`.

Date formatting

You can format date values using built‑in or custom date format strings.

For built‑in date formats, specify the columns.format value as a string (e.g., yMd).

You can also use custom format objects. Examples:

Format	Formatted value
{ type: ‘date’, format: ‘dd/MM/yyyy’ }	04/07/1996
{ type: ‘date’, format: ‘dd.MM.yyyy’ }	04.07.1996
{ type: ‘date’, skeleton: ‘short’ }	7/4/96
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ }	04/07/1996 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ }	07/04/1996 12:00:00 AM

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :rowHeight="rowHeight" :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>

import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const rowHeight = 50;
const splitterSettings = {
    columnIndex: 3
};
const height = '450px';
const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150', format: { format: 'dd/MM/yyyy', type: 'date' } },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150', format: 'C' },
];
</script>
<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :rowHeight="rowHeight" :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
export default {
    name: "App",
    components: {
        "ejs-gantt": GanttComponent
    },
    data: function () {
        return {
            data: editingData,
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                child: 'subtasks',
            },
            rowHeight: 50,
            splitterSettings: {
                columnIndex: 3
            },
            height: '450px',
            columns: [
                { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
                { field: 'TaskName', headerText: 'Task Name', width: '150' },
                { field: 'StartDate', headerText: 'Start Date', width: '150', format: { format: 'dd/MM/yyyy', type: 'date' } },
                { field: 'Duration', headerText: 'Duration', width: '150' },
                { field: 'Progress', headerText: 'Progress', width: '150', format: 'C' },
            ]
        };
    },
};
</script>

Change tree/expander column

The tree/expander column contains icons to expand or collapse parent records. You can define the tree column index using the treeColumnIndex property. Its default value is 0.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :treeColumnIndex='2' :splitterSettings="splitterSettings" :allowResizing='true'></ejs-gantt>
  </div>
</template>
<script setup>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks',
};
const splitterSettings = {
  columnIndex: 3
};
const height = '450px';
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :treeColumnIndex='2' :splitterSettings = "splitterSettings" :allowResizing = 'true'></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: editingData,
            taskFields: {
             id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            splitterSettings:{
            columnIndex:3
            },
            height:'450px',
      };
  },
};
</script>

Show or hide columns dynamically

You can show or hide Gantt Chart columns dynamically using external buttons by invoking the showColumn or hideColumn methods.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <ejs-button id="show" cssClass="e-info" v-on:click.native="show">Show</ejs-button>
        <ejs-button id="hide" cssClass="e-info" v-on:click.native="hide">Hide</ejs-button>
        <br>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
const gantt = ref(null);
const data = editingData;
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
    position: '80%'
};
const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150' }
];
const show = function (e) {
    var ganttChart = gantt.value.ej2Instances;
    ganttChart.showColumn(["Duration"]);
}
const hide = function (e) {
    var ganttChart = gantt.value.ej2Instances;
    ganttChart.hideColumn(["Duration"]);
}
</script>
<template>
     <div>
        <ejs-button id="show" cssClass="e-info" v-on:click.native="show">Show</ejs-button>
        <ejs-button id="hide" cssClass="e-info" v-on:click.native="hide">Hide</ejs-button>
        <br>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :splitterSettings = "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: editingData,
            taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '80%'
          },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ]
      };
  },
  methods: {
      show: function(e){
          var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
          ganttChart.showColumn(["Duration"]);
      },
      hide: function(e){
          var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
          ganttChart.hideColumn(["Duration"]);
      },
  },
};
</script>

Controlling Gantt Chart column actions

You can enable or disable Gantt Chart actions for a particular column by using the following properties:
allowFiltering,
allowSorting,
allowReordering,
allowEditing.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :columns="columns" :allowFiltering='true' :splitterSettings="splitterSettings" :allowSorting='true'
      :allowReordering='true' :editSettings="editSettings"></ejs-gantt>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { GanttComponent as EjsGantt, Sort, Filter, Reorder, Edit } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
  position: '80%'
};
const editSettings = {
  allowEditing: true
};
const columns = [
  { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
  { field: 'TaskName', headerText: 'Task Name', width: '150', allowSorting: false },
  { field: 'StartDate', headerText: 'Start Date', width: '150', allowEditing: false },
  { field: 'Duration', headerText: 'Duration', width: '150', allowFiltering: false },
  { field: 'Progress', headerText: 'Progress', width: '150', allowReordering: false },
];
provide('gantt', [Sort, Filter, Reorder, Edit]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowFiltering = 'true' :splitterSettings = "splitterSettings" :allowSorting = 'true' :allowReordering = 'true' :editSettings = "editSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Sort, Filter, Reorder, Edit } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '80%'
          },
        editSettings: {
            allowEditing: true
        },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150', allowSorting: false },
            { field: 'StartDate', headerText: 'Start Date', width: '150', allowEditing: false },
            { field: 'Duration', headerText: 'Duration', width: '150', allowFiltering: false },
            { field: 'Progress', headerText: 'Progress', width: '150', allowReordering: false },
        ],
      };
  },
    provide: {
      gantt: [ Sort, Filter, Reorder, Edit ]
  }
};
</script>

Column type

The column type can be specified using the columns.type property. It specifies the type of data bound to the column.

If a format is defined, the column uses type to select an appropriate formatting option such as number or date.

Gantt Chart columns support the following types:

string
number
boolean
date
datetime

If type is not defined, it is inferred from the first record of the dataSource.
If the first record contains a null or blank value, you must explicitly define the column type.

Search docs

Ask Syncfusion AI Assistant