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)
| {{ cell }} | }
| {{ 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.4.x/svelte-demo?v=). --- ## Integration with React URL: https://hyperformula.handsontable.com/docs/guide/integration-with-react # Integration with React The HyperFormula API is identical in a React app and in plain JavaScript. This guide demonstrates how HyperFormula is integrated with the React component tree and how its lifecycle maps to React hooks. 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 Hold the HyperFormula instance in a `useRef` so it survives re-renders. Initialize it inside `useEffect` and release it in the cleanup function. Use `useState` to toggle between raw formulas and computed values. ```tsx import { useEffect, useRef, useState } from 'react'; import { HyperFormula } from 'hyperformula'; import type { CellValue } from 'hyperformula'; export default function SpreadsheetComponent() { const hfRef = useRef| {String(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) |