Overview

The dynamic array is used to replace array formula. Any formula that has the potential to return multiple results can be referred to as a dynamic array formula. Formulas that are currently returning multiple results, and are successfully spilling, can be referred to as spilled array formulas.

In the following example, the value from C3 spills over to the adjacent cells. The value in C9 however will display the #SPILL! error as there is an existing value in the range preventing the spill.

Users can enable dynamic array functions in one of two ways: Spill means that a formula has returned multiple values and those values ‘spill’ into the neighboring cells. Dynamic Array has seven Functions: FILTER function: Filters a range of data based on criteria you defined. RANDARRAY function: Returns an array of random numbers. SEQUENCE function: Generates a list of sequential numbers in an array, such as 1, 2, 3, 4. SORT function: Sorts the contents of a range or array. SORTBY function: Sorts the contents of a range or array based on the values in a corresponding range or array. UNIQUE function: Returns a list of unique values in a list or range. The implicit intersection operator @: Returns a single value using logic known as implicit intersection. The Spill Range Operator # can reference the entire spill range: When you're dealing with spilled array functions, it's possible to reference the entire spill range by placing the spilled range operator (#) after the range. #SPILL errors are returned when a formula returns multiple values that cannot display the results in the spreadsheet for any of the following reasons: Spill range for a spilled array formula isn't blank. Unable to determine the size of the spilled array because it's volatile, and resizes between calculation passes. The spilled array formula you're attempting to enter will extend beyond the worksheet's range. Spilled array formulas in tables. The spilled array formula you're attempting to enter has caused to run out of memory. Spilled array formulas spill into merged cells. The formula cannot recognize or cannot reconcile. #CALC! errors are retuned when any of the following results are true: Calculate an array within an array. Arrays can only contain numbers, strings, errors, Booleans, or linked data types. Range references aren't supported. Return an empty set. Calculation engine encounters an unspecified calculation error with an array.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import GC from '@grapecity/spread-sheets'; import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react'; import './styles.css'; const Component = React.Component; function _getElementById(id) { return document.getElementById(id); } 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> </SpreadSheets> </div> <Panel setAllowDynamicArray={(e)=>{this.setAllowDynamicArray(e)}} /> </div>; } initSpread(spread) { this.spread = spread; spread.options.allowDynamicArray = true; var sheet = spread.getActiveSheet(); spread.suspendPaint(); spread.suspendCalcService(); sheet.setValue(1, 2, "=SEQUENCE(3,3)"); sheet.setFormula(2, 2, 'SEQUENCE(3,3)'); sheet.setValue(7, 2, "=SEQUENCE(3,3)"); sheet.setFormula(8, 2, 'SEQUENCE(3,3)'); sheet.setValue(9, 3, 3); spread.resumeCalcService(); spread.resumePaint(); } setAllowDynamicArray (e) { var spread = this.spread, sheet = spread.getActiveSheet(); spread.options.allowDynamicArray = e.target.checked; sheet && sheet.recalcAll(true); } } class Panel extends Component{ constructor(props){ super(props); } render(){ return( <div class="options-container"> <div class="option-row"> <input style={{width: "20px", float: "left"}} type="checkbox" id="allowDynamicArray" defaultChecked="checked" onChange={(e)=>{this.props.setAllowDynamicArray(e)}}/> <label htmlFor="allowDynamicArray">Allow DynamicArray</label> </div> </div> ) } } ReactDOM.render(<App />, _getElementById('app'));
<!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/@grapecity/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; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } input { margin-bottom: 5px; padding: 2px 4px; 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: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-react': 'npm:@grapecity/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);