Initialization
SpreadJS GanttSheet supports using a DataManager View
as a data source.
To use the GanttSheet, add the js file link into the document's head section:
Then you can use the DataManager with the hierarchy schema:
You can then define the correct hierarchy schema based on your source data structure.
Then initialize a GanttSheet.
Batch Mode
The project data records in a GanttSheet are structured data, so batch mode should be used.
Gantt Column
GanttSheets have a property called enableGanttColumn that controls whether to show the gantt column.
By default, this option is true. If you don't want to show it, you can set this property to false when you create GanttSheet or call ganttSheet.bindGanttView(view, { enableGanttColumn: false }).
Resizing the Gantt Column
Scrollbar Splitter: Drag the splitter between the two horizontal scrollbars at the bottom to adjust both areas simultaneously.
Split Line: Drag the vertical border separating the table and chart to resize the table area independently.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-vue";
const spreadRef = ref(null);
function initSpread (spread) {
spread.suspendPaint();
spread.clearSheets();
initGanttSheetWithIdParentIdData(spread);
initGanttSheetWithLevelData(spread);
initGanttSheetWithChildrenData(spread);
spread.resumePaint();
}
function initGanttSheetWithIdParentIdData (spread) {
let tableName = "Gantt_Id";
let baseApiUrl = getBaseApiUrl();
let apiUrl = baseApiUrl + "/" + tableName;
let dataManager = spread.dataManager();
let myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});
let ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet);
let view = myTable1.addView("myView1", [
{ value: "taskNumber", caption: "NO", width: 60 },
{ value: '=CONCAT("(L",LEVEL(),"-",LEVELROWNUMBER(),")")', caption: "L" },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 60 },
{ value: "cost", caption: "Cost", style: { formatter: "$0" } }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
}
function initGanttSheetWithLevelData (spread) {
let tableName = "Gantt_Level";
let baseApiUrl = getBaseApiUrl();
let apiUrl = baseApiUrl + "/" + tableName;
let dataManager = spread.dataManager();
let myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Level",
column: "level"
}
}
});
let ganttSheet = spread.addSheetTab(1, "GanttSheet2", GC.Spread.Sheets.SheetType.ganttSheet);
let view = myTable1.addView("myView1", [
{ value: "taskNumber", caption: "NO.", width: 60 },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 120 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
}
function initGanttSheetWithChildrenData (spread) {
let tableName = "Gantt_Children";
let baseApiUrl = getBaseApiUrl();
let apiUrl = baseApiUrl + "/" + tableName;
let dataManager = spread.dataManager();
let myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "ChildrenPath",
column: "children"
}
}
});
let ganttSheet = spread.addSheetTab(2, "GanttSheet3", GC.Spread.Sheets.SheetType.ganttSheet);
let view = myTable1.addView("myView1", [
{ value: "taskNumber", caption: "NO.", width: 60 },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 120 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/spreadjs/19.1.2-master-2026-06-10-2131/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'cdn:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'cdn:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-tablesheet': 'cdn:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-ganttsheet': 'cdn:@mescius/spread-sheets-ganttsheet/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
