Angular Spreadsheet Component | ng-hub-ui-spreadsheet
Editable Angular spreadsheet with Excel's keyboard, rectangular selection, a clipboard that round-trips with Excel, frozen panes and merged cells. MIT, accessible, no paid tier.
Zuletzt aktualisiert 30.09.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
Use ng-hub-ui-spreadsheet when a screen needs cells people type into and paste into, without paying for a grid or giving up screen-reader support.
Installieren
npm install ng-hub-ui-spreadsheetSpringen zu
Ideal für
- invoice and order lines
- price and tariff grids
- timesheets and rotas
- bulk data correction
Über spreadsheet
ng-hub-ui-spreadsheet is a standalone Angular component that renders rows and columns you already hold and reports what the reader did to them. It never writes to your data. It brings in-cell editing with Excel's keyboard, rectangular selection by shift or dragging, a clipboard that writes and reads both flavours so figures survive a journey between locales, frozen rows and columns, merged blocks, and a save state per cell. It carries real grid semantics — role="grid", row and column indices, a roving tab stop — and depends on nothing outside Angular: its grid primitives live in ng-hub-ui-utils rather than @angular/cdk. Formeln werden über die Spaltenaliase wie über Koordinaten geschrieben, ein langes Blatt zeichnet nur, was das Sichtfenster auf beiden Achsen abdeckt, und das Ganze geht als echtes .xlsx oder als CSV hinaus und kommt zurück — Zip und XML entstehen hier, nichts davon bringt eine Abhängigkeit.
Funktionsleitfäden
Für diese Bibliothek wurden noch keine Funktionsleitfäden dokumentiert.
Hauptfunktionen
Letzte Änderungen
Version 22.6.0 - 9/30/26, 12:00 AM
added: Eine Zelle kann sagen, wovon sie leer ist: placeholder ist ein Hinweis, der in dieser Zelle erscheint, solange sie leer ist, beim Überfahren, mit Rückfall auf den der Spalte.
Version 22.5.0 - 9/29/26, 12:00 AM
changed: hubSpreadsheetCellAction nimmt jetzt auch eine Funktion der Zeile: eine Spalte kann so nur einen Teil ihrer Zellen öffnen, was Enter für diese behält und die übrigen dem Blatt überlässt.
Version 22.4.0 - 9/28/26, 12:00 AM
added: Eine Zeile öffnet sich an Ort und Stelle, mit expansion und expandedRow: eine Vorlage unter der Zeile selbst für das, was sie hinter ihren Zahlen birgt, statt in einem Dialog darüber.
added: Eine Zelle, die etwas öffnet, gesagt von ihrer eigenen Vorlage: hubSpreadsheetCellAction behält Enter für die Zelle, und der Tastendruck wird über opened gemeldet.
added: Spalten und Zeilen falten sich nach Gliederung, wie Excels Gruppierung: eine Folge von Spalten oder Zeilen auf einer Ebene faltet sich mit einem Knopf, und welche Gruppen gefaltet sind, ist Ihre.
Version 22.2.0 - 9/27/26, 12:00 AM
added: Eine aus einer Formel berechnete statt getippte Zelle trägt ein kleines fx in ihrer oberen Ecke, sichtbar, solange der Zeiger darauf ist. Mit zwei eigenen Tokens, --hub-spreadsheet-formula-bg und --hub-spreadsheet-formula-color.
fixed: Die Koordinaten erscheinen nur für eine Formel. Eine gewöhnliche Zelle zu bearbeiten zeichnet keinen Rahmen aus Buchstaben und Nummern mehr darum — sie warten auf das erste =.
fixed: Die Koordinaten werden außerhalb des Blattrahmens gezeichnet. Der Rahmen verschiebt sich, um Platz zu machen, und die Badges schweben außerhalb, sodass der Rahmen zwischen ihnen und der Tabelle bleibt.
fixed: Die Liste dessen, was in eine Formel gehört, folgt dem Rahmen. Das erste = verschiebt das Blatt, und die Liste wird danach neu gesetzt und hängt an der Zelle, wo sie jetzt ist.
Version 22.1.0 - 9/27/26, 12:00 AM
added: Mehrere Blöcke auf einmal: mit Ctrl legt der Klick das gerade gezogene Rechteck ab und beginnt ein neues, Entf leert alle, und selectionRangesChange meldet alle. Kopiert wird nur, wenn die Blöcke eine Tabelle bilden, und der Ausfüllgriff verschwindet, solange mehrere gewählt sind.
added: hub-spreadsheet-theme, ein Include für die 65 thémbaren Tokens des Blattes, jeder Parameter optional: nur was übergeben wird, erscheint.
added: Eine Formel wird farbig geschrieben: Während des Schreibens werden Funktion, Spaltenalias, Zellbezug und Zeichenkette jeweils in ihrer eigenen Farbe dargestellt, sodass die Grammatik auf einen Blick lesbar ist.
added: Zellen zeigen, um ihren Bezug zu schreiben: Während eine Formel geschrieben wird, fügt Drücken oder Ziehen über andere Zellen das Angezeigte an der Cursorposition in die Formel ein — B3 für eine, B3:D7 für ein Rechteck —, ohne den Text abzuschließen.
added: Spaltenbuchstaben und Zeilennummern erscheinen, solange eine Zelle geöffnet ist: Die Tabelle verschiebt sich ein wenig, und in den entstehenden Raum gleiten Badges — über jeder Spalte der Buchstabe und der Alias, am linken Rand die Zeilennummer —, damit ein Bezug abgelesen statt gezählt wird, mit einer kurzen Animation beim Erscheinen.
fixed: Das Blatt von außen zu themen funktioniert jetzt überhaupt. Die Tokens waren am Host-Element deklariert, was jede Vererbung schlägt, sodass :root, eine umgebende Klasse und ein Theme pro Route still ignoriert wurden. Sie werden nun dort gelesen, wo sie gebraucht werden; die Standardwerte bleiben.
fixed: Die Liste dessen, was in eine Formel gehören kann, ist jetzt wirklich zu sehen. Sie existierte, wurde aber vom Scrollbereich des Blatts und von jedem overflow:hidden zwischen Zelle und Seite abgeschnitten, sodass sie in der letzten Zeile nie erschien. Jetzt ist sie am Fenster fixiert und öffnet über der Zelle, wenn unten kein Platz ist.
Version 22.0.0 - 9/27/26, 12:00 AM
added: hub-spreadsheet: in-cell editing, full keyboard navigation and rectangular selection.
added: A clipboard that round-trips with Excel in both directions, reading the raw number out of the HTML flavour.
added: Frozen rows and columns, counted from the edge.
added: Merged blocks, declared by the owner, treated as one cell by navigation and selection.
added: Insert and delete requests, gated by permissions, with aliases that are never reused.
Verwandte Bibliotheken
Häufig gestellte Fragen
How do I paste from Excel into an Angular grid without breaking numbers?
Read the HTML flavour of the clipboard, not only the plain text. Excel writes the raw number in an attribute there; the plain text carries whatever the source locale displayed, so 1.234,56 parses as text or as 1.23 depending on where it was copied. ng-hub-ui-spreadsheet reads both and prefers the raw value.
Is there a free Angular spreadsheet component?
ng-hub-ui-spreadsheet is MIT with no paid tier and no gated features. Editing, rectangular selection, the clipboard, frozen panes and merged cells are all in the package, which is not the case for most grids, where the clipboard and range selection sit behind an enterprise licence.
Does it work with a screen reader?
Yes. It renders a real role="grid" with per-cell aria-colindex, per-row aria-rowindex, aria-selected following the selection, aria-readonly on cells that cannot be typed into and aria-busy while a cell saves, with one roving tab stop and arrow-key navigation.
Does it need @angular/cdk?
No. The two-dimensional navigation, the rectangular selection and the keyboard map live in ng-hub-ui-utils, so installing the spreadsheet brings nothing outside Angular itself.