Mini app · inspirada en Excel
Hojas
Una hoja de cálculo que intenta sentirse como Excel: el teclado, la selección, la barra de fórmulas y el recálculo instantáneo. Por dentro, cada celda es un átomo de Jotai.
Qué tiene
Nivel 1 · la sensación de Excel
completo- Cuadrícula de 1.000 filas × 52 columnas (A…AZ) virtualizada, con encabezados fijos
- Celda activa con borde verde y encabezados de fila y columna resaltados
- Teclado de Excel: flechas, Enter/Tab (con Shift), Ctrl+flechas, Inicio, RePág/AvPág, Ctrl+Inicio/Fin
- Edición: escribir reemplaza, F2 o doble clic modifica, Esc cancela, Supr borra
- Cuadro de nombres (también para saltar a C12 o A1:B5) y barra de fórmulas sincronizada
- Fórmulas en español con «;» y coma decimal: referencias, rangos, $absolutas, operadores, %
- Errores al estilo Excel: #¡DIV/0!, #¡VALOR!, #¡REF!, #¿NOMBRE?, #¡NUM! y referencias circulares
- Modo Señalar: clic, arrastre o flechas insertan referencias; cada una con su color en la celda y en la fórmula
Nivel 2 · lo que la vuelve usable
completo- Selección de rangos con ratón y Shift; filas y columnas completas desde los encabezados
- Barra de estado con Promedio, Recuento y Suma de la selección
- Copiar, cortar y pegar compatibles con Excel y Google Sheets (TSV + HTML) y ajuste de referencias relativas
- Deshacer y rehacer (Ctrl+Z / Ctrl+Y)
- Redimensionar columnas y filas; doble clic en el borde para autoajustar
- Formato: negrita, cursiva, subrayado, colores, alineación, número, moneda y porcentaje
- Guardado automático en el navegador
Extras que surgieron por el camino
- Autocompletado de funciones (Tab) y ayuda de sintaxis con el argumento actual en negrita
- Diálogo «Hay un problema con esta fórmula» y cierre automático de paréntesis
- Texto que desborda hacia celdas vacías y ### cuando un número no cabe
- Autosuma, Ctrl+Enter para rellenar la selección y exportar a CSV
Nivel 3 · opcional
pendiente- Varias hojas y referencias entre hojas
- Controlador de relleno (arrastrar el cuadradito)
- Menú contextual e insertar/eliminar filas y columnas
- Importar y exportar .xlsx
Librerías y para qué sirve cada una
| Librería | Papel | Qué aporta aquí |
|---|---|---|
| Next.js 16 (App Router) | Rutas, layouts y build | Las páginas de información se prerenderizan; la hoja se carga solo en el cliente con dynamic(…, { ssr: false }). |
| React 19 | Interfaz | Cada celda visible es un componente memoizado que se suscribe solo a sus átomos. |
| Jotai 3 | Estado atómico | Un átomo por celda y átomos derivados para los valores: el grafo de dependencias sale gratis. |
| @tanstack/react-virtual | Virtualización | De las 52.000 celdas solo existen en el DOM las ~600 que se ven. |
| Tailwind CSS 4 | Estilos | Utilidades para reproducir la estética de Office sin una hoja de estilos enorme. |
| lucide-react | Iconos | Los iconos de la cinta de opciones. |
| Vitest | Tests | El motor de fórmulas y el estado se prueban sin navegador. |
Hecho a mano (sin librería)
- Motor de fórmulas
- Tokenizer → parser (Pratt) → evaluador, con funciones en español. Unas 1.100 líneas.
- atomFamily
- Jotai 3 ya no la incluye: un Map y una función. Es el memoize() de xlsheets, bien hecho.
- Portapapeles
- TSV con comillas como Excel; si lo pegado salió de esta hoja, se pegan fórmulas y formato.
- Editor con colores
- Un <input> con texto transparente encima de un «espejo» que pinta las referencias.
Si fuera un producto real
- HyperFormula
- Motor de fórmulas compatible con Excel (~400 funciones). Licencia GPLv3 o comercial.
- SheetJS / ExcelJS
- Leer y escribir archivos .xlsx (lo que haría falta para el nivel 3).
- Glide Data Grid / AG Grid
- Cuadrículas listas para producción; Glide dibuja en <canvas> para millones de filas.
- Yjs
- Para colaboración en tiempo real (lo veremos en la mini app de Documentos).
Atajos de teclado
Flechas / Ctrl+flechasMoverse / saltar al borde de los datos
Shift + flechas o clicExtender la selección
Enter, Tab (+ Shift)Confirmar y moverse
F2 / doble clicModificar la celda
Ctrl+EnterEscribir lo mismo en toda la selección
Supr / RetrocesoBorrar la selección / vaciar y editar
Ctrl+C, Ctrl+X, Ctrl+VCopiar, cortar, pegar
Ctrl+Z / Ctrl+YDeshacer / rehacer
Ctrl+N, Ctrl+K, Ctrl+SNegrita, cursiva, subrayado (como Excel en español)
Ctrl+A / Ctrl+Inicio / Ctrl+FinSeleccionar todo / ir a A1 / ir a la última celda usada
Tab en el autocompletadoInsertar la función sugerida