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

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

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

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.