Syntax
The SCAN function syntax has the following arguments and parameters:
initial_value
Sets the starting value for the accumulator.
array
An array to be scanned.
lambda
A LAMBDA that is called to scan the array. The LAMBDA takes two parameters:
accumulator
The value totaled up and returned as the final result.
value
The calculation applied to each element in the array.
Tip
Before using this function, you need to turn on the allowDynamicArray option
Basic Usage
Create a list of factorials
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 { SpreadSheets, Worksheet } from "@mescius/spread-sheets-react";
import GC from "@mescius/spread-sheets";
import "./styles.css";
const data = {
values: {
1: { 1: "Examples:" },
3: { 1: "Example 1: Create a list of factorials" },
4: { 1: "Data:", 5: "Formula:" },
5: { 1: 1, 2: 2, 3: 3, 5: "Result:" },
6: { 1: 4, 2: 5, 3: 6 },
8: { 1: "Example 2: Concatenate characters in an array" },
9: { 1: "Data:", 5: "Formula:" },
10: { 1: "a", 2: "b", 3: "c", 5: "Result:" },
11: { 1: "d", 2: "e", 3: "f" },
},
formulas: {
4: { 6: "FORMULATEXT(G6)" },
5: { 6: "SCAN(1,B6:D7,LAMBDA(a,b,a*b))" },
9: { 6: "FORMULATEXT(G11)" },
10: { 6: 'SCAN("",B11:D12,LAMBDA(a,b,a&b))' },
},
cellStyles: {
"B2:C2": 0,
"B4:E4": 1,
B5: 2,
C5: 3,
D5: 4,
F5: 5,
"G5:I7": 6,
"B6:D7": 7,
F6: 8,
"B9:E9": 1,
B10: 2,
C10: 3,
D10: 4,
F10: 5,
"G10:I12": 6,
"B11:D12": 7,
F11: 8,
},
styles: {
records: [
{ foreColor: 0, font: 0, border: [null, null, 0] },
{ foreColor: 0, font: 1, border: [null, null, 1] },
{ backColor: 2, foreColor: 1, font: 1, border: [null, null, 2, 3] },
{ backColor: 2, foreColor: 1, font: 1, border: [4, null, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [4, 3, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [3, 2, 3, 3] },
{ backColor: 4, foreColor: 3, font: 1, border: [2, 2, 2, 2] },
{ backColor: 6, foreColor: 5, border: [2, 2, 2, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [3, 3, 3, 3] },
],
borders: [
{ color: "#accdea", style: 5 },
{ color: "#9bc3e6", style: 2 },
{ color: "#7f7f7f", style: 1 },
{ color: "#9bc3e6", style: 1 },
{ color: "#000000", style: 1 },
],
colors: ["#44546a", "#ffffff", "#5b9bd5", "#fa7d00", "#f2f2f2", "#3f3f76", "#ffcc99"],
fonts: ["700 17.3px Calibri", "700 14.7px Calibri"],
},
others: {
columnWidth: { 0: 30, 6: 80, 7: 80, 8: 80 },
rowHeight: { 1: 24, 2: 21, 3: 21, 8: 21 },
spans: ["B5:D5", "B10:D10"],
},
};
export function AppFunc() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={(spread) => initWorkbook(spread, data)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
</div>
);
}
function initWorkbook(workbook, data) {
workbook.options.allowDynamicArray = true;
workbook.suspendPaint();
initSheet1(workbook.getSheet(0), data);
workbook.resumePaint();
}
function initSheet1(sheet, data) {
setSheetPr(sheet, data);
setCells(sheet, data);
}
function setCells(sheet, data) {
foreachObj(data.values, function (r, row) {
foreachObj(row, function (c, v) {
setValue(sheet, Number(r), Number(c), v);
});
});
foreachObj(data.formulas, function (r, row) {
foreachObj(row, function (c, v) {
setFormula(sheet, Number(r), Number(c), v);
});
});
foreachObj(data.cellStyles, function (ref, id) {
setStyle(sheet, ref, data.styles.records[id], data.styles);
});
}
function setValue(sheet, r, c, v) {
if (v === undefined || v === null) return;
sheet.setValue(r, c, v);
}
function setFormula(sheet, r, c, v) {
if (v === undefined || v === null) return;
sheet.setFormula(r, c, v);
}
function setStyle(sheet, ref, v, styles) {
if (v === undefined || v === null) return;
var range = sheet.getRange(ref);
var foreColor = styles.colors[v.foreColor];
var backColor = styles.colors[v.backColor];
var font = styles.fonts[v.font];
var wordWrap = v.wordWrap;
if (foreColor) {
range.foreColor(foreColor);
}
if (backColor) {
range.backColor(backColor);
}
if (font) {
range.font(font);
}
if (wordWrap) {
range.wordWrap(wordWrap);
}
var border = v.border || [];
var borderTop = styles.borders[border[0]];
var borderRight = styles.borders[border[1]];
var borderBottom = styles.borders[border[2]];
var borderLeft = styles.borders[border[3]];
if (borderTop) {
range.borderTop(createLineStyle(borderTop));
}
if (borderBottom) {
range.borderBottom(createLineStyle(borderBottom));
}
if (borderLeft) {
range.borderLeft(createLineStyle(borderLeft));
}
if (borderRight) {
range.borderRight(createLineStyle(borderRight));
}
}
function setSheetPr(sheet, data) {
// set column width
foreachObj(data.others.columnWidth, function (index, v) {
sheet.setColumnWidth(Number(index), v);
});
// set row height
foreachObj(data.others.rowHeight, function (index, v) {
sheet.setRowHeight(Number(index), v);
});
// set spans
var spans = data.others.spans || [];
for (var i = 0; i < spans.length; i++) {
var range = sheet.getRange(spans[i]);
sheet.addSpan(range.row, range.col, range.rowCount, range.colCount);
}
}
function createLineStyle(v) {
return new GC.Spread.Sheets.LineBorder(v.color, v.style);
}
function foreachObj(obj, func) {
if (!obj) return;
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var v = obj[key];
func(key, v);
}
}
import * as React from "react";
import { SpreadSheets, Worksheet } from "@mescius/spread-sheets-react";
import GC from "@mescius/spread-sheets";
import "./styles.css";
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.data = {
values: {
1: { 1: "Examples:" },
3: { 1: "Example 1: Create a list of factorials" },
4: { 1: "Data:", 5: "Formula:" },
5: { 1: 1, 2: 2, 3: 3, 5: "Result:" },
6: { 1: 4, 2: 5, 3: 6 },
8: { 1: "Example 2: Concatenate characters in an array" },
9: { 1: "Data:", 5: "Formula:" },
10: { 1: "a", 2: "b", 3: "c", 5: "Result:" },
11: { 1: "d", 2: "e", 3: "f" },
},
formulas: {
4: { 6: "FORMULATEXT(G6)" },
5: { 6: "SCAN(1,B6:D7,LAMBDA(a,b,a*b))" },
9: { 6: "FORMULATEXT(G11)" },
10: { 6: 'SCAN("",B11:D12,LAMBDA(a,b,a&b))' },
},
cellStyles: {
"B2:C2": 0,
"B4:E4": 1,
B5: 2,
C5: 3,
D5: 4,
F5: 5,
"G5:I7": 6,
"B6:D7": 7,
F6: 8,
"B9:E9": 1,
B10: 2,
C10: 3,
D10: 4,
F10: 5,
"G10:I12": 6,
"B11:D12": 7,
F11: 8,
},
styles: {
records: [
{ foreColor: 0, font: 0, border: [null, null, 0] },
{ foreColor: 0, font: 1, border: [null, null, 1] },
{ backColor: 2, foreColor: 1, font: 1, border: [null, null, 2, 3] },
{ backColor: 2, foreColor: 1, font: 1, border: [4, null, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [4, 3, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [3, 2, 3, 3] },
{ backColor: 4, foreColor: 3, font: 1, border: [2, 2, 2, 2] },
{ backColor: 6, foreColor: 5, border: [2, 2, 2, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [3, 3, 3, 3] },
],
borders: [
{ color: "#accdea", style: 5 },
{ color: "#9bc3e6", style: 2 },
{ color: "#7f7f7f", style: 1 },
{ color: "#9bc3e6", style: 1 },
{ color: "#000000", style: 1 },
],
colors: ["#44546a", "#ffffff", "#5b9bd5", "#fa7d00", "#f2f2f2", "#3f3f76", "#ffcc99"],
fonts: ["700 17.3px Calibri", "700 14.7px Calibri"],
},
others: {
columnWidth: { 0: 30, 6: 80, 7: 80, 8: 80 },
rowHeight: { 1: 24, 2: 21, 3: 21, 8: 21 },
spans: ["B5:D5", "B10:D10"],
},
};
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={(spread) => initWorkbook(spread, this.data)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
</div>
);
}
}
function initWorkbook(workbook, data) {
workbook.options.allowDynamicArray = true;
workbook.suspendPaint();
initSheet1(workbook.getSheet(0), data);
workbook.resumePaint();
}
function initSheet1(sheet, data) {
setSheetPr(sheet, data);
setCells(sheet, data);
}
function setCells(sheet, data) {
foreachObj(data.values, function (r, row) {
foreachObj(row, function (c, v) {
setValue(sheet, Number(r), Number(c), v);
});
});
foreachObj(data.formulas, function (r, row) {
foreachObj(row, function (c, v) {
setFormula(sheet, Number(r), Number(c), v);
});
});
foreachObj(data.cellStyles, function (ref, id) {
setStyle(sheet, ref, data.styles.records[id], data.styles);
});
}
function setValue(sheet, r, c, v) {
if (v === undefined || v === null) return;
sheet.setValue(r, c, v);
}
function setFormula(sheet, r, c, v) {
if (v === undefined || v === null) return;
sheet.setFormula(r, c, v);
}
function setStyle(sheet, ref, v, styles) {
if (v === undefined || v === null) return;
var range = sheet.getRange(ref);
var foreColor = styles.colors[v.foreColor];
var backColor = styles.colors[v.backColor];
var font = styles.fonts[v.font];
var wordWrap = v.wordWrap;
if (foreColor) {
range.foreColor(foreColor);
}
if (backColor) {
range.backColor(backColor);
}
if (font) {
range.font(font);
}
if (wordWrap) {
range.wordWrap(wordWrap);
}
var border = v.border || [];
var borderTop = styles.borders[border[0]];
var borderRight = styles.borders[border[1]];
var borderBottom = styles.borders[border[2]];
var borderLeft = styles.borders[border[3]];
if (borderTop) {
range.borderTop(createLineStyle(borderTop));
}
if (borderBottom) {
range.borderBottom(createLineStyle(borderBottom));
}
if (borderLeft) {
range.borderLeft(createLineStyle(borderLeft));
}
if (borderRight) {
range.borderRight(createLineStyle(borderRight));
}
}
function setSheetPr(sheet, data) {
// set column width
foreachObj(data.others.columnWidth, function (index, v) {
sheet.setColumnWidth(Number(index), v);
});
// set row height
foreachObj(data.others.rowHeight, function (index, v) {
sheet.setRowHeight(Number(index), v);
});
// set spans
var spans = data.others.spans || [];
for (var i = 0; i < spans.length; i++) {
var range = sheet.getRange(spans[i]);
sheet.addSpan(range.row, range.col, range.rowCount, range.colCount);
}
}
function createLineStyle(v) {
return new GC.Spread.Sheets.LineBorder(v.color, v.style);
}
function foreachObj(obj, func) {
if (!obj) return;
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var v = obj[key];
func(key, v);
}
}
<!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">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- 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: 100%;
height: 100%;
overflow: hidden;
float: left;
}
input {
padding: 4px 6px;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
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);
