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.
Last updated Sep 30, 2026
Overview
Why teams search for this library
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.
Install
npm install ng-hub-ui-spreadsheetJump to
Ideal for
- invoice and order lines
- price and tariff grids
- timesheets and rotas
- bulk data correction
About 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. Formulas are written against the column aliases and against coordinates alike, a long sheet draws only what the viewport covers on both axes, and the whole thing goes out to a real .xlsx or to CSV and comes back in — with the zip and the XML written here, so none of it brings a dependency.
Feature guides
No feature guides have been documented yet for this library.
Key features
Recent changes
Version 22.6.0 - 9/30/26, 12:00 AM
added: A cell can say what it is empty of: placeholder is a hint shown in that cell while it is empty, on hover, falling back to the columns own.
Version 22.5.0 - 9/29/26, 12:00 AM
changed: hubSpreadsheetCellAction now also takes a function of the row, so a column can have only some of its cells open — which keeps Enter for those and leaves the rest to the sheet.
Version 22.4.0 - 9/28/26, 12:00 AM
added: A row opens in place, with expansion and expandedRow: a template drawn under the row itself for what it holds behind its figures, rather than in a dialog over it.
added: A cell that opens onto something, said by its own template: hubSpreadsheetCellAction keeps Enter for the cell, and the press is reported through opened.
added: Columns and rows fold by outline, the way Excel grouping works: a run of columns or rows at a level folds away with one toggle, and which groups are folded is yours.
Version 22.2.0 - 9/27/26, 12:00 AM
added: A cell worked out from a formula rather than typed carries a small fx in its top corner, shown while the pointer is on it. Two tokens of its own, --hub-spreadsheet-formula-bg and --hub-spreadsheet-formula-color.
fixed: The coordinates come out only for a formula. Editing a plain cell no longer draws a letters-and-numbers frame around it — they wait for the first =.
fixed: The coordinates are drawn outside the sheet frame. The frame shifts to make room and the badges float outside it, so the frame stays between them and the table.
fixed: The list of what can go into a formula follows the frame. Writing the first = moves the sheet, and the list is placed again once it has shifted, hanging off the cell where it now is.
Version 22.1.0 - 9/27/26, 12:00 AM
added: More than one block at a time: Ctrl-clicking keeps the rectangle being drawn and starts another, Delete empties every one of them, and selectionRangesChange reports them all. A copy only happens when the blocks make a table, and the fill handle is dropped while several are picked.
added: hub-spreadsheet-theme, one include for the sheet's 65 themeable tokens, with every parameter optional so only what you pass is emitted.
added: A formula is written in colour: while one is being written, a function, a column alias, a cell reference and a quoted string are each drawn in their own colour, so the grammar reads at a glance.
added: Point at cells to write their reference: while a formula is being written, pressing or dragging across other cells puts what was pointed at into the formula at the caret — B3 for one, B3:D7 for a rectangle — without committing the text.
added: Column letters and row numbers come out while a cell is open: the table shifts a touch and into the room float badges — a column's letter and the alias a formula calls it by over the header, the row's number down the leading edge — so a reference can be read off the sheet instead of counted, with a short animation as they arrive.
fixed: Theming the sheet from outside it works at all now. The tokens were declared on the host element, which beats anything inherited, so :root, a wrapper class and a route-level theme were silently ignored. They are read where they are used now, and the defaults are unchanged.
fixed: The list of what can go into a formula is actually seen now. It existed but was clipped by the sheet scroll area and by any overflow:hidden between the cell and the page, so on the last row it never appeared. It is fixed to the window now, and opens above the cell when there is no room below.
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.
Related libraries
Frequently asked questions
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.