Deviopath › React

Mini Spreadsheet

Hard · Derived State

Build a mini spreadsheet with 9 cells: columns A-C and rows 1-3.

Render each cell as an <input> with a data-cell attribute ("A1", "B1", "C1", "A2", ...). All cells start empty.

Below the cells, render a total row with <td data-total="A">, <td data-total="B"> and <td data-total="C">, each showing the sum of its column.

Add a formula bar: <input className="formula"> and <p className="result"> showing the result. Only these formulas are supported:

- =SUM(A1:B2): the sum of every cell in the rectangle between the two cells, e.g. =SUM(A1:A3) (a column), =SUM(A1:C1) (a row) or =SUM(A1:C3) (all cells)

- =B2: the value of a single cell

Rules: empty or non-numeric cells count as 0. An empty formula bar shows an empty result. Anything else (an unknown cell like D1, a missing bracket, other text) shows #ERROR. Totals and the result update live when cells change.

Next: Minesweeper Lite