Customization

SpreadJS provides APIs for you to customize the group, including getting and setting the range group's direction, expanding the group, displaying or hiding the range group, and so on.

You can use the showRowOutline or showColumnOutline method to get and set whether to display the range group. For example: If you want to expand or collapse the outline (range group) of the rows or columns, use the expandGroup or expand method (expands all outlines of the specified level). Or you can click the summary button (+, -) to expand or collapse the outline. For example: If you want to get or set the range group's direction (the summary button's position), use the direction method. 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(); } _getElementById("btnGroup").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection sheet.rowOutlines.group(cr.row, cr.rowCount); sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection sheet.columnOutlines.group(cr.col, cr.colCount); sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("btnUngroup").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection sheet.rowOutlines.ungroupRange(cr.row, cr.rowCount); sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection sheet.columnOutlines.ungroupRange(cr.col, cr.colCount); sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("btnShowDetail").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection for (var i = 0; i < cr.rowCount; i++) { var rgi = sheet.rowOutlines.find(i + cr.row, 0); if (rgi != null) { sheet.rowOutlines.expandGroup(rgi, true); } } sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection for (var i = 0; i < cr.colCount; i++) { var rgi = sheet.columnOutlines.find(i + cr.col, 0); if (rgi != null) { sheet.columnOutlines.expandGroup(rgi, true); } } sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("btnHideDetail").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection for (var i = 0; i < cr.rowCount; i++) { var rgi = sheet.rowOutlines.find(i + cr.row, 0); if (rgi != null) { sheet.rowOutlines.expandGroup(rgi, false); } } sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection for (var i = 0; i < cr.colCount; i++) { var rgi = sheet.columnOutlines.find(i + cr.col, 0); if (rgi != null) { sheet.columnOutlines.expandGroup(rgi, false); } } sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("row_summary").addEventListener('click',function () { var sheet = spread.getActiveSheet(); var checked = this.checked; if (checked) { sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.forward); } else { sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.backward); } sheet.invalidateLayout(); sheet.repaint(); }); _getElementById("col_summary").addEventListener('click',function () { var sheet = spread.getActiveSheet(); var checked = this.checked; if (checked) { sheet.columnOutlines.direction(spreadNS.Outlines.OutlineDirection.forward); } else { sheet.columnOutlines.direction(spreadNS.Outlines.OutlineDirection.backward); } sheet.invalidateLayout(); sheet.repaint(); }); _getElementById("rowGroup_visibility").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.showRowOutline(this.checked); }); _getElementById("colGroup_visibility").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.showColumnOutline(this.checked); }); }; function _getElementById(id){ return document.getElementById(id); }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <p class="desc">Use these options to change group settings in the highlighted range</p> </div> <div class="option-row"> <input type="button" value="Group" id="btnGroup" /> <input type="button" value="Ungroup" id="btnUngroup" /> <input type="button" value="Show Detail" id="btnShowDetail" /> <input type="button" value="Hide Detail" id="btnHideDetail" /> </div> <div class="option-row"> <input type="checkbox" id="row_summary" checked /> <label for="row_summary">Summary Rows Below Details</label> </div> <div class="option-row"> <input type="checkbox" id="col_summary" checked /> <label for="col_summary">Summary Columns Right Detail</label> </div> <div class="option-row"> <input type="checkbox" id="rowGroup_visibility" checked /> <label for="rowGroup_visibility">Show Row Range Group</label> </div> <div class="option-row"> <input type="checkbox" id="colGroup_visibility" checked /> <label for="colGroup_visibility">Show Column Range Group</label> </div> </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 } ] }];
label { display: inline-block; width: 210px; } input[type="button"] { padding: 4px 6px; width: 100%; margin-bottom: 10px; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; /*margin-top: 10px;*/ } .desc { padding: 2px 10px; background-color: #F4F8EB; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }