Overview

Build a spreadsheet with real-time formula evaluation — a great exercise to practice custom state management, two-way cell bindings, and reusable table components.

Requirements

• Render a spreadsheet with the title, column headers A through E, and rows numbered 1 through 10.
• Each cell must display its computed value inside an <output> element with an <input> overlaid for editing.
• Clicking a cell lets the user edit its value; pressing Enter or blurring the input commits the change.
• Formulas starting with = must be evaluated:
  • Simple arithmetic: =1+1 should display 2.
  • Cell references: if A1 is 5, then =A1+3 in another cell should display 8.
• Clicking a column header toggles selection of that column, giving it the bg-blue-300 class. Clicking it again deselects it.
• Clicking a row number toggles selection of that row with the same bg-blue-300 class.
• Selecting a column deselects any selected row, and selecting a row deselects any selected column.
• Pressing Backspace with a column or row selected clears all cells in that column or row.
• Clicking anywhere outside the table deselects any selected column or row.
• A formula bar (labeled fx) above the table must mirror the value of the cell currently being edited.
• Cells must start empty (no default values).
• Keep the data-column and data-row attributes on cells and headers — the tests depend on them.

Notes

• The starter provides the visual skeleton across App.tsx, Spreadsheet.tsx, Cell.tsx, and useSpreadsheet.ts with helper constants and types. Add state and handlers — don't rewrite the markup from scratch.
• Use useState for cells, selected column, and selected row. A useReducer is not needed for 3 operations.
• Each cell has two overlapping layers: a visible <output> (computed value) and an invisible <input> (raw formula). Toggle the input with opacity-0 / opacity-100 instead of conditional rendering so the element stays mounted.
• Evaluate formulas with eval: generate JS const declarations from all cell values (e.g., const A1 = 5;), wrap them in an IIFE, and evaluate the formula. Re-evaluate every cell on any change — cells can reference each other.
• Treat empty cells as 0 when generating formula constants so other cells referencing them don't throw errors.
• Use useEffect + useRef to keep the latest selected column/row available inside stable keyboard and clipboard event listeners without re-attaching them on every render.
• The data-column and data-row attributes on <td>, <th>, and <input> elements are used by the tests — keep them.
• useSpreadsheet.ts already exports ROWS, COLUMNS, getColumnLetter, times, and the CellData type. Implement the hook that returns cells, selectedColumn, selectedRow, updateCell, clearColumn, and clearRow.

Tests

1. renders the app title
2. renders the spreadsheet with column headers A-E and rows 1-10
3. renders cells with initial empty values
4. allows editing a cell and displays the new computed value
5. evaluates a simple formula
6. evaluates a formula with cell references
7. re-evaluates formulas when a referenced cell is cleared
8. selects a column when clicking the column header
9. deselects column when clicking the same header again
10. selects a row when clicking the row number
11. deselects row when clicking the same row number again
12. deselects column when selecting a row and vice-versa
13. clears the column when Backspace is pressed with a column selected
14. clears the row when Backspace is pressed with a row selected
15. deselects column when clicking outside the spreadsheet