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
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
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
}
}
];
}
export function AppFunc() {
const initSpread = (spread) => {
spread.suspendPaint();
spread.clearSheets();
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();
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
</div>
);
}
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
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
}
}
];
}
export class App extends Component {
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
</div>
);
}
initSpread(spread) {
spread.suspendPaint();
spread.clearSheets();
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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
