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.

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; }