To get a table, use the find, findByName, or all method. For example:
If you want to change the table location or change the table size, you can use the move method to change the location, and the resize method to resize it. For example:
If you don't need the table, you can remove it using the remove method. For example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div class="options-container">
<div class="option-group">
<label> Please select the table area.</label>
<label> tableName:</label>
<input id="tableName" />
</div>
<div class="option-group">
<input type="button" id="removeTable" value="Remove table" :disabled="disabledRemoveTable"
v-on:click="onRemoveTableClickEvent" />
<input type="button" id="addTable" value="Add table" v-on:click="onAddTableClickEvent" />
</div>
<hr>
<label>Move table to:</label>
<div class="option-group">
<label for="moveRow">Row:</label>
<input id="moveRow" v-model.number="moveRowValue" v-on:keyup="onMoveRowColumnKeyUpEvent" />
</div>
<div class="option-group">
<label for="moveColumn">Column:</label>
<input id="moveColumn" v-model.number="moveColumnValue" v-on:keyup="onMoveRowColumnKeyUpEvent" />
</div>
<div class="option-group">
<input type="button" id="moveTable" value="Move table" :disabled="disabledMoveTable"
v-on:click="onMoveTableClickEvent" />
</div>
<label>Resize table:</label>
<div class="option-group">
<label for="resizeRow">Row count:</label>
<input id="resizeRow" v-model.number="resizeRowValue" v-on:keyup="onResizeRowColumnKeyUpEvent" />
</div>
<div class="option-group">
<label for="resizeColumn">Column count:</label>
<input id="resizeColumn" v-model.number="resizeColumnValue" v-on:keyup="onResizeRowColumnKeyUpEvent" />
</div>
<div class="option-group">
<input type="button" id="resizeTable" value="Resize table" :disabled="disabledResizeTable"
v-on:click="onResizeTableClickEvent" />
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const spreadRef = ref(null);
const disabledRemoveTable = ref(false);
const disabledMoveTable = ref(false);
const disabledResizeTable = ref(false);
const moveRowValue = ref(null);
const moveColumnValue = ref(null);
const resizeRowValue = ref(null);
const resizeColumnValue = ref(null);
const GCsheets = GC.Spread.Sheets;
const getTableName = (sheet) => {
let i = 0;
while (true) {
let name = "table" + i.toString();
if (!sheet.tables.findByName(name)) {
return name;
}
i++;
}
};
const getActualRange = (range, maxRowCount, maxColCount) => {
let row = range.row < 0 ? 0 : range.row;
let col = range.col < 0 ? 0 : range.col;
let rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
let colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new GCsheets.Range(row, col, rowCount, colCount);
};
const getValueCheckValue = (rowValue, columnValue) => {
let rowInfo = parseInt(rowValue);
let columnInfo = parseInt(columnValue);
let targetElementDisableState = false;
if (isNaN(rowInfo) || isNaN(columnInfo) || rowInfo < 0 || columnInfo < 0) {
targetElementDisableState = true;
}
return targetElementDisableState;
};
const removeTableFromOptionList = (tableName) => {
let removeNode = document.querySelector("option[value=" + tableName + "]");
if (removeNode) {
removeNode.parentNode.removeChild(removeNode);
}
};
const selectionChangedCallback = () => {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table && table.name) {
disabledRemoveTable.value = false;
disabledMoveTable.value = getValueCheckValue(moveRowValue.value, moveColumnValue.value);
disabledResizeTable.value = getValueCheckValue(resizeRowValue.value, resizeColumnValue.value);
} else {
disabledRemoveTable.value = true;
disabledMoveTable.value = true;
disabledResizeTable.value = true;
}
};
const initSpread = (spread) => {
spreadRef.value = spread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
sheet.bind(GCsheets.Events.SelectionChanged, selectionChangedCallback);
let table = sheet.tables.add("table1", 1, 1, 4, 4, GCsheets.Tables.TableThemes.light1);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.getCell(1, 1).text("First Name");
sheet.getCell(1, 2).text("Last Name");
sheet.getCell(1, 3).text("Score");
sheet.getCell(1, 4).text("Position");
sheet.getCell(2, 1).text("Alexa");
sheet.getCell(2, 2).text("Wilder");
sheet.getCell(2, 3).text("90");
sheet.getCell(2, 4).text("Web Developer");
sheet.getCell(3, 1).text("Victor");
sheet.getCell(3, 2).text("Wooten");
sheet.getCell(3, 3).text("70");
sheet.getCell(3, 4).text(".NET Developer");
sheet.getCell(4, 1).text("Ifeoma");
sheet.getCell(4, 2).text("Mays");
sheet.getCell(4, 3).text("85");
sheet.getCell(4, 4).text("Sales Manager");
spread.resumePaint();
};
const onAddTableClickEvent = (e) => {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
try {
let cr = sheet.getSelections()[0];
if (cr) {
cr = getActualRange(cr, sheet.getRowCount(), sheet.getColumnCount());
let tableName = getTableName(sheet);
sheet.tables.add(tableName, cr.row, cr.col, cr.rowCount, cr.colCount, GCsheets.Tables.TableThemes.light1);
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
};
const onRemoveTableClickEvent = (e) => {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
try {
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
sheet.tables.remove(table);
removeTableFromOptionList(table.name());
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
};
const onMoveTableClickEvent = (e) => {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
let row = parseInt(moveRowValue.value);
let col = parseInt(moveColumnValue.value);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.move(table, row, col);
selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
};
const onMoveRowColumnKeyUpEvent = (e) => {
disabledMoveTable.value = getValueCheckValue(moveRowValue.value, moveColumnValue.value);
};
const onResizeTableClickEvent = (e) => {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
let row = parseInt(resizeRowValue.value);
let col = parseInt(resizeColumnValue.value);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.resize(table, row, col);
selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
};
const onResizeRowColumnKeyUpEvent = (e) => {
disabledResizeTable.value = getValueCheckValue(resizeRowValue.value, resizeColumnValue.value);
};
</script>
<style scoped>
#app {
height: 100%;
}
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 6px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 2px 4px;
width: 100%;
box-sizing: border-box;
}
input[type=button] {
margin-bottom: 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin: 5px 0;
}
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/'
},
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-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
