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:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
let spread = null;
export function AppFunc() {
const [totalRowOption, setTotalRowOption] = React.useState({
isShowTotal: true,
isShowDropDownList: true
});
const initSpread = (currSpread) => {
spread = currSpread;
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();
}
const onShowTotal = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
let checked = !totalRowOption.isShowTotal;
setTotalRowOption({ ...totalRowOption, isShowTotal: checked });
table.showFooter(checked);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
const onShowDropDownList = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
let checked = !totalRowOption.isShowDropDownList;
setTotalRowOption({ ...totalRowOption, isShowDropDownList: checked });
table.useFooterDropDownList(checked);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
isShowTotal={totalRowOption.isShowTotal}
isShowDropDownList={totalRowOption.isShowDropDownList}
onShowTotal={(e) => { onShowTotal(e) }}
onShowDropDownList={(e) => { onShowDropDownList(e) }}
/>
</div>
);
}
function Panel(props) {
return (
<div class="options-container">
<div class="option-group">
<input class="options-group-input" type="checkbox" id="showTotal" checked={props.isShowTotal} onChange={(e) => { props.onShowTotal(e) }} />
<label for="showTotal">Show TotalRow</label>
</div>
<div class="option-group">
<input class="options-group-input" type="checkbox" id="dropdownList" checked={props.isShowDropDownList} onChange={(e) => { props.onShowDropDownList(e) }} />
<label for="dropdownList">TotalRow DropDownList</label>
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
isShowTotal: true,
isShowDropDownList: true
};
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
isShowTotal={this.state.isShowTotal}
isShowDropDownList={this.state.isShowDropDownList}
onShowTotal={(e) => { this.onShowTotal(e) }}
onShowDropDownList={(e) => { this.onShowDropDownList(e) }}
/>
</div>
);
}
initSpread(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(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
let checked = !this.state.isShowTotal;
this.setState({ isShowTotal: checked });
table.showFooter(checked);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onShowDropDownList(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName("table1");
if (table) {
try {
let checked = !this.state.isShowDropDownList;
this.setState({ isShowDropDownList: checked });
table.useFooterDropDownList(checked);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="options-container">
<div class="option-group">
<input class="options-group-input" type="checkbox" id="showTotal" checked={this.props.isShowTotal} onChange={(e) => { this.props.onShowTotal(e) }} />
<label for="showTotal">Show TotalRow</label>
</div>
<div class="option-group">
<input class="options-group-input" type="checkbox" id="dropdownList" checked={this.props.isShowDropDownList} onChange={(e) => { this.props.onShowDropDownList(e) }} />
<label for="dropdownList">TotalRow DropDownList</label>
</div>
</div>
);
}
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</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;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
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-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.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: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
