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>
import Vue from 'vue';
import '@mescius/spread-sheets-vue'
import GC from '@mescius/spread-sheets';
import './styles.css';
const GCsheets = GC.Spread.Sheets;
function getTableName(sheet) {
let i = 0;
while (true) {
let name = "table" + i.toString();
if (!sheet.tables.findByName(name)) {
return name;
}
i++;
}
}
function 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);
}
function 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;
}
function removeTableFromOptionList (tableName) {
let removeNode = document.querySelector("option[value=" + tableName + "]");
if (removeNode) {
removeNode.parentNode.removeChild(removeNode);
}
}
let App = Vue.extend({
name: "app",
data: function() {
return {
spread: null,
disabledRemoveTable: false,
disabledMoveTable: false,
disabledResizeTable: false,
moveRowValue: null,
moveColumnValue: null,
resizeRowValue: null,
resizeColumnValue: null
};
},
methods:{
initSpread: function (spread) {
this.spread = spread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
sheet.bind(GCsheets.Events.SelectionChanged, this.selectionChangedCallback.bind(this));
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();
},
selectionChangedCallback: function () {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table && table.name) {
this.disabledRemoveTable = false;
this.disabledMoveTable = getValueCheckValue(this.moveRowValue, this.moveColumnValue);
this.disabledResizeTable = getValueCheckValue(this.resizeRowValue, this.resizeColumnValue);
} else {
this.disabledRemoveTable = true;
this.disabledMoveTable = true;
this.disabledResizeTable = true;
}
},
onAddTableClickEvent: function (e) {
let spread = this.spread;
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);
}
},
onRemoveTableClickEvent: function (e) {
let spread = this.spread;
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);
}
},
onMoveTableClickEvent: function (e) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
let row = parseInt(this.moveRowValue);
let col = parseInt(this.moveColumnValue);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.move(table, row, col);
this.selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
},
onMoveRowColumnKeyUpEvent: function (e) {
this.disabledMoveTable = getValueCheckValue(this.moveRowValue, this.moveColumnValue);
},
onResizeTableClickEvent: function (e) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
let row = parseInt(this.resizeRowValue);
let col = parseInt(this.resizeColumnValue);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.resize(table, row, col);
this.selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
},
onResizeRowColumnKeyUpEvent: function (e) {
this.disabledResizeTable = getValueCheckValue(this.resizeRowValue, this.resizeColumnValue);
}
}
});
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/en/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.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;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
