Spread Transformation

When a user sets a object column's fields as spread in the data source schema, the columns will show the first level properties of the object. This is useful for adding a nested object into the TableSheet without having to manually flatten the fields before data binding.

When a user fetches the following json ("Companies.json") from a server, and specifies that the "fields" column should be spread, then the above nested object will be converted to a plain object. id createdTime Opportunities Address Employees Name Description Type Contacts SumOpp Field 11 rec0kxKqvmMIFTmnF 2013-04-17T02:38:00.000Z recZgmDrnvRTxTvpI 8340 Clarington Avenue, Suite 2500, Culver City, CA 90232 4000 Liberty Pictures One of the minor studios of Hollywood's Golden Age, Liberty Pictures was ultimately acquired by Japanese multinational media conglomerate Cony in 1989. Film Studio rec1cpyvgqTEzXxjK, recYjwxDhkRIzVvqO 50000 4000
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); }; function getDataSource() { return [ { "id": "rec0kxKqvmMIFTmnF", "createdTime": "2013-04-17T02:38:00.000Z", "fields": { "Opportunities": [ "recZgmDrnvRTxTvpI" ], "Address": "8340 Clarington Avenue, Suite 2500, Culver City, CA 90232", "Employees": 4000, "Name": "Liberty Pictures", "Description": "One of the minor studios of Hollywood's Golden Age, Liberty Pictures was ultimately acquired by Japanese multinational media conglomerate Cony in 1989.", "Type": "Film Studio", "Contacts": [ "rec1cpyvgqTEzXxjK", "recYjwxDhkRIzVvqO" ], "SumOpp": 50000, "Field 11": 4000 } }, { "id": "rec2lmCylyUPG1wjL", "createdTime": "2013-04-17T02:38:06.000Z", "fields": { "Opportunities": [ "rec0fzGCrvIRC4ivL" ], "Address": "5577 Linnington Ave., Suite 420, Los Angeles, CA 90064\n", "Employees": 350, "Name": "Wolf Searchlight Pictures", "Description": "Wolf Searchlight Pictures is a U.S. film distribution company specializing in independent and foreign films. It exists within the larger Wolf Entertainment Group (which also includes the larger film studio 20th Century Wolf), which is a subsidiary of the American multinational mass media conglomerate 21st Century Wolf, which is a subsidiary of the even larger multinational mass media conglomerate News Group.", "Type": "Film Studio", "Contacts": [ "recNiyDyulWLzUxrD" ], "SumOpp": 225000, "Field 11": 350 } }, { "id": "recZ9wHAmoKOy4viO", "createdTime": "2013-04-17T02:38:13.000Z", "fields": { "Opportunities": [ "recZmvwvrnXNA3xwL" ], "Address": "7000 N. Bronson Avenue, Los Angeles, CA 90004\n", "Employees": 5000, "Name": "Tantamount Studios", "Description": "Tantamount Studios is the fourth largest major film studio in the world, and a subsidiary of the U.S. media conglomerate Avicom. Tantamount was founded in 1912 by the Polish immigrant Mordecai M. Meyers and is one the oldest surviving film studios in the U.S.\nRecent Films:\n\"Homeless Dad\"\n\"Almost Cousins\"\n\"Love, Indubitably\"", "Type": "Film Studio", "SumOpp": 65000, "Field 11": 5000 } } ]; } function initSpread(spread) { spread.suspendPaint(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; var dataManager = spread.dataManager(); // add table var myTable = dataManager.addTable("myTable", { data: getDataSource(), schema: { columns: { fields: { spread: true } } } }); // add view myTable.fetch().then(function () { var myView = myTable.addView("myView", undefined, undefined, { defaultColumnWidth: "*" }); var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; //hide new row sheet.setDataView(myView); }); spread.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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.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 id="optionContainer" class="optionContainer"> </div> </div> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; }