Users can show the table total row by using the showFooter API. By default, the total row will be displayed as the last table row. You can also insert the table row in the data using isFooterInserted.
You can insert the totals row and display the dropdown functions using the following code:
You can also get the visibility of the totals row and dropdown using the following code:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div class="options-container">
<div class="option-group">
<input class="options-group-input" type="checkbox" id="showTotal" v-model="isShowTotalRef" v-on:change="onShowTotal" />
<label for="showTotal">Show TotalRow</label>
</div>
<div class="option-group">
<input class="options-group-input" type="checkbox" id="dropdownList" v-model="isShowDropDownListRef" v-on:change="onShowDropDownList" />
<label for="dropdownList">TotalRow DropDownList</label>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-vue";
import { shallowRef } from "vue";
let spreadRef = shallowRef(null);
let isShowTotalRef = shallowRef(true);
let isShowDropDownListRef = shallowRef(true);
function initSpread (spread) {
spreadRef.value = spread;
spread.suspendPaint();
let spreadNS = GC.Spread.Sheets;
let sheet = spread.getActiveSheet();
let table = sheet.tables.add("table1", 0, 0, 5, 13, spreadNS.Tables.TableThemes.light1);
table.showFooter(true);
table.useFooterDropDownList(true);
sheet.setActiveCell(5, 4);
let dataArray = [
[" ", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
];
sheet.setArray(0, 0, dataArray);
sheet.setColumnWidth(0, 120);
spread.resumePaint();
}
function onShowTotal() {
let sheet = spreadRef.value.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
table.showFooter(isShowTotalRef.value);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
function onShowDropDownList() {
let sheet = spreadRef.value.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
table.useFooterDropDownList(isShowDropDownListRef.value);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
</script>
<style scoped>
.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;
font-size: 14px;
}
.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;
}
.options-group-input {
width: 20px;
float: left;
}
#app {
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-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
