PivotTable Format Labels

You can format fields using the Pivot Table Number Format Dialog, which can help you set pivot table styles without API. For example, in PivotTable.setStyle(), you should first construct the PivotArea of the Field you want to set: You can then use the format dialog in the field setting dialog. You only need to set a format string like "0.00".

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 "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
const useState = React.useState;
export function AppFunc() {
const [fieldName, setFieldName] = useState("Salesperson");
const [formatter, setFormatter] = useState("");
const [pivotTable, setPivotTable] = useState(null);
const initSpread = (spread) => {
spread.suspendPaint();
spread.setSheetCount(2);
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
let tableName = getSource(sheet2, pivotSales);
let pivotTable = addPivotTable(sheet1, tableName);
setPivotTable(pivotTable);
spread.resumePaint();
}
const getSource = (sheet, tableSource) => {
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1, 4, 0, 2).formatter("$ #,##0");
let table = sheet.tables.add('table', 0, 0, 117, 6);
for (let i = 2; i <= 117; i++) {
sheet.setFormula(i - 1, 5, '=D' + i + '*E' + i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
sheet.setArray(0, 0, tableSource);
return table.name();
}
const addPivotTable = (sheet, source) => {
sheet.suspendPaint();
sheet.name("PivotTable");
sheet.setRowCount(10000);
let pivotTable = sheet.pivotTables.add("PivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
pivotTable.suspendLayout();
pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
pivotTable.group(groupInfo);
pivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("quantity", "Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let carsStyle = new GC.Spread.Sheets.Style();
carsStyle.formatter = "[red]@";
let valueStyle = new GC.Spread.Sheets.Style();
valueStyle.formatter = "#0.00";
pivotTable.setStyle(initArea("Cars", pivotTable), carsStyle);
pivotTable.setStyle(initArea("Quantity", pivotTable), valueStyle);
pivotTable.resumeLayout();
sheet.resumePaint();
pivotTable.autoFitColumn();
return pivotTable;
}
const initArea = (fieldName, pt) => {
let fieldArea = pt.getField(fieldName).pivotArea;
if (fieldArea === 1 || fieldArea === 2) {
return {
labelOnly: true,
references: [
{
fieldName,
},
],
};
} else if (fieldArea === 3) {
return {
dataOnly: true,
references: [
{
fieldName: "Values",
items: [fieldName],
},
],
};
}
}
const _setFormatter = () => {
let area = initArea(fieldName, pivotTable);
let style = pivotTable.getStyle(area) || new GC.Spread.Sheets.Style();
style.formatter = formatter;
pivotTable.setStyle(area, style);
}
const resetFormatter = () => {
let area = initArea(fieldName, pivotTable);
let style = pivotTable.getStyle(area);
let formatter = style && style.formatter || "";
setFormatter(formatter);
}
const changeFormatter = (fieldName) => {
let area = initArea(fieldName, pivotTable);
let style = pivotTable.getStyle(area);
setFormatter(style && style.formatter ? style.formatter : "" );
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
<div class="options-container">
<div>Field Name:</div>
<select name="fieldName" id="fieldName" class="field-name" value={fieldName} onChange={e => { setFieldName(e.target.value); changeFormatter(e.target.value) }}>
<option value="Salesperson" selected>Salesperson</option>
<option value="Cars">Cars</option>
<option value="Quarters (date)">Date</option>
<option value="Quantity">Quantity</option>
</select>
<div>Formatter:</div>
<input type="text" class="label-filter-input filter-input" id="formatter" value={formatter} onChange={e => setFormatter(e.target.value)} />
<input type="button" class="format-button" value="Set" id="set" onClick={_setFormatter} />
<input type="button" class="format-button" value="Reset" id="reset" onClick={resetFormatter} />
</div>
</div>
);
}

import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.state = {
renderChild: false,
fieldName: "Salesperson",
formatter: ""
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
{this.state.renderChild ?
(<div class="options-container">
<div>Field Name:</div>
<select name="fieldName" id="fieldName" class="field-name" value={this.state.fieldName} onChange={e => { this.setState({ fieldName: e.target.value }); this.changeFormatter(e.target.value) }}>
<option value="Salesperson" selected>Salesperson</option>
<option value="Cars">Cars</option>
<option value="Quarters (date)">Date</option>
<option value="Quantity">Quantity</option>
</select>
<div>Formatter:</div>
<input type="text" class="label-filter-input filter-input" id="formatter" value={this.state.formatter} onChange={e => { this.setState({ formatter: e.target.value }); }} />
<input type="button" class="format-button" value="Set" id="set" onClick={this.setFormatter.bind(this)} />
<input type="button" class="format-button" value="Reset" id="reset" onClick={this.resetFormatter.bind(this)} />
</div>) : ""}
</div>
);
}
componentDidMount() {
this.setState(() => ({
renderChild: true
}))
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
spread.setSheetCount(2);
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
let tableName = this.getSource(sheet2, pivotSales);
let pivotTable = this.addPivotTable(sheet1, tableName);
this.pivotTable = pivotTable;
spread.resumePaint();
}
getSource(sheet, tableSource) {
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1, 4, 0, 2).formatter("$ #,##0");
let table = sheet.tables.add('table', 0, 0, 117, 6);
for (let i = 2; i <= 117; i++) {
sheet.setFormula(i - 1, 5, '=D' + i + '*E' + i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
sheet.setArray(0, 0, tableSource);
return table.name();
}
addPivotTable(sheet, source) {
sheet.suspendPaint();
sheet.name("PivotTable");
sheet.setRowCount(10000);
let pivotTable = sheet.pivotTables.add("PivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
pivotTable.suspendLayout();
pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
pivotTable.group(groupInfo);
pivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("quantity", "Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let carsStyle = new GC.Spread.Sheets.Style();
carsStyle.formatter = "[red]@";
let valueStyle = new GC.Spread.Sheets.Style();
valueStyle.formatter = "#0.00";
pivotTable.setStyle(this.initArea("Cars", pivotTable), carsStyle);
pivotTable.setStyle(this.initArea("Quantity", pivotTable), valueStyle);
pivotTable.resumeLayout();
sheet.resumePaint();
pivotTable.autoFitColumn();
return pivotTable;
}
initArea(fieldName, pt) {
let fieldArea = pt.getField(fieldName).pivotArea;
if (fieldArea === 1 || fieldArea === 2) {
return {
labelOnly: true,
references: [
{
fieldName,
},
],
};
} else if (fieldArea === 3) {
return {
dataOnly: true,
references: [
{
fieldName: "Values",
items: [fieldName],
},
],
};
}
}
setFormatter() {
let area = this.initArea(this.state.fieldName, this.pivotTable);
let style = this.pivotTable.getStyle(area) || new GC.Spread.Sheets.Style();
style.formatter = this.state.formatter;
this.pivotTable.setStyle(area, style);
}
resetFormatter() {
let area = this.initArea(this.state.fieldName, this.pivotTable);
let style = this.pivotTable.getStyle(area);
let formatter = style && style.formatter || "";
this.setState({ formatter: formatter });
}
changeFormatter(fieldName) {
let area = this.initArea(fieldName, this.pivotTable);
let style = this.pivotTable.getStyle(area);
this.setState({ formatter: style && style.formatter ? style.formatter : "" });
}
}

<!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">
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<!-- 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" style="height: 100%;"></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;
}
.filter-input {
width: 200px;
height: 20px;
display: block;
/* margin-left: 15px; */
margin-top: 10px;
}
.format-button {
width: 45%;
margin-top: 20px;
/* float: right; */
display: inline-block;
}
.field-name {
width: 200px;
height: 25px;
display: block;
margin-bottom: 10px;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.whole-field {
margin-bottom: 10px;
}

(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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/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);

Feedback