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>
<panel @onShowTotal="onShowTotal" @onShowDropDownList="onShowDropDownList">
</panel>
</div>
</template>
<script>
import Vue from 'vue';
import '@mescius/spread-sheets-vue'
import GC from '@mescius/spread-sheets';
import Panel from './panel.vue';
import './styles.css';
let App = Vue.extend({
name: "app",
data: function() {
return {
spread: null
};
},
components: {
'panel': Panel
},
methods:{
initSpread: function (spread) {
this.spread = 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();
},
onShowTotal(value) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
table.showFooter(value);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
},
onShowDropDownList(value) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
table.useFooterDropDownList(value);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
}
});
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<template>
<div class="options-container">
<div class="option-group">
<input class="options-group-input" type="checkbox" id="showTotal" v-model="isShowTotal" 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="isShowDropDownList" v-on:change="onShowDropDownList" />
<label for="dropdownList">TotalRow DropDownList</label>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
isShowTotal: true,
isShowDropDownList: true
};
},
methods: {
onShowTotal() {
this.$emit("onShowTotal", this.isShowTotal);
},
onShowDropDownList() {
this.$emit("onShowDropDownList", this.isShowDropDownList);
}
},
mounted() {}
}
</script>
<style>
</style>
<!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-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;
}
.options-group-input {
width: 20px;
float: left;
}
(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);
