Custom Fill

Besides the mouse drag actions, you can also customize the fill data. This allows you to fill data at run-time, which can be useful when you want to customize how data is filled after loading from a database.

There are five types of fill data: Auto: The auto fill type. Direction: The direction fill type. Linear: The linear fill type. Growth: The growth fill type. Date: The date fill type. SpreadJS provides methods to perform the fill.
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 } from '@mescius/spread-sheets-react'; const getRange = (sheet, rangeString) => { try { var rangeObject = GC.Spread.Sheets.CalcEngine.formulaToExpression(sheet, rangeString).getRange(0, 0); var range = new GC.Spread.Sheets.Range(rangeObject.row, rangeObject.col, rangeObject.rowCount, rangeObject.colCount); return range; } catch (e) { throw new Error("Select Ranges are not right"); } } let spread = null; let startRangeFormulaTextBox; let wholeRangeFormulaTextBox; export function AppFunc() { const [customFillOption, setCustomFillOption] = React.useState({ fillDirectionSet: false, fillDateUnitSet: false, fillStepAndStop: false, btnFillAutobyDirection: false, btnFillLinear: false, btnFillGrowth: false, btnFillDate: false, fillSeriesSet: true, fillMethods: 0, fillSeries: 0, fillDirection: 0, fillDateUnit: 0, step: "", stop: "", btnFillAuto: true }); const stepChange = (event) => { setCustomFillOption({...customFillOption, step:event.target.value}); } const stopChange = (event) => { setCustomFillOption({...customFillOption, stop:event.target.value}); } const fillDirectionChangedHandle = (value) => { setCustomFillOption({...customFillOption, fillDirection: value}); } const fillSeriesChangedHandle = (value) => { setCustomFillOption({...customFillOption, fillSeries: value}); } const fillDateUnitChangedHandle = (value) => { setCustomFillOption({...customFillOption, fillDateUnit: value}); } const fillMethodChangedHandle = (value) => { switch (value) { case 0: setCustomFillOption({ fillMethods: value, fillSeriesSet: true, btnFillAuto: true, fillDateUnitSet: false, fillDirectionSet: false, btnFillAutobyDirection: false, btnFillLinear: false, btnFillGrowth: false, btnFillDate: false, fillStepAndStop: false, }); break; case 1: setCustomFillOption({ ...customFillOption, fillMethods: value, fillDirectionSet: true, btnFillAutobyDirection: true, fillDateUnitSet: false, fillSeriesSet: false, btnFillAuto: false, btnFillLinear: false, btnFillGrowth: false, btnFillDate: false, fillStepAndStop: false, }); break; case 2: setCustomFillOption({ ...customFillOption, fillMethods: value, fillSeriesSet: true, btnFillLinear: true, fillStepAndStop: true, fillDateUnitSet: false, fillDirectionSet: false, btnFillAuto: false, btnFillAutobyDirection: false, btnFillGrowth: false, btnFillDate: false, }) break; case 3: setCustomFillOption({ ...customFillOption, fillMethods: value, fillSeriesSet: true, btnFillGrowth: true, fillStepAndStop: true, fillDateUnitSet: false, fillDirectionSet: false, btnFillAuto: false, btnFillAutobyDirection: false, btnFillLinear: false, btnFillDate: false, }); break; case 4: setCustomFillOption({ ...customFillOption, fillMethods: value, fillSeriesSet: true, btnFillDate: true, fillStepAndStop: true, fillDateUnitSet: true, fillDirectionSet: false, btnFillAuto: false, btnFillAutobyDirection: false, btnFillGrowth: false, btnFillLinear: false, }); break; } } const initSpread = (currSpread) => { spread = currSpread; startRangeFormulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('startRange'), { rangeSelectMode: true }); wholeRangeFormulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('wholeRange'), { rangeSelectMode: true }); startRangeFormulaTextBox.workbook(spread); wholeRangeFormulaTextBox.workbook(spread); spread.options.newTabVisible = false; let sheet = spread.getSheet(0); sheet.setValue(0, 0, 1); } const btnFillAutoHandler = () => { var sheet = spread.getActiveSheet(); var startRange = getRange(sheet, startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, wholeRangeFormulaTextBox.text()); if (customFillOption.fillSeries === 1) { wholeRange.rowCount = startRange.rowCount; } else { wholeRange.colCount = startRange.colCount; } sheet.fillAuto(startRange, wholeRange, { series: customFillOption.fillSeries, fillType: GC.Spread.Sheets.Fill.FillType.auto }); } const btnFillAutobyDirectionHandler = () => { var sheet = spread.getActiveSheet(); var startRange = getRange(sheet, startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, wholeRangeFormulaTextBox.text()); sheet.fillAuto(startRange, wholeRange, { direction: customFillOption.fillDirection, fillType: GC.Spread.Sheets.Fill.FillType.direction }); } const btnFillLinearHandler = () => { var sheet = spread.getActiveSheet(); var startRange = getRange(sheet, startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, wholeRangeFormulaTextBox.text()); var stop; if(customFillOption.stop!==""){ stop=customFillOption.stop; stop=parseInt(stop); } var step=parseInt(customFillOption.step); sheet.fillAuto(startRange, wholeRange, { series: customFillOption.fillSeries, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.linear }); } const btnFillGrowthHandler = () => { var sheet = spread.getActiveSheet(); var startRange = getRange(sheet, startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, wholeRangeFormulaTextBox.text()); var stop; if(customFillOption.stop!==""){ stop=customFillOption.stop; stop=parseInt(stop); } var step=parseInt(customFillOption.step); sheet.fillAuto(startRange, wholeRange, { series: fillSeries, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.growth }); } const btnFillDateHandler = () => { var sheet = spread.getActiveSheet(); var startRange = getRange(sheet, startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, wholeRangeFormulaTextBox.text()); var stop; if(customFillOption.stop!==""){ stop=customFillOption.stop; stop=parseInt(stop); } var step=parseInt(customFillOption.step); sheet.fillAuto(startRange, wholeRange, { series: customFillOption.fillSeries, unit: customFillOption.fillDateUnit, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.date }); } return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={initSpread}> </SpreadSheets> </div> <Panel panelInfo={customFillOption} btnFillAutoHandler={btnFillAutoHandler} btnFillAutobyDirectionHandler={btnFillAutobyDirectionHandler} btnFillLinearHandler={btnFillLinearHandler} btnFillGrowthHandler={btnFillGrowthHandler} btnFillDateHandler={btnFillDateHandler} fillMethodChangedHandle={fillMethodChangedHandle} fillDirectionChangedHandle = {fillDirectionChangedHandle} fillSeriesChangedHandle = {fillSeriesChangedHandle} fillDateUnitChangedHandle = {fillDateUnitChangedHandle} stepChange={stepChange} stopChange={stopChange} ></Panel> </div> ); } const Panel = (props) => { const { stepChange, stopChange, btnFillAutoHandler, btnFillAutobyDirectionHandler, btnFillLinearHandler, btnFillGrowthHandler, btnFillDateHandler, fillMethodChangedHandle, fillDirectionChangedHandle, fillSeriesChangedHandle, fillDateUnitChangedHandle, } = props; const [panelInfo, setPanelInfo] = React.useState(props.panelInfo); React.useEffect(() => { if (panelInfo !== props.panelInfo) { setPanelInfo(props.panelInfo); } }, [props.panelInfo]); return ( <div class="options-container"> <p> Use the "Start Range" field to select a range to start the fill, "Whole Range" to select the entire range to fill, and the "Fill Methods" and "Fill Series" fields to change how the fill happens. </p> <p> Try selecting Sheet1!A1 as the start range and Sheet1!A1:C2 as the whole range, keep fillAuto as the fill method and column as fill series. Then click the "fillAuto" button and see the sheet fill those cells. </p> <div class="option-row"> <label>Start Range</label> <div id="startRange" spellcheck="false" style={{ display: "inline-block", border: '1px solid #808080', width: '134px', 'vertical-align': 'middle' }}> </div> </div> <div class="option-row"> <label>Whole Range</label> <div id="wholeRange" spellcheck="false" style={{ display: 'inline-block', border: '1px solid #808080', width: '134px', 'vertical-align': 'middle' }}> </div> </div> <div class="option-row"> <label>Fill Methods</label> <select id="fillMethods" onChange={(event) => { fillMethodChangedHandle(parseInt(event.target.value, 10)) }} value={panelInfo.fillMethods}> <option value={0} selected>fillAuto</option> <option value={1}>fillAutobyDirection</option> <option value={2}>fillLinear</option> <option value={3}>fillGrowth</option> <option value={4}>fillDate</option> </select> </div> <div class="option-row"> {panelInfo.fillSeriesSet && <div id="fillSeriesSet"> <label>FillSeries</label> <select id="fillSeries" value={panelInfo.fillSeries} onChange = {(event) => {fillSeriesChangedHandle(parseInt(event.target.value, 10))}}> <option value='0'>Column</option> <option value='1'>Row</option> </select> </div>} {panelInfo.fillDirectionSet && <div id="fillDirectionSet" > <label>FillDirection</label> <select id="fillDirection" value={panelInfo.fillDirection} onChange = {(event)=> {fillDirectionChangedHandle(parseInt(event.target.value, 10))}}> <option value={0}>Left</option> <option value={1}>Right</option> <option value={2}>Up</option> <option value={3}>Down</option> </select> </div >} </div > {panelInfo.fillDateUnitSet && <div class="option-row" id="fillDateUnitSet" > <label>FillDateUnit</label> <select id="fillDateUnit" value={panelInfo.fillDateUnit} onChange = {(event) => fillDateUnitChangedHandle(parseInt(event.target.value, 10))}> <option value={0}>Day</option> <option value={1}>Weekday</option> <option value={2}>Month</option> <option value={3}>Year</option> </select> </div >} {panelInfo.fillStepAndStop && <div class="option-row" id="fillStepAndStop" > <label>Step</label> <input type="text" id="step" value={panelInfo.step} onChange={stepChange} /> <label>Stop</label> <input type="text" id="stop" value={panelInfo.stop} onChange={stopChange} /> </div>} <div class="option-row"> <label></label> {panelInfo.btnFillAuto &&<input type="button" id="btnFillAuto" value="fillAuto" onClick={() => {btnFillAutoHandler()}} />} {panelInfo.btnFillAutobyDirection && <input type="button" id="btnFillAutobyDirection" value="fillAutobyDirection" onClick={(event) => { btnFillAutobyDirectionHandler(event.target.value) }} />} {panelInfo.btnFillLinear && <input type="button" id="btnFillLinear" value="fillLinear" onClick={(event) => { btnFillLinearHandler(event.target.value) }} />} {panelInfo.btnFillGrowth && <input type="button" id="btnFillGrowth" value="fillGrowth" onClick={(event) => { btnFillGrowthHandler(event.target.value) }} />} {panelInfo.btnFillDate && <input type="button" id="btnFillDate" value="fillDate" onClick={(event) => { btnFillDateHandler(event.target.value) }} />} </div> </div > ) }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; const Component = React.Component; const getRange = (sheet, rangeString) => { try { var rangeObject = GC.Spread.Sheets.CalcEngine.formulaToExpression(sheet, rangeString).getRange(0, 0); var range = new GC.Spread.Sheets.Range(rangeObject.row, rangeObject.col, rangeObject.rowCount, rangeObject.colCount); return range; } catch (e) { throw new Error("Select Ranges are not right"); } } export class App extends Component { constructor(props) { super(props); this.spread = null; this.state = { fillDirectionSet: false, fillDateUnitSet: false, fillStepAndStop: false, btnFillAutobyDirection: false, btnFillLinear: false, btnFillGrowth: false, btnFillDate: false, fillSeriesSet: true, fillMethods: 0, fillSeries: 0, fillDirection: 0, fillDateUnit: 0, step: "", stop: "", btnFillAuto: true }; this.stopChange=this.stopChange.bind(this); this.stepChange=this.stepChange.bind(this); } render() { return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> </SpreadSheets> </div> <Panel fillDirectionSet={this.state.fillDirectionSet} fillDateUnitSet={this.state.fillDateUnitSet} fillStepAndStop={this.state.fillStepAndStop} btnFillAutobyDirection={this.state.btnFillAutobyDirection} btnFillLinear={this.state.btnFillLinear} btnFillGrowth={this.state.btnFillGrowth} btnFillDate={this.state.btnFillDate} fillSeriesSet={this.state.fillSeriesSet} fillMethods={this.state.fillMethods} fillSeries={this.state.fillSeries} fillDirection={this.state.fillDirection} fillDateUnit={this.state.fillDateUnit} step={this.state.step} stop={this.state.stop} btnFillAuto={this.state.btnFillAuto} btnFillAutoHandler={() => { this.btnFillAutoHandler() }} btnFillAutobyDirectionHandler={() => { this.btnFillAutobyDirectionHandler() }} btnFillLinearHandler={() => { this.btnFillLinearHandler() }} btnFillGrowthHandler={() => { this.btnFillGrowthHandler() }} btnFillDateHandler={() => { this.btnFillDateHandler() }} fillMethodChangedHandle={(value) => { this.fillMethodChangedHandle(value) }} fillDirectionChangedHandle = {(value) => {this.fillDirectionChangedHandle(value)}} fillSeriesChangedHandle = {(value) =>{this.fillSeriesChangedHandle(value)}} fillDateUnitChangedHandle = {(value) => {this.fillDateUnitChangedHandle(value)}} stepChange={(event)=>{this.stepChange(event)}} stopChange={(event)=>{this.stopChange(event)}} ></Panel> </div> ) } stepChange(event){ this.setState({step:event.target.value}); } stopChange(event){ this.setState({stop:event.target.value}); } fillDirectionChangedHandle(value){ this.setState({fillDirection: value}); } fillSeriesChangedHandle(value){ this.setState({fillSeries: value}); } fillDateUnitChangedHandle(value){ this.setState({fillDateUnit: value}); } fillMethodChangedHandle(value) { this.setState({ fillMethods: value }); switch (value) { case 0: this.setState({ fillSeriesSet: true, btnFillAuto: true, fillDateUnitSet: false, fillDirectionSet: false, btnFillAutobyDirection: false, btnFillLinear: false, btnFillGrowth: false, btnFillDate: false, fillStepAndStop: false, }); break; case 1: this.setState({ fillDirectionSet: true, btnFillAutobyDirection: true, fillDateUnitSet: false, fillSeriesSet: false, btnFillAuto: false, btnFillLinear: false, btnFillGrowth: false, btnFillDate: false, fillStepAndStop: false, }); break; case 2: this.setState({ fillSeriesSet: true, btnFillLinear: true, fillStepAndStop: true, fillDateUnitSet: false, fillDirectionSet: false, btnFillAuto: false, btnFillAutobyDirection: false, btnFillGrowth: false, btnFillDate: false, }) break; case 3: this.setState({ fillSeriesSet: true, btnFillGrowth: true, fillStepAndStop: true, fillDateUnitSet: false, fillDirectionSet: false, btnFillAuto: false, btnFillAutobyDirection: false, btnFillLinear: false, btnFillDate: false, }); break; case 4: this.setState({ fillSeriesSet: true, btnFillDate: true, fillStepAndStop: true, fillDateUnitSet: true, fillDirectionSet: false, btnFillAuto: false, btnFillAutobyDirection: false, btnFillGrowth: false, btnFillLinear: false, }); break; } } initSpread(spread) { this.spread = spread; let startRangeFormulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('startRange'), { rangeSelectMode: true }); let wholeRangeFormulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('wholeRange'), { rangeSelectMode: true }); startRangeFormulaTextBox.workbook(spread); wholeRangeFormulaTextBox.workbook(spread); this.startRangeFormulaTextBox = startRangeFormulaTextBox; this.wholeRangeFormulaTextBox = wholeRangeFormulaTextBox; spread.options.newTabVisible = false; let sheet = spread.getSheet(0); sheet.setValue(0, 0, 1); } btnFillAutoHandler() { var sheet = this.spread.getActiveSheet(); var startRange = getRange(sheet, this.startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, this.wholeRangeFormulaTextBox.text()); if (this.state.fillSeries === 1) { wholeRange.rowCount = startRange.rowCount; } else { wholeRange.colCount = startRange.colCount; } sheet.fillAuto(startRange, wholeRange, { series: this.state.fillSeries, fillType: GC.Spread.Sheets.Fill.FillType.auto }); } btnFillAutobyDirectionHandler() { var sheet = this.spread.getActiveSheet(); var startRange = getRange(sheet, this.startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, this.wholeRangeFormulaTextBox.text()); sheet.fillAuto(startRange, wholeRange, { direction: this.state.fillDirection, fillType: GC.Spread.Sheets.Fill.FillType.direction }); } btnFillLinearHandler() { var sheet = this.spread.getActiveSheet(); var startRange = getRange(sheet, this.startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, this.wholeRangeFormulaTextBox.text()); var stop; if(this.state.stop!==""){ stop=this.state.stop; stop=parseInt(stop); } var step=parseInt(this.state.step); sheet.fillAuto(startRange, wholeRange, { series: this.state.fillSeries, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.linear }); } btnFillGrowthHandler() { var sheet = this.spread.getActiveSheet(); var startRange = getRange(sheet, this.startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, this.wholeRangeFormulaTextBox.text()); var stop; if(this.state.stop!==""){ stop=this.state.stop; stop=parseInt(stop); } var step=parseInt(this.state.step); sheet.fillAuto(startRange, wholeRange, { series: this.fillSeries, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.growth }); } btnFillDateHandler() { var sheet = this.spread.getActiveSheet(); var startRange = getRange(sheet, this.startRangeFormulaTextBox.text()); var wholeRange = getRange(sheet, this.wholeRangeFormulaTextBox.text()); var stop; if(this.state.stop!==""){ stop=this.state.stop; stop=parseInt(stop); } var step=parseInt(this.state.step); sheet.fillAuto(startRange, wholeRange, { series: this.state.fillSeries, unit: this.state.fillDateUnit, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.date }); } } const Panel = (props) => { const { fillDirectionSet, fillDateUnitSet, fillStepAndStop, btnFillAuto, btnFillAutobyDirection, btnFillLinear, btnFillGrowth, btnFillDate, fillSeriesSet, fillMethods, fillSeries, fillDirection, fillDateUnit, step, stop, btnFillAutoHandler, btnFillAutobyDirectionHandler, btnFillLinearHandler, btnFillGrowthHandler, btnFillDateHandler, fillMethodChangedHandle, fillDirectionChangedHandle, fillSeriesChangedHandle, fillDateUnitChangedHandle, } = props; return ( <div class="options-container"> <p> Use the "Start Range" field to select a range to start the fill, "Whole Range" to select the entire range to fill, and the "Fill Methods" and "Fill Series" fields to change how the fill happens. </p> <p> Try selecting Sheet1!A1 as the start range and Sheet1!A1:C2 as the whole range, keep fillAuto as the fill method and column as fill series. Then click the "fillAuto" button and see the sheet fill those cells. </p> <div class="option-row"> <label>Start Range</label> <div id="startRange" spellcheck="false" style={{ display: "inline-block", border: '1px solid #808080', width: '134px', 'vertical-align': 'middle' }}> </div> </div> <div class="option-row"> <label>Whole Range</label> <div id="wholeRange" spellcheck="false" style={{ display: 'inline-block', border: '1px solid #808080', width: '134px', 'vertical-align': 'middle' }}> </div> </div> <div class="option-row"> <label>Fill Methods</label> <select id="fillMethods" onChange={(event) => { fillMethodChangedHandle(parseInt(event.target.value, 10)) }} value={fillMethods}> <option value={0} selected>fillAuto</option> <option value={1}>fillAutobyDirection</option> <option value={2}>fillLinear</option> <option value={3}>fillGrowth</option> <option value={4}>fillDate</option> </select> </div> <div class="option-row"> {fillSeriesSet && <div id="fillSeriesSet"> <label>FillSeries</label> <select id="fillSeries" value={fillSeries} onChange = {(event) => {fillSeriesChangedHandle(parseInt(event.target.value, 10))}}> <option value='0'>Column</option> <option value='1'>Row</option> </select> </div>} {fillDirectionSet && <div id="fillDirectionSet" > <label>FillDirection</label> <select id="fillDirection" value={fillDirection} onChange = {(event)=> {fillDirectionChangedHandle(parseInt(event.target.value, 10))}}> <option value={0}>Left</option> <option value={1}>Right</option> <option value={2}>Up</option> <option value={3}>Down</option> </select> </div >} </div > {fillDateUnitSet && <div class="option-row" id="fillDateUnitSet" > <label>FillDateUnit</label> <select id="fillDateUnit" value={fillDateUnit} onChange = {(event) => fillDateUnitChangedHandle(parseInt(event.target.value, 10))}> <option value={0}>Day</option> <option value={1}>Weekday</option> <option value={2}>Month</option> <option value={3}>Year</option> </select> </div >} {fillStepAndStop && <div class="option-row" id="fillStepAndStop" > <label>Step</label> <input type="text" id="step" value={step} onChange={props.stepChange}/> <label>Stop</label> <input type="text" id="stop" value={stop} onChange={props.stopChange} /> </div>} <div class="option-row"> <label></label> {btnFillAuto &&<input type="button" id="btnFillAuto" value="fillAuto" onClick={() => {btnFillAutoHandler()}} />} {btnFillAutobyDirection && <input type="button" id="btnFillAutobyDirection" value="fillAutobyDirection" onClick={(event) => { btnFillAutobyDirectionHandler(event.target.value) }} />} {btnFillLinear && <input type="button" id="btnFillLinear" value="fillLinear" onClick={(event) => { btnFillLinearHandler(event.target.value) }} />} {btnFillGrowth && <input type="button" id="btnFillGrowth" value="fillGrowth" onClick={(event) => { btnFillGrowthHandler(event.target.value) }} />} {btnFillDate && <input type="button" id="btnFillDate" value="fillDate" onClick={(event) => { btnFillDateHandler(event.target.value) }} />} </div> </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="$DEMOROOT$/spread/source/data/ellipsis.js" type="text/javascript"></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: 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; } input, select { padding: 4px 8px; } input { width: 100%; margin-top: 6px; box-sizing: border-box; } label { display:inline-block; min-width: 85px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 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-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);