Cell Fill Effect

Except the back color of solid fill, now SpreadJS support gradient cell fills and pattern cell fills. The following sample shows set with gradient top to bottom with red-white-blue. The following sample shows set with gradient inner to outer with red-white-blue. The following sample shows the lightHorizontal red pattern fill on the white background.

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 GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
let spread = null;
export function AppFunc() {
let autoGenerateColumns = true;
const [fillEffectOption, setFillEffectOption] = React.useState({
gradientDegree: 45,
gradientStops: '[{"position":0,"color":"#838383"},{"position":0.5,"color":"white"},{"position":1,"color":"#82bc00"}]',
pathLeft: 0.5,
pathRight: 0.9,
pathTop: 0.5,
pathBottom: 0.7,
pathStops: '[{"position":0,"color":"#82bc00"},{"position":0.5,"color":"white"},{"position":1,"color":"#838383"}]',
patternType: "darkUp",
bgColor: "white",
patternColor: "#C3C3C3"
});
const initSpread = (currSpread) => {
spread = currSpread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
initSheet(sheet);
// Set range with pattern fill
sheet.getRange(3, 2, 3, 2).backColor({ type: GC.Spread.Sheets.PatternType.darkDown, backgroundColor: '#D3D3D3', patternColor: "white" });
sheet.getRange(6, 1, 12, 1).backColor({ type: GC.Spread.Sheets.PatternType.gray125, backgroundColor: '#B3B3B3', patternColor: "white" });
// Set range with gradient path fill
sheet.getRange(1, 3, 1, 1).backColor({ type: "path", left: 0.1, top: 0.3, right: 0.9, bottom: 0.6, stops: [{ position: 0, color: "#C3C3C3" }, { position: 1, color: "white" }] });
// Set conditional format with gradient path fill
let cfs = sheet.conditionalFormats;
let style = new GC.Spread.Sheets.Style();
style.backColor = { degree: 90, stops: [{ position: 0.3, color: "white" }, { position: 1, color: "#C3C3C3" },] };
cfs.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, 250000, 0, style, [new GC.Spread.Sheets.Range(6, 2, 12, 1)]);
// Set table style with gradient fill
let border = new GC.Spread.Sheets.LineBorder();
let tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
tableStyle.name('tableStyle1');
tableStyle.secondRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle({ degree: 90, stops: [{ position: 0, color: "accent 1" }, { position: 0.1, color: "white" }, { position: 0.7, color: "white" }, { position: 1, color: "accent 6" },] }, 'black', '10px arial', border, border, border, border, border, border))
tableStyle.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle({ degree: 90, stops: [{ position: 0, color: "accent 6" }, { position: 0.1, color: "white" }, { position: 0.7, color: "white" }, { position: 1, color: "accent 1" },] }, 'black', '10px arial', border, border, border, border, border, border))
sheet.tables.findByName('cT').style(tableStyle);
spread.resumePaint();
}
const initSheet = (sheet) => {
let gcns = GC.Spread.Sheets;
let data = [
[, "FY 2019"],
[, "Sales"],
[, "Monthly", "Cumulative"],
["Apr", 188897, 188897],
["May", 208146, 397043],
["Jun", 226196, 623239],
["Jul", 277318, 900557],
["Aug", 263273, 1163830],
["Sep", 259845, 1423675],
["Oct", 241047, 1664722],
["Nov", 256306, 1921028],
["Dec", 195845, 2116873],
["Jan", 204934, 2321808],
["Feb", 257852, 2579660],
["Mar", 227779, 2807439]
];
sheet.setArray(3, 1, data);
sheet.setColumnWidth(2, 110);
sheet.setColumnWidth(3, 110);
sheet.setRowCount(20);
sheet.setColumnCount(9);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.getRange(3, 1, 15, 3).setBorder(
new gcns.LineBorder("black", gcns.LineStyle.medium),
{ all: true });
sheet.addSpan(3, 2, 1, 2);
sheet.addSpan(4, 2, 1, 2);
sheet.getRange(3, 2, 3, 2).hAlign(gcns.HorizontalAlign.center);
let cMapSource = [
{ "Currency": "USD", "Value": 1, "Symbol": "$" },
{ "Currency": "CNY", "Value": 7.02, "Symbol": "¥" },
{ "Currency": "JPY", "Value": 108.8, "Symbol": "¥" },
{ "Currency": "EURO", "Value": 0.91, "Symbol": "€" },
];
sheet.tables.addFromDataSource('cT', 3, 5, cMapSource);
[5, 6, 7].forEach((col) => { sheet.setColumnWidth(col, 80); });
sheet.getCell(1, 2).value("Unit:").hAlign(gcns.HorizontalAlign.right);
let dv1 = gcns.DataValidation.createFormulaListValidator('=cT[[#Data], [Currency]]');
sheet.setDataValidator(1, 3, dv1);
sheet.getCell(1, 3).hAlign(gcns.HorizontalAlign.center).value("USD");
sheet.getRange(6, 2, 12, 2)
.hAlign(gcns.HorizontalAlign.center)
.formatter('=VLOOKUP($D$2,cT[#Data],3,FALSE)&"  "&TEXT(@*VLOOKUP($D$2,cT[#Data],2,FALSE),"###,###")');
}
const setGradientButtonClicked = (e) => {
let backColor = {};
backColor.degree = parseInt(document.getElementById('gradientDegree').value, 10);
backColor.stops = JSON.parse(document.getElementById('gradientStops').value);
let sheet = spread.getActiveSheet();
let selection = sheet.getSelections()[0];
if (selection) {
sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor);
}
}
const setPathButtonClicked = (e) => {
let backColor = { type: "path" };
backColor.left = parseFloat(document.getElementById('pathLeft').value);
backColor.right = parseFloat(document.getElementById('pathRight').value);
backColor.top = parseFloat(document.getElementById('pathTop').value);
backColor.bottom = parseFloat(document.getElementById('pathBottom').value);
backColor.stops = JSON.parse(document.getElementById('pathStops').value);
let sheet = spread.getActiveSheet();
let selection = sheet.getSelections()[0];
if (selection) {
sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor);
}
}
const setPatternButtonClicked = (e) => {
let backColor = {};
backColor.type = GC.Spread.Sheets.PatternType[document.getElementById('patternType').value];
backColor.backgroundColor = document.getElementById('bgColor').value;
backColor.patternColor = document.getElementById('patternColor').value;
let sheet = spread.getActiveSheet();
let selection = sheet.getSelections()[0];
if (selection) {
sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor);
}
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet autoGenerateColumns={autoGenerateColumns}>
</Worksheet>
</SpreadSheets>
</div>
<Panel
panelInfo={fillEffectOption}
setGradientButtonClicked={setGradientButtonClicked}
setPathButtonClicked={setPathButtonClicked}
setPatternButtonClicked={setPatternButtonClicked}
/>
</div>
);
}
function Panel(props) {
const [panelInfo, setPanelInfo] = React.useState(props.panelInfo);
React.useEffect(() => {
if (props.panelInfo !== panelInfo) {
setPanelInfo(props.panelInfo);
}
}, [props.panelInfo]);
return (
<div class="options-container">
<strong class="sp-demo-HeaderTitle">Settings:</strong>
<fieldset>
<div class="settingsDiv">
<div class="option-row">
<label for="gradientDegree">Degree:</label>
<input type="text" id="gradientDegree" value={panelInfo.gradientDegree} onChange={(e) => { setPanelInfo({ ...panelInfo, gradientDegree: Number(e.target.value) }) }}></input>
</div>
<div class="option-row">
<label for="gradientStops">Stops:</label>
<textarea id="gradientStops"
rows="4" value={panelInfo.gradientStops} onChange={(e) => { setPanelInfo({ ...panelInfo, gradientStops: e.target.value }) }}></textarea>
</div>
<div class="option-row">
<button onClick={(e) => { props.setGradientButtonClicked(e) }}>Set Gradient Fill</button>
</div>
</div>
</fieldset>
<fieldset>
<div class="settingsDiv">
<div class="option-row">
<label for="pathLeft">Left:</label>
<input type="text" id="pathLeft" value={panelInfo.pathLeft} onChange={(e) => { setPanelInfo({ ...panelInfo, pathLeft: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathRight">Right:</label>
<input type="text" id="pathRight" value={panelInfo.pathRight} onChange={(e) => { setPanelInfo({ ...panelInfo, pathRight: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathTop">Top:</label>
<input type="text" id="pathTop" value={panelInfo.pathTop} onChange={(e) => { setPanelInfo({ ...panelInfo, pathTop: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathBottom">Bottom:</label>
<input type="text" id="pathBottom" value={panelInfo.pathBottom} onChange={(e) => { setPanelInfo({ ...panelInfo, pathBottom: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathStops">Stops:</label>
<textarea id="pathStops"
rows="4" value={panelInfo.pathStops} onChange={(e) => { setPanelInfo({ ...panelInfo, pathStops: e.target.value }) }}></textarea>
</div>
<div class="option-row">
<button onClick={(e) => { props.setPathButtonClicked(e) }}>Set Gradient Path Fill</button>
</div>
</div>
</fieldset>
<fieldset>
<div class="settingsDiv">
<div class="option-row">
<label for="patternType">Pattern Type:</label>
<select id="patternType" value={panelInfo.patternType} onChange={(e) => { setPanelInfo({ ...panelInfo, patternType: e.target.select }) }}>
<option value="solid">solid</option>
<option value="darkGray">darkGray</option>
<option value="mediumGray">mediumGray</option>
<option value="lightGray">lightGray</option>
<option value="gray125">gray125</option>
<option value="gray0615">gray0615</option>
<option value="darkHorizontal">darkHorizontal</option>
<option value="darkVertical">darkVertical</option>
<option value="darkDown">darkDown</option>
<option value="darkUp">darkUp</option>
<option value="darkGrid">darkGrid</option>
<option value="darkTrellis">darkTrellis</option>
<option value="lightHorizontal">lightHorizontal</option>
<option value="lightVertical">lightVertical</option>
<option value="lightDown">lightDown</option>
<option value="lightUp">lightUp</option>
<option value="lightGrid">lightGrid</option>
<option value="lightTrellis">lightTrellis</option>
</select>
</div>
<div class="option-row">
<label for="bgColor">Background color:</label>
<input type="text" id="bgColor" value={panelInfo.bgColor} onChange={(e) => { setPanelInfo({ ...panelInfo, bgColor: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="patternColor">Pattern color:</label>
<input type="text" id="patternColor" value={panelInfo.patternColor} onChange={(e) => { setPanelInfo({ ...panelInfo, patternColor: e.target.value }) }}></input>
</div>
<div class="option-row">
<button onClick={(e) => { props.setPatternButtonClicked(e) }}>Set Pattern Fill</button>
</div>
</div>
</fieldset>
</div>
);
}

import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.autoGenerateColumns = true;
this.state = {
gradientDegree: 45,
gradientStops: '[{"position":0,"color":"#838383"},{"position":0.5,"color":"white"},{"position":1,"color":"#82bc00"}]',
pathLeft: 0.5,
pathRight: 0.9,
pathTop: 0.5,
pathBottom: 0.7,
pathStops: '[{"position":0,"color":"#82bc00"},{"position":0.5,"color":"white"},{"position":1,"color":"#838383"}]',
patternType: "darkUp",
bgColor: "white",
patternColor: "#C3C3C3"
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet autoGenerateColumns={this.autoGenerateColumns}>
</Worksheet>
</SpreadSheets>
</div>
<Panel
// gradientDegree={this.state.gradientDegree}
// gradientStops={this.state.gradientStops}
// pathLeft={this.state.pathLeft}
// pathRight={this.state.pathRight}
// pathTop={this.state.pathTop}
// pathBottom={this.state.pathBottom}
// pathStops={this.state.pathStops}
// patternType={this.state.patternType}
// bgColor={this.state.bgColor}
// patternColor={this.state.patternColor}
panelInfo={this.state}
setGradientButtonClicked={(e) => { this.setGradientButtonClicked(e) }}
setPathButtonClicked={(e) => { this.setPathButtonClicked(e) }}
setPatternButtonClicked={(e) => { this.setPatternButtonClicked(e) }}
/>
</div>
);
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
this.initSheet(sheet);
// Set range with pattern fill
sheet.getRange(3, 2, 3, 2).backColor({ type: GC.Spread.Sheets.PatternType.darkDown, backgroundColor: '#D3D3D3', patternColor: "white" });
sheet.getRange(6, 1, 12, 1).backColor({ type: GC.Spread.Sheets.PatternType.gray125, backgroundColor: '#B3B3B3', patternColor: "white" });
// Set range with gradient path fill
sheet.getRange(1, 3, 1, 1).backColor({ type: "path", left: 0.1, top: 0.3, right: 0.9, bottom: 0.6, stops: [{ position: 0, color: "#C3C3C3" }, { position: 1, color: "white" }] });
// Set conditional format with gradient path fill
let cfs = sheet.conditionalFormats;
let style = new GC.Spread.Sheets.Style();
style.backColor = { degree: 90, stops: [{ position: 0.3, color: "white" }, { position: 1, color: "#C3C3C3" },] };
cfs.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, 250000, 0, style, [new GC.Spread.Sheets.Range(6, 2, 12, 1)]);
// Set table style with gradient fill
let border = new GC.Spread.Sheets.LineBorder();
let tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
tableStyle.name('tableStyle1');
tableStyle.secondRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle({ degree: 90, stops: [{ position: 0, color: "accent 1" }, { position: 0.1, color: "white" }, { position: 0.7, color: "white" }, { position: 1, color: "accent 6" },] }, 'black', '10px arial', border, border, border, border, border, border))
tableStyle.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle({ degree: 90, stops: [{ position: 0, color: "accent 6" }, { position: 0.1, color: "white" }, { position: 0.7, color: "white" }, { position: 1, color: "accent 1" },] }, 'black', '10px arial', border, border, border, border, border, border))
sheet.tables.findByName('cT').style(tableStyle);
spread.resumePaint();
}
initSheet(sheet) {
let gcns = GC.Spread.Sheets;
let data = [
[, "FY 2019"],
[, "Sales"],
[, "Monthly", "Cumulative"],
["Apr", 188897, 188897],
["May", 208146, 397043],
["Jun", 226196, 623239],
["Jul", 277318, 900557],
["Aug", 263273, 1163830],
["Sep", 259845, 1423675],
["Oct", 241047, 1664722],
["Nov", 256306, 1921028],
["Dec", 195845, 2116873],
["Jan", 204934, 2321808],
["Feb", 257852, 2579660],
["Mar", 227779, 2807439]
];
sheet.setArray(3, 1, data);
sheet.setColumnWidth(2, 110);
sheet.setColumnWidth(3, 110);
sheet.setRowCount(20);
sheet.setColumnCount(9);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.getRange(3, 1, 15, 3).setBorder(
new gcns.LineBorder("black", gcns.LineStyle.medium),
{ all: true });
sheet.addSpan(3, 2, 1, 2);
sheet.addSpan(4, 2, 1, 2);
sheet.getRange(3, 2, 3, 2).hAlign(gcns.HorizontalAlign.center);
let cMapSource = [
{ "Currency": "USD", "Value": 1, "Symbol": "$" },
{ "Currency": "CNY", "Value": 7.02, "Symbol": "¥" },
{ "Currency": "JPY", "Value": 108.8, "Symbol": "¥" },
{ "Currency": "EURO", "Value": 0.91, "Symbol": "€" },
];
sheet.tables.addFromDataSource('cT', 3, 5, cMapSource);
[5, 6, 7].forEach((col) => { sheet.setColumnWidth(col, 80); });
sheet.getCell(1, 2).value("Unit:").hAlign(gcns.HorizontalAlign.right);
let dv1 = gcns.DataValidation.createFormulaListValidator('=cT[[#Data], [Currency]]');
sheet.setDataValidator(1, 3, dv1);
sheet.getCell(1, 3).hAlign(gcns.HorizontalAlign.center).value("USD");
sheet.getRange(6, 2, 12, 2)
.hAlign(gcns.HorizontalAlign.center)
.formatter('=VLOOKUP($D$2,cT[#Data],3,FALSE)&"  "&TEXT(@*VLOOKUP($D$2,cT[#Data],2,FALSE),"###,###")');
}
setGradientButtonClicked(e) {
let backColor = {};
backColor.degree = parseInt(document.getElementById('gradientDegree').value, 10);
backColor.stops = JSON.parse(document.getElementById('gradientStops').value);
let sheet = this.spread.getActiveSheet();
let selection = sheet.getSelections()[0];
if (selection) {
sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor);
}
}
setPathButtonClicked(e) {
let backColor = { type: "path" };
backColor.left = parseFloat(document.getElementById('pathLeft').value);
backColor.right = parseFloat(document.getElementById('pathRight').value);
backColor.top = parseFloat(document.getElementById('pathTop').value);
backColor.bottom = parseFloat(document.getElementById('pathBottom').value);
backColor.stops = JSON.parse(document.getElementById('pathStops').value);
let sheet = this.spread.getActiveSheet();
let selection = sheet.getSelections()[0];
if (selection) {
sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor);
}
}
setPatternButtonClicked(e) {
let backColor = {};
backColor.type = GC.Spread.Sheets.PatternType[document.getElementById('patternType').value];
backColor.backgroundColor = document.getElementById('bgColor').value;
backColor.patternColor = document.getElementById('patternColor').value;
let sheet = this.spread.getActiveSheet();
let selection = sheet.getSelections()[0];
if (selection) {
sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor);
}
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.panelInfo;
}
render() {
return (
<div class="options-container">
<strong class="sp-demo-HeaderTitle">Settings:</strong>
<fieldset>
<div class="settingsDiv">
<div class="option-row">
<label for="gradientDegree">Degree:</label>
<input type="text" id="gradientDegree" value={this.state.gradientDegree} onChange={(e) => { this.setState({ gradientDegree: Number(e.target.value) }) }}></input>
</div>
<div class="option-row">
<label for="gradientStops">Stops:</label>
<textarea id="gradientStops"
rows="4" value={this.state.gradientStops} onChange={(e) => { this.setState({ gradientStops: e.target.value }) }}></textarea>
</div>
<div class="option-row">
<button onClick={(e) => { this.props.setGradientButtonClicked(e) }}>Set Gradient Fill</button>
</div>
</div>
</fieldset>
<fieldset>
<div class="settingsDiv">
<div class="option-row">
<label for="pathLeft">Left:</label>
<input type="text" id="pathLeft" value={this.state.pathLeft} onChange={(e) => { this.setState({ pathLeft: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathRight">Right:</label>
<input type="text" id="pathRight" value={this.state.pathRight} onChange={(e) => { this.setState({ pathRight: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathTop">Top:</label>
<input type="text" id="pathTop" value={this.state.pathTop} onChange={(e) => { this.setState({ pathTop: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathBottom">Bottom:</label>
<input type="text" id="pathBottom" value={this.state.pathBottom} onChange={(e) => { this.setState({ pathBottom: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="pathStops">Stops:</label>
<textarea id="pathStops"
rows="4" value={this.state.pathStops} onChange={(e) => { this.setState({ pathStops: e.target.value }) }}></textarea>
</div>
<div class="option-row">
<button onClick={(e) => { this.props.setPathButtonClicked(e) }}>Set Gradient Path Fill</button>
</div>
</div>
</fieldset>
<fieldset>
<div class="settingsDiv">
<div class="option-row">
<label for="patternType">Pattern Type:</label>
<select id="patternType" value={this.state.patternType} onChange={(e) => { this.setState({ patternType: e.target.select }) }}>
<option value="solid">solid</option>
<option value="darkGray">darkGray</option>
<option value="mediumGray">mediumGray</option>
<option value="lightGray">lightGray</option>
<option value="gray125">gray125</option>
<option value="gray0615">gray0615</option>
<option value="darkHorizontal">darkHorizontal</option>
<option value="darkVertical">darkVertical</option>
<option value="darkDown">darkDown</option>
<option value="darkUp">darkUp</option>
<option value="darkGrid">darkGrid</option>
<option value="darkTrellis">darkTrellis</option>
<option value="lightHorizontal">lightHorizontal</option>
<option value="lightVertical">lightVertical</option>
<option value="lightDown">lightDown</option>
<option value="lightUp">lightUp</option>
<option value="lightGrid">lightGrid</option>
<option value="lightTrellis">lightTrellis</option>
</select>
</div>
<div class="option-row">
<label for="bgColor">Background color:</label>
<input type="text" id="bgColor" value={this.state.bgColor} onChange={(e) => { this.setState({ bgColor: e.target.value }) }}></input>
</div>
<div class="option-row">
<label for="patternColor">Pattern color:</label>
<input type="text" id="patternColor" value={this.state.patternColor} onChange={(e) => { this.setState({ patternColor: e.target.value }) }}></input>
</div>
<div class="option-row">
<button onClick={(e) => { this.props.setPatternButtonClicked(e) }}>Set Pattern Fill</button>
</div>
</div>
</fieldset>
</div>
)
}
}

<!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"></div>
</body>
</html>

.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: 1px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-container legend {
text-align: center;
}
fieldset {
margin-bottom: 5px;
padding: 2px;
}
.option-row {
font-size: 14px;
padding: 2px;
}
input, textarea, select {
display:block;
width: 100%;
margin: 4px 0;
box-sizing: border-box;
}
label, input, textarea, select {
padding: 1px 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
button {
font-weight: bold;
background-color: #ecf3ff;
border-color: #0b93d5;
width: 100%;
height: 24px;
border-radius: 4px;
border-width: thin;
}

(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);

Feedback