To add a group in Spread.Sheets, use code similar to the following example:
You can add a group to another group. You can create an outline of up to several levels, one for each group. Each inner level, represented by a higher number in the outline symbols, displays detailed data for the preceding outer level, represented by a lower number in the outline symbols. Use an outline to quickly display summary rows or columns, or to reveal the detail data for each group.
If you no longer need the group, use the ungroup or ungroupRange method to remove the group. For example:
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import { getData } from './app.data';
import GC from '@mescius/spread-sheets';
import './styles.css';
const spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
let spread = this.spread = $event.spread;
spread.fromJSON(getData()[0]);
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.rowOutlines.group(3, 4);
sheet.rowOutlines.group(8, 3);
sheet.rowOutlines.group(12, 2);
sheet.rowOutlines.group(15, 3);
sheet.rowOutlines.group(3, 18);
sheet.columnOutlines.group(1, 4);
sheet.columnOutlines.group(6, 4);
sheet.resumePaint();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets class="spread" [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div id="statusBar"></div>
</div>
export function getData(){
var data = [{
"version": "14.0.5",
"tabStripRatio": 0.6,
"customList": [],
"sheets": {
"Sheet1": {
"name": "Sheet1",
"isSelected": true,
"rowCount": 100,
"columnCount": 100,
"activeRow": 2,
"activeCol": 2,
"theme": {
"name": "Office",
"themeColor": {
"name": "Office",
"background1": {
"a": 255,
"r": 255,
"g": 255,
"b": 255
},
"background2": {
"a": 255,
"r": 231,
"g": 230,
"b": 230
},
"text1": {
"a": 255,
"r": 0,
"g": 0,
"b": 0
},
"text2": {
"a": 255,
"r": 68,
"g": 84,
"b": 106
},
"accent1": {
"a": 255,
"r": 68,
"g": 114,
"b": 196
},
"accent2": {
"a": 255,
"r": 237,
"g": 125,
"b": 49
},
"accent3": {
"a": 255,
"r": 165,
"g": 165,
"b": 165
},
"accent4": {
"a": 255,
"r": 255,
"g": 192,
"b": 0
},
"accent5": {
"a": 255,
"r": 91,
"g": 155,
"b": 213
},
"accent6": {
"a": 255,
"r": 112,
"g": 173,
"b": 71
},
"hyperlink": {
"a": 255,
"r": 5,
"g": 99,
"b": 193
},
"followedHyperlink": {
"a": 255,
"r": 149,
"g": 79,
"b": 114
}
},
"headingFont": "Calibri Light",
"bodyFont": "Calibri"
},
"data": {
"dataTable": {
"0": {
"0": {
"value": "Income Statement 2019-2020",
"style": "__builtInStyle2"
}
},
"1": {
"0": {
"style": "__builtInStyle3"
},
"1": {
"value": "Q1",
"style": "__builtInStyle4"
},
"2": {
"value": "Q2",
"style": "__builtInStyle4"
},
"3": {
"value": "Q3",
"style": "__builtInStyle4"
},
"4": {
"value": "Q4",
"style": "__builtInStyle4"
},
"5": {
"value": 2019,
"style": "__builtInStyle5"
},
"6": {
"value": "Q1",
"style": "__builtInStyle4"
},
"7": {
"value": "Q2",
"style": "__builtInStyle4"
},
"8": {
"value": "Q3",
"style": "__builtInStyle4"
},
"9": {
"value": "Q4",
"style": "__builtInStyle4"
},
"10": {
"value": 2020,
"style": "__builtInStyle5"
}
},
"2": {
"0": {
"value": "REVENUE",
"style": "__builtInStyle6"
},
"1": {
"value": 1063908,
"style": "__builtInStyle7"
},
"2": {
"value": 932658,
"style": "__builtInStyle7"
},
"3": {
"value": 1097640,
"style": "__builtInStyle7"
},
"4": {
"value": 930181,
"style": "__builtInStyle7"
},
"5": {
"value": 4024387,
"style": "__builtInStyle8",
"formula": "SUM(B3:E3)"
},
"6": {
"value": 1120386,
"style": "__builtInStyle7"
},
"7": {
"value": 1035574,
"style": "__builtInStyle7"
},
"8": {
"value": 1000482,
"style": "__builtInStyle7"
},
"9": {
"value": 1188039,
"style": "__builtInStyle7"
},
"10": {
"value": 12300607,
"style": "__builtInStyle8"
}
},
"3": {
"0": {
"value": "Fixed COS",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B4:E4)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 0,
"style": "__builtInStyle11"
}
},
"4": {
"0": {
"value": "Variable COS",
"style": "__builtInStyle9"
},
"1": {
"value": 608335,
"style": "__builtInStyle10"
},
"2": {
"value": 495069,
"style": "__builtInStyle10"
},
"3": {
"value": 584449,
"style": "__builtInStyle10"
},
"4": {
"value": 512606,
"style": "__builtInStyle10"
},
"5": {
"value": 2200459,
"style": "__builtInStyle11",
"formula": "SUM(B5:E5)"
},
"6": {
"value": 606953,
"style": "__builtInStyle10"
},
"7": {
"value": 621042,
"style": "__builtInStyle10"
},
"8": {
"value": 559003,
"style": "__builtInStyle10"
},
"9": {
"value": 648405,
"style": "__builtInStyle10"
},
"10": {
"value": 6918979,
"style": "__builtInStyle11"
}
},
"5": {
"0": {
"value": "Depreciation",
"style": "__builtInStyle9"
},
"1": {
"value": 9924,
"style": "__builtInStyle10"
},
"2": {
"value": 9987,
"style": "__builtInStyle10"
},
"3": {
"value": 9632,
"style": "__builtInStyle10"
},
"4": {
"value": 9897,
"style": "__builtInStyle10"
},
"5": {
"value": 39440,
"style": "__builtInStyle11",
"formula": "SUM(B6:E6)"
},
"6": {
"value": 7395,
"style": "__builtInStyle10"
},
"7": {
"value": 13524,
"style": "__builtInStyle10"
},
"8": {
"value": 28620,
"style": "__builtInStyle10"
},
"9": {
"value": 10780,
"style": "__builtInStyle10"
},
"10": {
"value": 129195,
"style": "__builtInStyle11"
}
},
"6": {
"0": {
"value": "Cost of Sales",
"style": "__builtInStyle6"
},
"1": {
"value": 618259,
"style": "__builtInStyle7",
"formula": "SUM(B4:B6)"
},
"2": {
"value": 505056,
"style": "__builtInStyle7",
"formula": "SUM(C4:C6)"
},
"3": {
"value": 594081,
"style": "__builtInStyle7",
"formula": "SUM(D4:D6)"
},
"4": {
"value": 522503,
"style": "__builtInStyle7",
"formula": "SUM(E4:E6)"
},
"5": {
"value": 2239899,
"style": "__builtInStyle8",
"formula": "SUM(F4:F6)"
},
"6": {
"value": 614348,
"style": "__builtInStyle7",
"formula": "SUM(G4:G6)"
},
"7": {
"value": 634566,
"style": "__builtInStyle7",
"formula": "SUM(H4:H6)"
},
"8": {
"value": 587623,
"style": "__builtInStyle7",
"formula": "SUM(I4:I6)"
},
"9": {
"value": 659185,
"style": "__builtInStyle7",
"formula": "SUM(J4:J6)"
},
"10": {
"value": 7048174,
"style": "__builtInStyle8",
"formula": "SUM(K4:K6)"
}
},
"7": {
"0": {
"value": "GROSS PROFIT",
"style": "__builtInStyle6"
},
"1": {
"value": 445649,
"style": "__builtInStyle7",
"formula": "B3-B7"
},
"2": {
"value": 427602,
"style": "__builtInStyle7",
"formula": "C3-C7"
},
"3": {
"value": 503559,
"style": "__builtInStyle7",
"formula": "D3-D7"
},
"4": {
"value": 407678,
"style": "__builtInStyle7",
"formula": "E3-E7"
},
"5": {
"value": 1784488,
"style": "__builtInStyle8",
"formula": "F3-F7"
},
"6": {
"value": 506038,
"style": "__builtInStyle7",
"formula": "G3-G7"
},
"7": {
"value": 401008,
"style": "__builtInStyle7",
"formula": "H3-H7"
},
"8": {
"value": 412859,
"style": "__builtInStyle7",
"formula": "I3-I7"
},
"9": {
"value": 528854,
"style": "__builtInStyle7",
"formula": "J3-J7"
},
"10": {
"value": 5252433,
"style": "__builtInStyle8",
"formula": "K3-K7"
}
},
"8": {
"0": {
"value": "Fixed Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 308361,
"style": "__builtInStyle10"
},
"2": {
"value": 302497,
"style": "__builtInStyle10"
},
"3": {
"value": 291258,
"style": "__builtInStyle10"
},
"4": {
"value": 318776,
"style": "__builtInStyle10"
},
"5": {
"value": 1220892,
"style": "__builtInStyle11",
"formula": "SUM(B9:E9)"
},
"6": {
"value": 341003,
"style": "__builtInStyle10"
},
"7": {
"value": 314875,
"style": "__builtInStyle10"
},
"8": {
"value": 350506,
"style": "__builtInStyle10"
},
"9": {
"value": 324738,
"style": "__builtInStyle10"
},
"10": {
"value": 4020657,
"style": "__builtInStyle11"
}
},
"9": {
"0": {
"value": "Variable Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 78137,
"style": "__builtInStyle10"
},
"2": {
"value": 81905,
"style": "__builtInStyle10"
},
"3": {
"value": 117711,
"style": "__builtInStyle10"
},
"4": {
"value": 73710,
"style": "__builtInStyle10"
},
"5": {
"value": 351463,
"style": "__builtInStyle11",
"formula": "SUM(B10:E10)"
},
"6": {
"value": 92156,
"style": "__builtInStyle10"
},
"7": {
"value": 74821,
"style": "__builtInStyle10"
},
"8": {
"value": 85851,
"style": "__builtInStyle10"
},
"9": {
"value": 91929,
"style": "__builtInStyle10"
},
"10": {
"value": 956213,
"style": "__builtInStyle11"
}
},
"10": {
"0": {
"value": "Expenses",
"style": "__builtInStyle6"
},
"1": {
"value": 386498,
"style": "__builtInStyle7",
"formula": "SUM(B9:B10)"
},
"2": {
"value": 384402,
"style": "__builtInStyle7",
"formula": "SUM(C9:C10)"
},
"3": {
"value": 408969,
"style": "__builtInStyle7",
"formula": "SUM(D9:D10)"
},
"4": {
"value": 392486,
"style": "__builtInStyle7",
"formula": "SUM(E9:E10)"
},
"5": {
"value": 1572355,
"style": "__builtInStyle8",
"formula": "SUM(F9:F10)"
},
"6": {
"value": 433159,
"style": "__builtInStyle7",
"formula": "SUM(G9:G10)"
},
"7": {
"value": 389696,
"style": "__builtInStyle7",
"formula": "SUM(H9:H10)"
},
"8": {
"value": 436357,
"style": "__builtInStyle7",
"formula": "SUM(I9:I10)"
},
"9": {
"value": 416667,
"style": "__builtInStyle7",
"formula": "SUM(J9:J10)"
},
"10": {
"value": 4976870,
"style": "__builtInStyle8",
"formula": "SUM(K9:K10)"
}
},
"11": {
"0": {
"value": "OPERATING PROFIT",
"style": "__builtInStyle6"
},
"1": {
"value": 59151,
"style": "__builtInStyle7",
"formula": "B8-B11"
},
"2": {
"value": 43200,
"style": "__builtInStyle7",
"formula": "C8-C11"
},
"3": {
"value": 94590,
"style": "__builtInStyle7",
"formula": "D8-D11"
},
"4": {
"value": 15192,
"style": "__builtInStyle7",
"formula": "E8-E11"
},
"5": {
"value": 212133,
"style": "__builtInStyle8",
"formula": "F8-F11"
},
"6": {
"value": 72879,
"style": "__builtInStyle7",
"formula": "G8-G11"
},
"7": {
"value": 11312,
"style": "__builtInStyle7",
"formula": "H8-H11"
},
"8": {
"value": -23498,
"style": "__builtInStyle7",
"formula": "I8-I11"
},
"9": {
"value": 112187,
"style": "__builtInStyle7",
"formula": "J8-J11"
},
"10": {
"value": 275563,
"style": "__builtInStyle8",
"formula": "K8-K11"
}
},
"12": {
"0": {
"value": "Other Income",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B13:E13)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 0,
"style": "__builtInStyle11"
}
},
"13": {
"0": {
"value": "Other Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B14:E14)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 0,
"style": "__builtInStyle11"
}
},
"14": {
"0": {
"value": "EARNINGS BEFORE INTEREST & TAX",
"style": "__builtInStyle6"
},
"1": {
"value": 59151,
"style": "__builtInStyle7",
"formula": "B12-SUM(B13:B14)"
},
"2": {
"value": 43200,
"style": "__builtInStyle7",
"formula": "C12-SUM(C13:C14)"
},
"3": {
"value": 94590,
"style": "__builtInStyle7",
"formula": "D12-SUM(D13:D14)"
},
"4": {
"value": 15192,
"style": "__builtInStyle7",
"formula": "E12-SUM(E13:E14)"
},
"5": {
"value": 212133,
"style": "__builtInStyle8",
"formula": "F12-SUM(F13:F14)"
},
"6": {
"value": 72879,
"style": "__builtInStyle7",
"formula": "G12-SUM(G13:G14)"
},
"7": {
"value": 11312,
"style": "__builtInStyle7",
"formula": "H12-SUM(H13:H14)"
},
"8": {
"value": -23498,
"style": "__builtInStyle7",
"formula": "I12-SUM(I13:I14)"
},
"9": {
"value": 112187,
"style": "__builtInStyle7",
"formula": "J12-SUM(J13:J14)"
},
"10": {
"value": 275563,
"style": "__builtInStyle8",
"formula": "K12-SUM(K13:K14)"
}
},
"15": {
"0": {
"value": "Interest Income",
"style": "__builtInStyle9"
},
"1": {
"value": -926,
"style": "__builtInStyle10"
},
"2": {
"value": 297,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 1805,
"style": "__builtInStyle10"
},
"5": {
"value": 1176,
"style": "__builtInStyle11",
"formula": "SUM(B16:E16)"
},
"6": {
"value": 125,
"style": "__builtInStyle10"
},
"7": {
"value": 876,
"style": "__builtInStyle10"
},
"8": {
"value": 158,
"style": "__builtInStyle10"
},
"9": {
"value": 253,
"style": "__builtInStyle10"
},
"10": {
"value": -5505,
"style": "__builtInStyle11"
}
},
"16": {
"0": {
"value": "Interest Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 22622,
"style": "__builtInStyle10"
},
"2": {
"value": 22427,
"style": "__builtInStyle10"
},
"3": {
"value": 23844,
"style": "__builtInStyle10"
},
"4": {
"value": 20789,
"style": "__builtInStyle10"
},
"5": {
"value": 89682,
"style": "__builtInStyle11",
"formula": "SUM(B17:E17)"
},
"6": {
"value": 27282,
"style": "__builtInStyle10"
},
"7": {
"value": 34184,
"style": "__builtInStyle10"
},
"8": {
"value": 28150,
"style": "__builtInStyle10"
},
"9": {
"value": 25549,
"style": "__builtInStyle10"
},
"10": {
"value": 301814,
"style": "__builtInStyle11"
}
},
"17": {
"0": {
"value": "Tax Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 17442,
"style": "__builtInStyle10"
},
"2": {
"value": 3864,
"style": "__builtInStyle10"
},
"3": {
"value": 13939,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 35245,
"style": "__builtInStyle11",
"formula": "SUM(B18:E18)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 58610,
"style": "__builtInStyle11"
}
},
"18": {
"0": {
"value": "EARNINGS AFTER TAX",
"style": "__builtInStyle6"
},
"1": {
"value": 20013,
"style": "__builtInStyle7",
"formula": "B15-SUM(B16:B18)"
},
"2": {
"value": 16612,
"style": "__builtInStyle7",
"formula": "C15-SUM(C16:C18)"
},
"3": {
"value": 56807,
"style": "__builtInStyle7",
"formula": "D15-SUM(D16:D18)"
},
"4": {
"value": -7402,
"style": "__builtInStyle7",
"formula": "E15-SUM(E16:E18)"
},
"5": {
"value": 86030,
"style": "__builtInStyle8",
"formula": "F15-SUM(F16:F18)"
},
"6": {
"value": 45472,
"style": "__builtInStyle7",
"formula": "G15-SUM(G16:G18)"
},
"7": {
"value": -23748,
"style": "__builtInStyle7",
"formula": "H15-SUM(H16:H18)"
},
"8": {
"value": -51806,
"style": "__builtInStyle7",
"formula": "I15-SUM(I16:I18)"
},
"9": {
"value": 86385,
"style": "__builtInStyle7",
"formula": "J15-SUM(J16:J18)"
},
"10": {
"value": -79356,
"style": "__builtInStyle8",
"formula": "K15-SUM(K16:K18)"
}
},
"19": {
"0": {
"value": "Adjustments",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B20:E20)"
},
"6": {
"value": 8138,
"style": "__builtInStyle10"
},
"7": {
"value": -4495,
"style": "__builtInStyle10"
},
"8": {
"value": 11147,
"style": "__builtInStyle10"
},
"9": {
"value": 5970,
"style": "__builtInStyle10"
},
"10": {
"value": 371926,
"style": "__builtInStyle11"
}
},
"20": {
"0": {
"value": "NET INCOME",
"style": "__builtInStyle6"
},
"1": {
"value": 20013,
"style": "__builtInStyle7",
"formula": "B19-B20"
},
"2": {
"value": 16612,
"style": "__builtInStyle7",
"formula": "C19-C20"
},
"3": {
"value": 56807,
"style": "__builtInStyle7",
"formula": "D19-D20"
},
"4": {
"value": -7402,
"style": "__builtInStyle7",
"formula": "E19-E20"
},
"5": {
"value": 86030,
"style": "__builtInStyle8",
"formula": "F19-F20"
},
"6": {
"value": 37334,
"style": "__builtInStyle7",
"formula": "G19-G20"
},
"7": {
"value": -19253,
"style": "__builtInStyle7",
"formula": "H19-H20"
},
"8": {
"value": -62953,
"style": "__builtInStyle7",
"formula": "I19-I20"
},
"9": {
"value": 80415,
"style": "__builtInStyle7",
"formula": "J19-J20"
},
"10": {
"value": -451282,
"style": "__builtInStyle8",
"formula": "K19-K20"
}
},
"21": {
"0": {
"value": "Dividends",
"style": "__builtInStyle9"
},
"1": {
"value": 20088,
"style": "__builtInStyle10"
},
"2": {
"value": 25514,
"style": "__builtInStyle10"
},
"3": {
"value": 16403,
"style": "__builtInStyle10"
},
"4": {
"value": 10491,
"style": "__builtInStyle10"
},
"5": {
"value": 72496,
"style": "__builtInStyle11",
"formula": "SUM(B22:E22)"
},
"6": {
"value": 18835,
"style": "__builtInStyle10"
},
"7": {
"value": 29920,
"style": "__builtInStyle10"
},
"8": {
"value": 30576,
"style": "__builtInStyle10"
},
"9": {
"value": 12296,
"style": "__builtInStyle10"
},
"10": {
"value": 280949,
"style": "__builtInStyle11"
}
},
"22": {
"0": {
"value": "RETAINED INCOME",
"style": "__builtInStyle6"
},
"1": {
"value": -75,
"style": "__builtInStyle8",
"formula": "B21-B22"
},
"2": {
"value": -8902,
"style": "__builtInStyle8",
"formula": "C21-C22"
},
"3": {
"value": 40404,
"style": "__builtInStyle8",
"formula": "D21-D22"
},
"4": {
"value": -17893,
"style": "__builtInStyle8",
"formula": "E21-E22"
},
"5": {
"value": 13534,
"style": "__builtInStyle8",
"formula": "F21-F22"
},
"6": {
"value": 18499,
"style": "__builtInStyle8",
"formula": "G21-G22"
},
"7": {
"value": -49173,
"style": "__builtInStyle8",
"formula": "H21-H22"
},
"8": {
"value": -93529,
"style": "__builtInStyle8",
"formula": "I21-I22"
},
"9": {
"value": 68119,
"style": "__builtInStyle8",
"formula": "J21-J22"
},
"10": {
"value": -732231,
"style": "__builtInStyle8",
"formula": "K21-K22"
}
}
},
"defaultDataNode": {
"style": {
"backColor": null,
"foreColor": "Text 1 0",
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"diagonalDown": null,
"diagonalUp": null
}
}
},
"rowHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"colHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"rows": [
{
"size": 24
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
}
],
"columns": [
{
"size": 250
},
{
"size": 86
},
{
"size": 66
},
{
"size": 79
},
null,
{
"size": 89
},
{
"size": 79
},
{
"size": 79
},
{
"size": 72
},
{
"size": 76
},
{
"size": 82
}
],
"leftCellIndex": 0,
"topCellIndex": 0,
"selections": {
"0": {
"row": 22,
"rowCount": 1,
"col": 2,
"colCount": 1
},
"length": 1
},
"defaults": {
"colHeaderRowHeight": 20,
"colWidth": 64,
"rowHeaderColWidth": 40,
"rowHeight": 19.2,
"_isExcelDefaultColumnWidth": true
},
"autoMergeRangeInfos": [],
"index": 0
}
},
"namedStyles": [
{
"backColor": "Accent 1 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent1"
},
{
"backColor": "Accent 2 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent2"
},
{
"backColor": "Accent 3 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent3"
},
{
"backColor": "Accent 4 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent4"
},
{
"backColor": "Accent 5 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent5"
},
{
"backColor": "Accent 6 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent6"
},
{
"backColor": "Accent 1 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent1"
},
{
"backColor": "Accent 2 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent2"
},
{
"backColor": "Accent 3 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent3"
},
{
"backColor": "Accent 4 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent4"
},
{
"backColor": "Accent 5 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent5"
},
{
"backColor": "Accent 6 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent6"
},
{
"backColor": "Accent 1 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent1"
},
{
"backColor": "Accent 2 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent2"
},
{
"backColor": "Accent 3 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent3"
},
{
"backColor": "Accent 4 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent4"
},
{
"backColor": "Accent 5 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent5"
},
{
"backColor": "Accent 6 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent6"
},
{
"backColor": "Accent 1 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent1"
},
{
"backColor": "Accent 2 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent2"
},
{
"backColor": "Accent 3 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent3"
},
{
"backColor": "Accent 4 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent4"
},
{
"backColor": "Accent 5 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent5"
},
{
"backColor": "Accent 6 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent6"
},
{
"backColor": "#ffc7ce",
"foreColor": "#9c0006",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Bad"
},
{
"backColor": "#f2f2f2",
"foreColor": "#fa7d00",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Calculation",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#a5a5a5",
"foreColor": "Background 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 6
},
"borderTop": {
"color": "#3f3f3f",
"style": 6
},
"borderRight": {
"color": "#3f3f3f",
"style": 6
},
"borderBottom": {
"color": "#3f3f3f",
"style": 6
},
"name": "Check Cell",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)",
"name": "Comma"
},
{
"backColor": null,
"formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)",
"name": "Comma [0]"
},
{
"backColor": null,
"formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)",
"name": "Currency"
},
{
"backColor": null,
"formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)",
"name": "Currency [0]"
},
{
"backColor": null,
"foreColor": "#7f7f7f",
"font": "italic normal 14.7px Calibri",
"themeFont": "Body",
"name": "Explanatory Text"
},
{
"backColor": "#c6efce",
"foreColor": "#006100",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Good"
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 20px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 5
},
"name": "Heading 1",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 17.3px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 50",
"style": 5
},
"name": "Heading 2",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 40",
"style": 2
},
"name": "Heading 3",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"name": "Heading 4"
},
{
"backColor": "#ffcc99",
"foreColor": "#3f3f76",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Input",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#fa7d00",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "#ff8001",
"style": 6
},
"name": "Linked Cell",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#ffeb9c",
"foreColor": "#9c6500",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Neutral"
},
{
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "Normal",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#ffffcc",
"borderLeft": {
"color": "#b2b2b2",
"style": 1
},
"borderTop": {
"color": "#b2b2b2",
"style": 1
},
"borderRight": {
"color": "#b2b2b2",
"style": 1
},
"borderBottom": {
"color": "#b2b2b2",
"style": 1
},
"name": "Note",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#f2f2f2",
"foreColor": "#3f3f3f",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 1
},
"borderTop": {
"color": "#3f3f3f",
"style": 1
},
"borderRight": {
"color": "#3f3f3f",
"style": 1
},
"borderBottom": {
"color": "#3f3f3f",
"style": 1
},
"name": "Output",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"formatter": "0%",
"name": "Percent"
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 24px Calibri Light",
"themeFont": "Headings",
"name": "Title"
},
{
"backColor": null,
"foreColor": "Text 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": {
"color": "Accent 1 0",
"style": 1
},
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 6
},
"name": "Total",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#ff0000",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Warning Text"
},
{
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle1",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "italic normal 18.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle2",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 0,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle3",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "mmm\\ yyyy",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle4",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle5",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 0,
"vAlign": 2,
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle6",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle7",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 80",
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle8",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 0,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle9",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle10",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 80",
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle11",
"diagonalDown": null,
"diagonalUp": null
}
]
}];
return data;
};
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.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;
}
input {
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
width: 40px;
display: inline-block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.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',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
