Use the addRows, addColumns, deleteRows, deleteColumns, setRowCount and setColumnCount methods to change the number of rows or columns in each sheet area.
When calling the setRowCount and setColumnCount methods, you can choose which used range type to protect.
Each of the following lines could be used to change the row count of the sheet's viewport area.
If a row or column's resizeable property is false, it cannot be resized by user operations, but you can change its height or width directly by using code.
Use the setRowVisible and setColumnVisible methods to specify whether a row or column is displayed.
In the sheet's viewport area, when a row or column is automatically sized, its height or width will be determined by the content's length. Use the following code to set a row or column to auto fit:
SpreadJS also provides many methods to get useful information about a sheet's row or column, as illustrated in these lines of code.
SpreadJS provides the resizeZeroIndicator method to control whether to display double or single gridlines in the row or column header when the row height or column width is 0. The parameter is a ResizeZeroIndicator enumeration value.
default: single gridline (same as normal)
enhanced: double gridline (default)
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="options-row">
<label style="display: inline-block;">The following buttons add/remove rows/columns at the end of the
sheet.</label>
</div>
<div class="options-row">
<input type="button" value="Add Row" id="btnAddRow" @click="addRow()" />
<input type="button" value="Delete Row" id="btnDeleteRow" @click="deleteRow()" />
</div>
<div class="options-row">
<input type="button" value="Add Column" id="btnAddColumn" @click="addColumn()" />
<input type="button" value="Delete Column" id="btnDeleteColumn" @click="deleteColumn()" />
</div>
<hr />
<div class="options-row">
<label for="rowIndex" style="display: inline-block;width: 100px">Row Index:</label>
<input type="text" id="rowIndex" v-model="rowIndex" />
<br>
<label for="rowIndex" style="padding-top: 6px">The index is zero based.</label>
<div class="options-row">
<input type="checkbox" id="chkRowVisible" v-model="checkRowVisble" />
<label for="chkRowVisible">Row Visible</label>
</div>
<div class="options-row">
<input type="checkbox" id="chkRowAutoFit" v-model="checkRowAutoFit" />
<label for="chkRowAutoFit">Row AutoFit</label>
</div>
</div>
<hr />
<div class="options-row">
<label for="columnIndex" style="display: inline-block;width: 100px">Column Index:</label>
<input type="text" id="columnIndex" v-model="columnIndex" />
<br>
<label for="columnIndex" style="padding-top: 6px">The index is zero based.</label>
<div class="options-row">
<input type="checkbox" id="chkColumnVisible" v-model="checkColumnVisible" />
<label for="chkColumnVisible">Column Visible</label>
</div>
<div class="options-row">
<input type="checkbox" id="chkColumnAutoFit" v-model="checkColumnAutoFit" />
<label for="chkColumnAutoFit">Column AutoFit</label>
</div>
</div>
<hr />
<div class="options-row">
<span>ResizeZeroIndicator:</span>
<select id="resizeZeroIndicator" v-model="setResizeZeroIndicator">
<option value="0">Default</option>
<option value="1" selected>Enhanced</option>
</select>
</div>
</div>
</div>
</template>
<script setup>
import GC from '@mescius/spread-sheets';
import { ref, watch } from "vue";
import "@mescius/spread-sheets-vue";
let spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
let mySpread;
const rowIndex = ref("");
const columnIndex = ref("");
const checkRowVisble = ref(true);
const checkRowAutoFit = ref(false);
const checkColumnVisible = ref(true);
const checkColumnAutoFit = ref(false);
const setResizeZeroIndicator = ref(1);
let initSpread = function (spread) {
mySpread = spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setRowCount(2, SheetArea.colHeader);
sheet.setRowCount(10, SheetArea.viewport);
sheet.setColumnCount(2, SheetArea.rowHeader);
sheet.setColumnCount(6, SheetArea.viewport);
sheet.setRowHeight(4, 0);
sheet.setColumnWidth(2, 0);
spread.options.resizeZeroIndicator = spreadNS.ResizeZeroIndicator.enhanced;
for (var rowIndex = 1; rowIndex <= 9; rowIndex++) {
sheet.setText(rowIndex, 0, "Row");
sheet.setValue(rowIndex, 1, rowIndex);
}
for (var columnIndex = 1; columnIndex <= 5; columnIndex++) {
sheet.setText(0, columnIndex, "Column");
sheet.setValue(1, columnIndex, columnIndex);
}
sheet.resumePaint();
}
let addRow = () => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.addRows(sheet.getRowCount(SheetArea.viewport), 1);
}
}
let addColumn = () => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.addColumns(sheet.getColumnCount(SheetArea.viewport), 1);
}
}
let deleteRow = () => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.deleteRows(sheet.getRowCount(SheetArea.viewport) - 1, 1);
}
}
let deleteColumn = () => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.deleteColumns(sheet.getColumnCount(SheetArea.viewport) - 1, 1);
}
}
watch(rowIndex, (value) => {
rowIndex.value = value;
});
watch(columnIndex, (value) => {
columnIndex.value = value;
});
watch(checkRowVisble, (value) => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
let rowIndexValue = parseInt(rowIndex.value);
if (!isNaN(rowIndexValue)) {
sheet.setRowVisible(rowIndexValue, value);
}
});
watch(checkRowAutoFit, (value) => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
let rowIndexValue = parseInt(rowIndex.value);
if (!isNaN(rowIndexValue)) {
let checked = value;
if (checked) {
sheet.autoFitRow(rowIndexValue);
}
}
});
watch(checkColumnVisible, (value) => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
let columnIndexValue = parseInt(columnIndex.value);
if (!isNaN(columnIndexValue)) {
sheet.setColumnVisible(columnIndexValue, value);
}
});
watch(checkColumnAutoFit, (value) => {
let spread = mySpread;
let sheet = spread.getActiveSheet();
let columnIndexValue = parseInt(columnIndex.value);
if (!isNaN(columnIndexValue)) {
let checked = value;
if (checked) {
sheet.autoFitColumn(columnIndexValue);
}
}
});
watch(setResizeZeroIndicator, (value) => {
let spread = mySpread;
spread.options.resizeZeroIndicator = +value;
spread.repaint();
});
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
display: inline-block;
width: 110px;
}
input[type="text"] {
width: 200px;
}
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-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);
