Componente de hoja de cálculo para Angular | ng-hub-ui-spreadsheet
Hoja de cálculo editable para Angular con el teclado de Excel, selección rectangular, portapapeles que va y viene con Excel, paneles congelados y celdas combinadas. MIT, accesible y sin funciones de pago.
Última actualización 30 sept 2026
Visión General
Por qué los equipos buscan esta librería
Usa ng-hub-ui-spreadsheet cuando una pantalla necesite celdas en las que escribir y pegar, sin pagar por una rejilla ni renunciar a los lectores de pantalla.
Instalación
npm install ng-hub-ui-spreadsheetIr a
Ideal para
- líneas de factura y de pedido
- tarifas y listas de precios
- partes de horas y cuadrantes
- corrección masiva de datos
Sobre spreadsheet
ng-hub-ui-spreadsheet es un componente autónomo de Angular que dibuja las filas y columnas que ya tienes y te cuenta qué ha hecho el lector con ellas. Nunca escribe en tus datos. Trae edición dentro de la celda con el teclado de Excel, selección rectangular con mayúsculas o arrastrando, un portapapeles que escribe y lee los dos formatos para que las cifras sobrevivan al viaje entre idiomas, filas y columnas congeladas, bloques combinados y un estado de guardado por celda. Lleva semántica de rejilla de verdad —role="grid", índices de fila y columna, una parada de tabulación que viaja— y no depende de nada ajeno a Angular: sus primitivas viven en ng-hub-ui-utils y no en @angular/cdk. Las fórmulas se escriben tanto contra los alias de las columnas como contra coordenadas, una hoja larga dibuja solo lo que cubre la ventana en los dos ejes, y todo sale a un .xlsx de verdad o a CSV y vuelve a entrar, con el zip y el XML escritos aquí para que nada de eso traiga dependencias.
Guías de uso
Todavía no hay guías de uso documentadas para esta librería.
Características clave
Cambios recientes
Version 22.6.0 - 9/30/26, 12:00 AM
added: Una celda puede decir de qué está vacía: placeholder es una pista que se muestra en esa celda mientras está vacía, al pasar el ratón, con respaldo al de la columna.
Version 22.5.0 - 9/29/26, 12:00 AM
changed: hubSpreadsheetCellAction ahora acepta también una función de la fila, así que una columna puede tener solo algunas celdas que abren: eso reserva Intro para esas y deja las demás a la hoja.
Version 22.4.0 - 9/28/26, 12:00 AM
added: Una fila se abre en su sitio, con expansion y expandedRow: una plantilla dibujada bajo la fila misma para lo que guarda detrás de sus cifras, en lugar de en un diálogo encima.
added: Una celda que abre algo, dicha por su propia plantilla: hubSpreadsheetCellAction le guarda el Intro a la celda y la pulsación se informa por opened.
added: Las columnas y las filas se pliegan por esquema, como el agrupado de Excel: una tirada de columnas o filas en un nivel se pliega con un solo botón, y qué grupos están plegados es tuyo.
Version 22.2.0 - 9/27/26, 12:00 AM
added: Una celda calculada por una fórmula en vez de escrita lleva un pequeño fx en su esquina superior, visible al pasar el puntero. Con dos variables propias, --hub-spreadsheet-formula-bg y --hub-spreadsheet-formula-color.
fixed: Las coordenadas aparecen solo para una fórmula. Editar una celda normal ya no dibuja alrededor un marco de letras y números: esperan al primer =.
fixed: Las coordenadas se dibujan fuera del marco de la hoja. El marco se desplaza para dejar sitio y los badges flotan fuera de él, así que el marco queda entre ellos y la tabla.
fixed: La lista de lo que puede entrar en una fórmula sigue al marco. Escribir el primer = mueve la hoja, y la lista se coloca otra vez tras el desplazamiento, colgando de la celda donde ahora está.
Version 22.1.0 - 9/27/26, 12:00 AM
added: Varios bloques a la vez: con Ctrl pulsado, el clic guarda el rectángulo que se estaba dibujando y empieza otro, Supr los vacía todos y selectionRangesChange informa de todos. Copiar solo ocurre cuando los bloques forman una tabla, y el tirador de relleno desaparece mientras haya varios.
added: hub-spreadsheet-theme, un solo include para las 65 variables tematizables de la hoja, con todos los parámetros opcionales: solo se emite lo que se pasa.
added: Una fórmula se escribe en color: mientras se escribe, una función, un alias de columna, una referencia a celda y una cadena entrecomillada se dibujan cada una con su color, para que la gramática se lea de un vistazo.
added: Apuntar celdas para escribir su referencia: mientras se escribe una fórmula, pulsar o arrastrar sobre otras celdas mete lo apuntado en la fórmula en la posición del cursor —B3 para una, B3:D7 para un rectángulo— sin cerrar el texto.
added: Las letras de columna y los números de fila aparecen mientras hay una celda abierta: la tabla se desplaza un poco y en ese hueco flotan unos badges —la letra y el alias de cada columna sobre la cabecera, el número de la fila por la izquierda— para leer una referencia en vez de contarla, con una pequeña animación al llegar.
fixed: Ahora tematizar la hoja desde fuera funciona. Las variables se declaraban en el propio elemento, y eso gana a cualquier valor heredado, así que :root, una clase envolvente o un tema por ruta se ignoraban en silencio. Ahora se leen donde se usan, y los valores por defecto no cambian.
fixed: La lista de lo que puede entrar en una fórmula ya se ve. Existía, pero la recortaban el área de scroll de la hoja y cualquier overflow:hidden entre la celda y la página, así que en la última fila no aparecía nunca. Ahora se fija a la ventana y abre por encima de la celda cuando no hay sitio debajo.
Version 22.0.0 - 9/27/26, 12:00 AM
added: hub-spreadsheet: edición en celda, navegación completa con el teclado y selección rectangular.
added: Un portapapeles que va y viene con Excel en los dos sentidos, leyendo el número crudo del formato HTML.
added: Filas y columnas congeladas, contadas desde el borde.
added: Bloques combinados, declarados por quien la usa y tratados como una sola celda por la navegación y la selección.
added: Peticiones de insertar y borrar, con permisos y con alias que no se reutilizan nunca.
Librerías relacionadas
Preguntas frecuentes
¿Cómo se pega desde Excel en una rejilla de Angular sin romper los números?
Leyendo el formato HTML del portapapeles, no solo el texto plano. Excel escribe allí el número en crudo; el texto plano trae lo que el origen mostraba, así que 1.234,56 se interpreta como texto o como 1,23 según dónde se copiara. ng-hub-ui-spreadsheet lee los dos y da prioridad al valor crudo.
¿Hay algún componente de hoja de cálculo gratuito para Angular?
ng-hub-ui-spreadsheet es MIT, sin nivel de pago y sin funciones bloqueadas. La edición, la selección rectangular, el portapapeles, los paneles congelados y las celdas combinadas van en el paquete, cosa que no ocurre en la mayoría de rejillas, donde el portapapeles y la selección de rangos están detrás de una licencia de empresa.
¿Funciona con lector de pantalla?
Sí. Dibuja un role="grid" de verdad, con aria-colindex por celda, aria-rowindex por fila, aria-selected siguiendo a la selección, aria-readonly en las celdas que no se pueden escribir y aria-busy mientras una celda se guarda, con una sola parada de tabulación y navegación con flechas.
¿Necesita @angular/cdk?
No. La navegación en dos dimensiones, la selección rectangular y el mapa de teclas viven en ng-hub-ui-utils, así que instalar la hoja de cálculo no trae nada ajeno a Angular.