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.

最后更新 2026年9月27日

概览

团队为何搜索这个库

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.

安装

npm install ng-hub-ui-spreadsheet

跳转到

适用于

  • invoice and order lines
  • price and tariff grids
  • timesheets and rotas
  • bulk data correction

关于 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. 公式既可以用列别名写,也可以用坐标写;长表格在两个方向上只画视口覆盖到的部分;整张表可以导出成真正的 .xlsx 或 CSV,再导回来——zip 和 XML 都在这里写,所以这些都不带来任何依赖。

功能指南

该库尚未记录任何功能指南。

核心特性

最近更改

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.

常见问题

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.