You can use the setDataSource and getDataSource methods to set and get the data source. Before you use setDataSource, use the autoGenerateColumns method to control whether to generate columns automatically while binding data. For example:
Also you can use the getDataItem method to get the data item of the specified row.
You can bind the columns using the specified data fields, as shown in the following example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const spreadRef = ref(null);
const getProducts = (count) => {
const _lines = ["Computers", "Washers", "Stoves"];
const _colors = ["Red", "Green", "Blue", "White"];
const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];
var dataList = [];
for (var i = 1; i <= count; i++) {
var line = _lines[Math.floor(Math.random() * 3)];
dataList[i - 1] = new Product(i,
line,
_colors[Math.floor(Math.random() * 4)],
line + " " + line.charAt(0) + i,
Math.floor(Math.random() * 5001) / 10.0 + 500,
Math.floor(Math.random() * 6001) / 10.0,
Math.floor(Math.random() * 10001) / 100.0,
!!(Math.random() > 0.5),
_ratings[Math.floor(Math.random() * 6)]);
}
return dataList;
}
let initSpread = function (spread) {
spreadRef.value = spread;
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var products = getProducts(100);
var sheet = spread.getSheet(0);
sheet.name("Default binding");
sheet.setDataSource(products);
var sheet2 = spread.getSheet(1);
sheet2.name("Custom binding");
sheet2.autoGenerateColumns = false;
sheet2.setDataSource(products);
var colInfos = [
{ name: "id", displayName: "ID" },
{ name: "name", displayName: "Name", size: 100 },
{ name: "line", displayName: "Line", size: 80 },
{ name: "color", displayName: "Color" },
{ name: "price", displayName: "Price", formatter: "0.00", size: 80 },
{ name: "cost", displayName: "Cost", formatter: "0.00", size: 80 },
{ name: "weight", displayName: "Weight", formatter: "0.00", size: 80 },
{ name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: "rating", displayName: "Rating" }
];
sheet2.bindColumns(colInfos);
spread.resumePaint();
}
class Product {
constructor(id, line, color, name, price, cost, weight, discontinued, rating) {
this.id = id;
this.line = line;
this.color = color;
this.name = name;
this.price = price;
this.cost = cost;
this.weight = weight;
this.discontinued = discontinued;
this.rating = rating;
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
height: 100%;
}
</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/'
},
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': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
