SpreadsheetNew in 0.7.0

Usage

import { Spreadsheet } from "@vesture/react";

<Spreadsheet
  defaultValue={[
    ["Price", "Qty", "Subtotal", "Tax"],
    ["19.99", "3", "=A2*B2", "=TAX(C2)"],
    ["5.50", "10", "=A3*B3", "=TAX(C3)"],
    ["Total", "", "=SUM(C2:C3)", "=SUM(D2:D3)"],
  ]}
  functions={{ TAX: ([n]) => (n ?? 0) * 0.2 }}
  formatCell={(v, { row }) => (typeof v === "number" && row > 0 ? `$${v.toFixed(2)}` : String(v))}
  isCellEditable={({ row, col }) => row > 0 && col < 2}
/>

Behavior

• The value is the raw text of every cell, string[][]: a string starting with = is a formula, everything else is a literal (numeric strings become numbers, right-aligned). Controlled via value / onChange, or uncontrolled via defaultValue.
• Formulas support + − × ÷, parentheses, unary minus, references like B3, ranges like A1:A5 and functions. Ranges skip text and blanks like a real spreadsheet; a bare reference to text is #VALUE!.
• Errors are values, not exceptions: #DIV/0!, #CYCLE! (circular reference), #REF!, #NAME?, #VALUE!, #ERR! (syntax). They propagate to dependent cells and are styled as errors.
• functions adds your own formula functions — { TAX: ([n]) => n * 0.2 } makes =TAX(C2) work. A function that throws shows #ERR! rather than crashing the grid.
• formatCell changes how a computed value is displayed (currency, percent, dates) without touching the stored text, and renderCell / getCellStyle / getCellClassName cover richer or conditional formatting. Editing always shows the raw text.
• readOnly locks everything; isCellEditable({ row, col }) locks cells individually (headers, computed columns).
• Keyboard: arrows, Home/End and Tab move; Enter or F2 starts editing; typing a character replaces the cell; Enter/Tab commit and move on; Escape cancels; Delete/Backspace clears.