An open-source headless spreadsheet for business web apps
AllCellPrecedents={start}
let Q be an empty queue
Q.enqueue(start)
while Q is not empty do
cell := Q.dequeue()
S := getCellPrecedents(cell)
for all cells c in S do:
if c is not in AllCellPrecedents then:
insert w to AllCellPrecedents
Q.enqueue(c)
AllCellDependents={start}
let Q be an empty queue
Q.enqueue(start)
while Q is not empty do
cell := Q.dequeue()
S := getCellDependents(cell)
for all cells c in S do:
if c is not in AllCellDependents then:
insert w to AllCellDependents
Q.enqueue(c)
| {String(cell ?? '')} | ))}
Result: {result}
{/if}| {#if hf.doesCellHaveFormula({ sheet: sheetId, row: r, col: c })} {hf.getCellFormula({ sheet: sheetId, row: r, col: c })} {:else} {hf.getCellValue({ sheet: sheetId, row: r, col: c })} {/if} | {/each}
Result: {result}
{/if} ``` ## Next steps - [Configuration options](https://hyperformula.handsontable.com/docs/guide/configuration-options.md) — full list of `buildFromArray` / `buildEmpty` options - [Basic operations](https://hyperformula.handsontable.com/docs/guide/basic-operations.md) — CRUD on cells, rows, columns, sheets - [Advanced usage](https://hyperformula.handsontable.com/docs/guide/advanced-usage.md) — multi-sheet workbooks, named expressions - [Custom functions](https://hyperformula.handsontable.com/docs/guide/custom-functions.md) — register your own formulas ## Demo For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.3.x/svelte-demo?v=). --- ## File import URL: https://hyperformula.handsontable.com/docs/guide/file-import # File import Import XLSX and CSV files into HyperFormula. ## Overview HyperFormula has no built-in file import functionality. But its [factory methods](https://hyperformula.handsontable.com/docs/api/classes/hyperformula.md#factories) use standard JavaScript data types, for easy integration with any way of importing data. ## Import CSV files To import CSV files, use a third-party [CSV parser](https://www.npmjs.com/search?q=csv) (e.g., [PapaParse](https://www.npmjs.com/package/papaparse) or [csv-parse](https://www.npmjs.com/package/csv-parse)). Then pass the result to HyperFormula as a JavaScript array. ## Import XLSX files To import XLSX files, use a third-party [XLSX parser](https://www.npmjs.com/search?q=xlsx) (e.g., [ExcelJS](https://www.npmjs.com/package/exceljs) or [xlsx](https://www.npmjs.com/package/xlsx)). Then pass the result to HyperFormula as a JavaScript array. ### Example: Import XLSX files in Node This example uses [ExcelJS](https://www.npmjs.com/package/exceljs) to import XLSX files into HyperFormula. See full example on [GitHub](https://github.com/handsontable/hyperformula-demos/tree/3.1.x/read-excel-file). ```js const ExcelJS = require('exceljs'); const { HyperFormula } = require('hyperformula'); async function run(filename) { const xlsxWorkbook = await readXlsxWorkbookFromFile(filename); const sheetsAsJavascriptArrays = convertXlsxWorkbookToJavascriptArrays(xlsxWorkbook) const hf = HyperFormula.buildFromSheets(sheetsAsJavascriptArrays, { licenseKey: 'gpl-v3' }); console.log('Formulas:', hf.getSheetSerialized(0)); console.log('Values: ', hf.getSheetValues(0)); } async function readXlsxWorkbookFromFile(filename) { const workbook = new ExcelJS.Workbook(); await workbook.xlsx.readFile(filename); return workbook; } function convertXlsxWorkbookToJavascriptArrays(workbook) { const workbookData = {}; workbook.eachSheet((worksheet) => { const sheetDimensions = worksheet.dimensions const sheetData = []; for (let rowNum = sheetDimensions.top; rowNum <= sheetDimensions.bottom; rowNum++) { const rowData = []; for (let colNum = sheetDimensions.left; colNum <= sheetDimensions.right; colNum++) { const cell = worksheet.getCell(rowNum, colNum) const cellData = cell.formula ? `=${cell.formula}` : cell.value; rowData.push(cellData); } sheetData.push(rowData); } workbookData[worksheet.name] = sheetData; }) return workbookData; } run('sample_file.xlsx'); ``` --- ## Integration with Vue URL: https://hyperformula.handsontable.com/docs/guide/integration-with-vue # Integration with Vue The HyperFormula API is identical in a Vue 3 app and in plain JavaScript. This guide demonstrates how HyperFormula integrates with the Vue reactivity system and how to surface its values in the template. Install with `npm install hyperformula`. For other options, see the [client-side installation](https://hyperformula.handsontable.com/docs/guide/client-side-installation.md) section. > **TypeScript** > > All examples use TypeScript. Remove the type annotations to use plain JavaScript. ## Basic usage Pass the HyperFormula instance through Vue's [`markRaw`](https://vuejs.org/api/reactivity-advanced.html#markraw) to opt it out of the reactivity system (see [Troubleshooting](#vue-reactivity-issues) below for why this matters). Hold derived data in `ref` so the template updates when you reassign the ref's `.value`. ```vue| {{ cell }} |
| {{ cell }} | }
| {{ cell }} |
| Precedence | Operator | Description |
|---|---|---|
| 1 |
: (colon) , (comma) (space) |
Reference operators: range (colon), union (comma), intersection (space). Currently supported by HyperFormula only at the grammar level of a function. |
| 2 | – | Negation |
| 3 | % | Percent |
| 4 | ^ | Exponentiation |
| 5 | * and / | Multiplication and division |
| 6 | + and – | Addition and subtraction |
| 7 | & (ampersand) | Concatenation of two or more text strings |
| 8 |
< (less than) = (equal to) > (greater than) <= (less than or equal to) >= (greater than or equal to) <> (not equal to) |
Comparison |
| Feature | Maximum limit |
|---|---|
| Number of cells |
Limited by system resources (JavaScript) Can be set in the configuration:
|
| Number of nested levels of functions | 120 |
| Earliest date allowed for the calculation | December 30, 1899 |
| Latest date allowed for the calculation | December 31, 9999 |
| Number of named expressions | Limited by system resources (JavaScript) |
| Characters in a cell | Limited by system resources (JavaScript) |
| Characters in a named expression | Limited by system resources (JavaScript) |
| Characters in a sheet name | Limited by system resources (JavaScript) |
| Characters in a column name | Depends on the configuration of MaxColumns |
| Number of sheets in a workbook | Limited by system resources (JavaScript) |
| Number of custom functions | Limited by system resources (JavaScript) |
| Undo levels | Limited by the configuration - undoLimit (default: 20) |
| Number of elements in a batch operation | Limited by system resources (JavaScript) |