Overview

SpreadJS allows searching for content within the workbook, such as a particular number or text string.

To search for a specific text string or number, use the search method to search the text in cells with the specified criteria, as shown in the following example: Use the SearchCondition to customize the search parameters. The search result is an object with the following properties: searchFoundFlag: An enumeration that specifies what is matched. foundSheetIndex: The index of the sheet in which a match is found. foundRowIndex: The index of the row at which a match is found. foundColumnIndex: The index of the column at which a match is found. foundString: The found string.
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 { useState } from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import './styles.css'; export function AppFunc() { const [spread, setSpread] = useState(null); const [txtSearchWhat, setTxtSearchWhat] = useState(''); const [searchWithin, setSearchWithin] = useState('sheet'); const [searchOrder, setSearchOrder] = useState('byRows'); const [searchLookin, setSearchLookin] = useState('value'); const [chkSearchMachCase, setChkSearchMachCase] = useState(false); const [chkSearchMachEntire, setChkSearchMachEntire] = useState(false); const [chkSearchUseWildCards, setChkSearchUseWildCards] = useState(false); const initSpread = (spread) => { setSpread(spread); spread.suspendPaint(); let sheet1 = spread.getSheet(0); sheet1.setColumnWidth(0, 100); sheet1.setColumnWidth(1, 100); sheet1.setValue(0, 0, 'Value'); sheet1.setValue(1, 0, 1); sheet1.setValue(2, 0, 2); sheet1.setValue(3, 0, 3); sheet1.addSpan(0, 1, 1, 2); sheet1.setValue(0, 1, 'Formula Result'); sheet1.setValue(1, 1, 'SUM(A2:A3)'); sheet1.setFormula(1, 2, '=SUM(A2:A3)'); let sheet2 = spread.getSheet(1); sheet2.setColumnWidth(0, 100); sheet2.setColumnWidth(1, 100); sheet2.setValue(0, 0, 'Value'); sheet2.setValue(1, 0, 1); sheet2.setValue(2, 0, 2); sheet2.setValue(3, 0, 3); sheet2.addSpan(0, 1, 1, 2); sheet2.setValue(0, 1, 'Formula Result'); sheet2.setValue(1, 1, 'SUM(A2:A3)'); sheet2.setFormula(1, 2, '=SUM(A2:A3)'); spread.resumePaint(); } const changeTxtSearchWhat = (e) => { setTxtSearchWhat(e.target.value); } const changeSearchWithin = (e) => { setSearchWithin(e.target.value); } const changeSearchOrder = (e) => { setSearchOrder(e.target.value); } const changeSearchLookin = (e) => { setSearchLookin(e.target.value); } const changeChkSearchMachCase = (e) => { setChkSearchMachCase(e.target.checked); } const changeChkSearchMachEntire = (e) => { setChkSearchMachEntire(e.target.checked); } const changeChkSearchUseWildCards = (e) => { setChkSearchUseWildCards(e.target.checked); } const findNext = (e) => { let sheet = spread.getActiveSheet(); let searchCondition = getSearchCondition(spread); let within = searchWithin; let searchResult = null; if (within == "sheet") { let sels = sheet.getSelections(); if (sels.length > 1) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.blockRange; } else if (sels.length == 1) { let spanInfo = getSpanInfo(sheet, sels[0].row, sels[0].col); if (sels[0].rowCount != spanInfo.rowSpan && sels[0].colCount != spanInfo.colSpan) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.blockRange; } } searchResult = getResultSearchinSheetEnd(spread, searchCondition); if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = getResultSearchinSheetBefore(spread, searchCondition); } } else if (within == "workbook") { searchResult = getResultSearchinSheetEnd(spread, searchCondition); if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = getResultSearchinWorkbookEnd(spread, searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = getResultSearchinWorkbookBefore(spread, searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = getResultSearchinSheetBefore(spread, searchCondition); } } if (searchResult != null && searchResult.searchFoundFlag != GC.Spread.Sheets.Search.SearchFoundFlags.none) { spread.setActiveSheetIndex(searchResult.foundSheetIndex); let sheet = spread.getActiveSheet(); sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex); if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) == 0) { sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex, 1, 1); } //scrolling if (searchResult.foundRowIndex < sheet.getViewportTopRow(1) || searchResult.foundRowIndex > sheet.getViewportBottomRow(1) || searchResult.foundColumnIndex < sheet.getViewportLeftColumn(1) || searchResult.foundColumnIndex > sheet.getViewportRightColumn(1) ) { sheet.showCell(searchResult.foundRowIndex, searchResult.foundColumnIndex, GC.Spread.Sheets.VerticalPosition.center, GC.Spread.Sheets.HorizontalPosition.center); } else { sheet.repaint(); } } else { //Not Found alert('Not Found'); } } const getSpanInfo = (sheet, row, col) => { let span = sheet.getSpans(new GC.Spread.Sheets.Range(row, col, 1, 1)); if (span.length > 0) { return { rowSpan: span[0].rowCount, colSpan: span[0].colCount }; } else { return { rowSpan: 1, colSpan: 1 }; } } const getResultSearchinSheetEnd = (spread, searchCondition) => { let sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if (searchCondition.searchOrder == GC.Spread.Sheets.Search.SearchOrder.zOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex(); searchCondition.findBeginColumn = sheet.getActiveColumnIndex() + 1; } else if (searchCondition.searchOrder == GC.Spread.Sheets.Search.SearchOrder.nOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex() + 1; searchCondition.findBeginColumn = sheet.getActiveColumnIndex(); } if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) > 0) { let sel = sheet.getSelections()[0]; searchCondition.rowStart = sel.row; searchCondition.columnStart = sel.col; searchCondition.rowEnd = sel.row + sel.rowCount - 1; searchCondition.columnEnd = sel.col + sel.colCount - 1; } let searchResult = spread.search(searchCondition); return searchResult; } const getResultSearchinSheetBefore = (spread, searchCondition) => { let sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) > 0) { let sel = sheet.getSelections()[0]; searchCondition.rowStart = sel.row; searchCondition.columnStart = sel.col; searchCondition.findBeginRow = sel.row; searchCondition.findBeginColumn = sel.col; searchCondition.rowEnd = sel.row + sel.rowCount - 1; searchCondition.columnEnd = sel.col + sel.colCount - 1; } else { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = sheet.getActiveRowIndex(); searchCondition.columnEnd = sheet.getActiveColumnIndex(); } let searchResult = spread.search(searchCondition); return searchResult; } const getResultSearchinWorkbookEnd = (spread, searchCondition) => { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = -1; searchCondition.columnEnd = -1; searchCondition.startSheetIndex = spread.getActiveSheetIndex() + 1; searchCondition.endSheetIndex = -1; let searchResult = spread.search(searchCondition); return searchResult; } const getResultSearchinWorkbookBefore = (spread, searchCondition) => { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = -1; searchCondition.columnEnd = -1; searchCondition.startSheetIndex = -1 searchCondition.endSheetIndex = spread.getActiveSheetIndex() - 1; let searchResult = spread.search(searchCondition); return searchResult; } const getSearchCondition = (spread) => { let searchCondition = new GC.Spread.Sheets.Search.SearchCondition(); let findWhat = txtSearchWhat; let within = searchWithin; let order = searchOrder; let lookin = searchLookin; let matchCase = chkSearchMachCase; let matchEntire = chkSearchMachEntire; let useWildCards = chkSearchUseWildCards; searchCondition.searchString = findWhat; if (within == "sheet") { searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); } if (order == "byRows") { searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.zOrder; } else { searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.nOrder; } if (lookin == "formula") { searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellFormula; } else { searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellText; } if (!matchCase) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.ignoreCase; } if (matchEntire) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.exactMatch; } if (useWildCards) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.useWildCards; } return searchCondition; } return <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)}> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> </SpreadSheets> </div> <div className="options-container"> <p>Use these options to specify what to search for in Spread.</p> <div> <label>Find what:</label> <input id="txtSearchWhat" onChange={e => changeTxtSearchWhat(e)} /> </div> <div> <label>Within:</label> <select id="searchWithin" onChange={e => changeSearchWithin(e)}> <option value="sheet" selected>Sheet</option> <option value="workbook">Workbook</option> </select> <input id="chkSearchMachCase" type="checkbox" onChange={e => changeChkSearchMachCase(e)} /> <label htmlFor="chkSearchMachCase">Match case</label> </div> <div> <label>Look in:</label> <select id="searchLookin" onChange={e => changeSearchLookin(e)}> <option value="value" selected>Values</option> <option value="formula">Formulas</option> </select> <input id="chkSearchMachEntire" type="checkbox" onChange={e => changeChkSearchMachEntire(e)} /> <label htmlFor="chkSearchMachEntire">Match exactly</label> </div> <div> <label>Search:</label> <select id="searchOrder" onChange={e => changeSearchOrder(e)}> <option value="byRows" selected>By Rows</option> <option value="byColumns">By Columns</option> </select> <div> <input id="chkSearchUseWildCards" type="checkbox" onChange={e => changeChkSearchUseWildCards(e)} /> <label htmlFor="chkSearchUseWildCards">Use wildcards</label> </div> </div> <div> <label /> <input id="btnFindNext" type="button" defaultValue="Find Next" onClick={e => findNext(e)} /> </div> </div> </div>; }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import './styles.css'; const Component = React.Component; export class App extends Component { constructor(props) { super(props); this.spread = null; this.txtSearchWhat = ""; this.searchWithin = "sheet"; this.searchOrder = "byRows"; this.searchLookin = "value"; this.chkSearchMachCase = false; this.chkSearchMachEntire = false; this.chkSearchUseWildCards = false; } render() { return <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> </SpreadSheets> </div> <div className="options-container"> <p>Use these options to specify what to search for in Spread.</p> <div> <label>Find what:</label> <input id="txtSearchWhat" onChange={e=>this.changeTxtSearchWhat(e)}/> </div> <div> <label>Within:</label> <select id="searchWithin" onChange={e=>this.changeSearchWithin(e)}> <option value="sheet" selected>Sheet</option> <option value="workbook">Workbook</option> </select> <input id="chkSearchMachCase" type="checkbox" onChange={e=>this.changeChkSearchMachCase(e)}/> <label htmlFor="chkSearchMachCase">Match case</label> </div> <div> <label>Look in:</label> <select id="searchLookin" onChange={e=>this.changeSearchLookin(e)}> <option value="value" selected>Values</option> <option value="formula">Formulas</option> </select> <input id="chkSearchMachEntire" type="checkbox" onChange={e=>this.changeChkSearchMachEntire(e)}/> <label htmlFor="chkSearchMachEntire">Match exactly</label> </div> <div> <label>Search:</label> <select id="searchOrder" onChange={e=>this.changeSearchOrder(e)}> <option value="byRows" selected>By Rows</option> <option value="byColumns">By Columns</option> </select> <div> <input id="chkSearchUseWildCards" type="checkbox" onChange={e=>this.changeChkSearchUseWildCards(e)}/> <label htmlFor="chkSearchUseWildCards">Use wildcards</label> </div> </div> <div> <label /> <input id="btnFindNext" type="button" defaultValue="Find Next" onClick={e=>this.findNext(e)}/> </div> </div> </div>; } initSpread(spread) { this.spread = spread; spread.suspendPaint(); let sheet1 = spread.getSheet(0); sheet1.setColumnWidth(0, 100); sheet1.setColumnWidth(1, 100); sheet1.setValue(0, 0, 'Value'); sheet1.setValue(1, 0, 1); sheet1.setValue(2, 0, 2); sheet1.setValue(3, 0, 3); sheet1.addSpan(0, 1, 1, 2); sheet1.setValue(0, 1, 'Formula Result'); sheet1.setValue(1, 1, 'SUM(A2:A3)'); sheet1.setFormula(1, 2, '=SUM(A2:A3)'); let sheet2 = spread.getSheet(1); sheet2.setColumnWidth(0, 100); sheet2.setColumnWidth(1, 100); sheet2.setValue(0, 0, 'Value'); sheet2.setValue(1, 0, 1); sheet2.setValue(2, 0, 2); sheet2.setValue(3, 0, 3); sheet2.addSpan(0, 1, 1, 2); sheet2.setValue(0, 1, 'Formula Result'); sheet2.setValue(1, 1, 'SUM(A2:A3)'); sheet2.setFormula(1, 2, '=SUM(A2:A3)'); spread.resumePaint(); } changeTxtSearchWhat(e) { this.txtSearchWhat = e.target.value; } changeSearchWithin(e) { this.searchWithin = e.target.value; } changeSearchOrder(e) { this.searchOrder = e.target.value; } changeSearchLookin(e) { this.searchLookin = e.target.value; } changeChkSearchMachCase(e) { this.chkSearchMachCase = e.target.checked; } changeChkSearchMachEntire(e) { this.chkSearchMachEntire = e.target.checked; } changeChkSearchUseWildCards(e) { this.chkSearchUseWildCards = e.target.checked; } findNext(e) { let spread = this.spread; let sheet = spread.getActiveSheet(); let searchCondition = this.getSearchCondition(spread); let within = this.searchWithin; let searchResult = null; if (within == "sheet") { let sels = sheet.getSelections(); if (sels.length > 1) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.blockRange; } else if (sels.length == 1) { let spanInfo = this.getSpanInfo(sheet, sels[0].row, sels[0].col); if (sels[0].rowCount != spanInfo.rowSpan && sels[0].colCount != spanInfo.colSpan) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.blockRange; } } searchResult = this.getResultSearchinSheetEnd(spread, searchCondition); if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinSheetBefore(spread, searchCondition); } } else if (within == "workbook") { searchResult = this.getResultSearchinSheetEnd(spread, searchCondition); if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinWorkbookEnd(spread, searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinWorkbookBefore(spread, searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinSheetBefore(spread, searchCondition); } } if (searchResult != null && searchResult.searchFoundFlag != GC.Spread.Sheets.Search.SearchFoundFlags.none) { spread.setActiveSheetIndex(searchResult.foundSheetIndex); let sheet = spread.getActiveSheet(); sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex); if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) == 0) { sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex, 1, 1); } //scrolling if (searchResult.foundRowIndex < sheet.getViewportTopRow(1) || searchResult.foundRowIndex > sheet.getViewportBottomRow(1) || searchResult.foundColumnIndex < sheet.getViewportLeftColumn(1) || searchResult.foundColumnIndex > sheet.getViewportRightColumn(1) ) { sheet.showCell(searchResult.foundRowIndex, searchResult.foundColumnIndex, GC.Spread.Sheets.VerticalPosition.center, GC.Spread.Sheets.HorizontalPosition.center); } else { sheet.repaint(); } } else { //Not Found alert('Not Found'); } } getSpanInfo(sheet, row, col) { let span = sheet.getSpans(new GC.Spread.Sheets.Range(row, col, 1, 1)); if (span.length > 0) { return { rowSpan: span[0].rowCount, colSpan: span[0].colCount }; } else { return { rowSpan: 1, colSpan: 1 }; } } getResultSearchinSheetEnd(spread, searchCondition) { let sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if (searchCondition.searchOrder == GC.Spread.Sheets.Search.SearchOrder.zOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex(); searchCondition.findBeginColumn = sheet.getActiveColumnIndex() + 1; } else if (searchCondition.searchOrder == GC.Spread.Sheets.Search.SearchOrder.nOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex() + 1; searchCondition.findBeginColumn = sheet.getActiveColumnIndex(); } if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) > 0) { let sel = sheet.getSelections()[0]; searchCondition.rowStart = sel.row; searchCondition.columnStart = sel.col; searchCondition.rowEnd = sel.row + sel.rowCount - 1; searchCondition.columnEnd = sel.col + sel.colCount - 1; } let searchResult = spread.search(searchCondition); return searchResult; } getResultSearchinSheetBefore(spread, searchCondition) { let sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) > 0) { let sel = sheet.getSelections()[0]; searchCondition.rowStart = sel.row; searchCondition.columnStart = sel.col; searchCondition.findBeginRow = sel.row; searchCondition.findBeginColumn = sel.col; searchCondition.rowEnd = sel.row + sel.rowCount - 1; searchCondition.columnEnd = sel.col + sel.colCount - 1; } else { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = sheet.getActiveRowIndex(); searchCondition.columnEnd = sheet.getActiveColumnIndex(); } let searchResult = spread.search(searchCondition); return searchResult; } getResultSearchinWorkbookEnd(spread, searchCondition) { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = -1; searchCondition.columnEnd = -1; searchCondition.startSheetIndex = spread.getActiveSheetIndex() + 1; searchCondition.endSheetIndex = -1; let searchResult = spread.search(searchCondition); return searchResult; } getResultSearchinWorkbookBefore(spread, searchCondition) { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = -1; searchCondition.columnEnd = -1; searchCondition.startSheetIndex = -1 searchCondition.endSheetIndex = spread.getActiveSheetIndex() - 1; let searchResult = spread.search(searchCondition); return searchResult; } getSearchCondition(spread) { let searchCondition = new GC.Spread.Sheets.Search.SearchCondition(); let findWhat = this.txtSearchWhat; let within = this.searchWithin; let order = this.searchOrder; let lookin = this.searchLookin; let matchCase = this.chkSearchMachCase; let matchEntire = this.chkSearchMachEntire; let useWildCards = this.chkSearchUseWildCards; searchCondition.searchString = findWhat; if (within == "sheet") { searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); } if (order == "byRows") { searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.zOrder; } else { searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.nOrder; } if (lookin == "formula") { searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellFormula; } else { searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellText; } if (!matchCase) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.ignoreCase; } if (matchEntire) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.exactMatch; } if (useWildCards) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.useWildCards; } return searchCondition; } }
<!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: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } label { display: inline-block; margin: 8px 0 6px; } input[type="checkbox"] { margin: 6px 0; width: auto; } input, select { padding: 4px 6px; width: 100%; box-sizing: border-box; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { 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);