Overview

If you have a list of data that you want to group and summarize, you can create an outline of rows or columns. The rows group panel is on the left side of the row header; the columns group panel is above the column headers.

Description
app.js
index.html
data.js
styles.css
Copy to CodeMine

To add a group in Spread.Sheets, use code similar to the following example:

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    var sheet = spread.getActiveSheet();
    sheet.rowOutlines.group(1, 10);
    sheet.columnOutlines.group(1, 5);

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:

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    var sheet = spread.getActiveSheet();
    sheet.rowOutlines.ungroupRange(1, 10);
    sheet.columnOutlines.ungroupRange(1, 5);
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:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { if (data.length > 0) { spread.fromJSON(data[0]); var sheet = spread.getActiveSheet(); 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(); } };
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width: 100%; height: 100%"></div> </div> </body> </html>
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 } ] }];
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }