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 27 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-spreadsheet

Ir 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.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

ng-hub-ui-paginable ng-hub-ui-forms ng-hub-ui-utils

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.