You can use the setDataSource and getDataSource methods to set and get the data source. Before you use setDataSource, use the autoGenerateColumns method to control whether to generate columns automatically while binding data. For example:
Also you can use the getDataItem method to get the data item of the specified row.
You can bind the columns using the specified data fields, as shown in the following example:
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'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import './styles.css';
export function AppFunc() {
let spread = null;
let getProducts = function (count) {
const _lines = ["Computers", "Washers", "Stoves"];
const _colors = ["Red", "Green", "Blue", "White"];
const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];
var dataList = [];
for (var i = 1; i <= count; i++) {
var line = _lines[Math.floor(Math.random() * 3)];
dataList[i - 1] = new Product(i,
line,
_colors[Math.floor(Math.random() * 4)],
line + " " + line.charAt(0) + i,
Math.floor(Math.random() * 5001) / 10.0 + 500,
Math.floor(Math.random() * 6001) / 10.0,
Math.floor(Math.random() * 10001) / 100.0,
!!(Math.random() > 0.5),
_ratings[Math.floor(Math.random() * 6)]);
}
return dataList;
}
let initSpread = function (value) {
spread = value;
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var products = getProducts(100);
var sheet = spread.getSheet(0);
sheet.name("Default binding");
sheet.setDataSource(products);
var sheet2 = spread.getSheet(1);
sheet2.name("Custom binding");
sheet2.autoGenerateColumns = false;
sheet2.setDataSource(products);
var colInfos = [
{ name: "id", displayName: "ID" },
{ name: "name", displayName: "Name", size: 100 },
{ name: "line", displayName: "Line", size: 80 },
{ name: "color", displayName: "Color" },
{ name: "price", displayName: "Price", formatter: "0.00", size: 80 },
{ name: "cost", displayName: "Cost", formatter: "0.00", size: 80 },
{ name: "weight", displayName: "Weight", formatter: "0.00", size: 80 },
{ name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: "rating", displayName: "Rating" }
];
sheet2.bindColumns(colInfos);
spread.resumePaint();
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
</div>);
}
class Product {
constructor(id, line, color, name, price, cost, weight, discontinued, rating) {
this.id = id;
this.line = line;
this.color = color;
this.name = name;
this.price = price;
this.cost = cost;
this.weight = weight;
this.discontinued = discontinued;
this.rating = rating;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
</div>
)
}
getProducts(count) {
const _lines = ["Computers", "Washers", "Stoves"];
const _colors = ["Red", "Green", "Blue", "White"];
const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];
var dataList = [];
for (var i = 1; i <= count; i++) {
var line = _lines[Math.floor(Math.random() * 3)];
dataList[i - 1] = new Product(i,
line,
_colors[Math.floor(Math.random() * 4)],
line + " " + line.charAt(0) + i,
Math.floor(Math.random() * 5001) / 10.0 + 500,
Math.floor(Math.random() * 6001) / 10.0,
Math.floor(Math.random() * 10001) / 100.0,
!!(Math.random() > 0.5),
_ratings[Math.floor(Math.random() * 6)]);
}
return dataList;
}
initSpread(spread) {
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var products = this.getProducts(100);
var sheet = spread.getSheet(0);
sheet.name("Default binding");
sheet.setDataSource(products);
var sheet2 = spread.getSheet(1);
sheet2.name("Custom binding");
sheet2.autoGenerateColumns = false;
sheet2.setDataSource(products);
var colInfos = [
{ name: "id", displayName: "ID" },
{ name: "name", displayName: "Name", size: 100 },
{ name: "line", displayName: "Line", size: 80 },
{ name: "color", displayName: "Color" },
{ name: "price", displayName: "Price", formatter: "0.00", size: 80 },
{ name: "cost", displayName: "Cost", formatter: "0.00", size: 80 },
{ name: "weight", displayName: "Weight", formatter: "0.00", size: 80 },
{ name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: "rating", displayName: "Rating" }
];
sheet2.bindColumns(colInfos);
spread.resumePaint();
}
}
class Product {
constructor(id, line, color, name, price, cost, weight, discontinued, rating) {
this.id = id;
this.line = line;
this.color = color;
this.name = name;
this.price = price;
this.cost = cost;
this.weight = weight;
this.discontinued = discontinued;
this.rating = rating;
}
}
<!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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
height: 100%;
}
(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-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);
