Spreadsheet
A spreadsheet grid with cell editing, formula evaluation, selection highlighting, and computed statistics.
#Preview
Spreadsheet
18 cells
| A | B | C | D | |
|---|---|---|---|---|
| 1 | Product | Price | Qty | Total |
| 2 | Widget | 29.99 | 10 | 299.9 |
| 3 | Gadget | 49.99 | 5 | 249.95 |
| 4 | Doohickey | 9.99 | 20 | 199.8 |
| 5 | Total | 749.65 |
1"use client"23import { createSignal, createMemo } from '@barefootjs/client'4import { Input } from '@/components/ui/input'56const COLS = ['A', 'B', 'C']7const ROWS = [1, 2, 3]89function Spreadsheet() {10 const [cells, setCells] = createSignal({})11 const [editing, setEditing] = createSignal(null)1213 return (14 <table>15 {ROWS.map(row => (16 <tr key={row}>17 {COLS.map(col => (18 <td key={col} onDblClick={() => setEditing(col + row)}>19 {editing() === col + row20 ? <Input value={cells()[col + row] ?? ''} />21 : <span>{cells()[col + row] ?? ''}</span>}22 </td>23 ))}24 </tr>25 ))}26 </table>27 )28}#Features
2D Nested Loops
Rows and columns are rendered with nested .map() loops. Inner loop param expressions are wrapped as signal accessors for per-cell reactivity.
Loop Root Dynamic Class
Selected cell gets a ring highlight via dynamic className on the loop root td element. Tests loop root reactive attribute updates.
Cell Editing with Conditional
Double-click a cell to enter edit mode. The conditional switches between an Input component and a plain div — tests conditional rendering inside nested loops.
Formula Evaluation
Cells can contain formulas (=B2*C2, =SUM(D2:D4)). A createMemo evaluates all formulas when any cell changes, creating a cross-cell reactive dependency.