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月30日
概览
团队为何搜索这个库
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.6.0 - 9/30/26, 12:00 AM
added: 单元格可以说明它空在哪里：placeholder 是在该单元格为空时、悬停显示的提示，回退到列自身的。
Version 22.5.0 - 9/29/26, 12:00 AM
changed: hubSpreadsheetCellAction 现在也可以接受行的函数：一列中可以只有部分单元格可打开，Enter 留给它们，其余交给表格。
Version 22.4.0 - 9/28/26, 12:00 AM
added: 行在原位展开，配合 expansion 与 expandedRow：把该行在数字背后所包含的内容绘制在该行自身的下方，而不是放在其上方的对话框中。
added: 可打开某物的单元格，由其自身的模板声明：hubSpreadsheetCellAction 为单元格保留 Enter，按下时通过 opened 通知。
added: 列和行按大纲折叠，与 Excel 的分组相同：某一层级的连续列或行用一个按钮折叠，折叠哪些组由你决定。
Version 22.2.0 - 9/27/26, 12:00 AM
added: 由公式计算而非输入的单元格，其右上角带有一个小 fx，指针悬停时显示。它有自己的两个变量：--hub-spreadsheet-formula-bg 和 --hub-spreadsheet-formula-color。
fixed: 坐标仅在公式时出现。编辑普通单元格不再在其周围画出字母和数字的边框——它们等待第一个 =。
fixed: 坐标绘制在表格边框之外。边框移开以腾出空间，徽标浮在其外，因此边框留在徽标与表格之间。
fixed: 可放入公式的内容列表会跟随边框。输入第一个 = 会移动表格，列表在移动后重新定位，挂在单元格现在的位置。
Version 22.1.0 - 9/27/26, 12:00 AM
added: 一次多个区块：按住 Ctrl 点击会把正在画的矩形收起来并另起一个，Delete 会全部清空，selectionRangesChange 会报告全部。只有区块能拼成表时才复制，选中多个时填充手柄会消失。
added: hub-spreadsheet-theme：一次 include 就能设置表格的 65 个可主题化变量，所有参数都是可选的，只输出你传进来的那些。
added: 公式以彩色书写：输入时，函数、列别名、单元格引用和带引号的字符串各以自己的颜色绘制，使语法一目了然。
added: 指向单元格以写入其引用：书写公式时，按下或拖过其他单元格会把所指内容插入到光标处的公式中——单个为 B3，矩形为 B3:D7——而不会提交文本。
added: 当单元格打开时，列字母和行号会出现：表格稍微移开，腾出的空间里浮出徽标——每列上方是字母和别名，左侧是行号——这样就能从表上读出引用而不用去数，并带有简短的出场动画。
fixed: 现在从外部给表格设主题真的有用了。那些变量原来声明在宿主元素上，而这会盖过任何继承而来的值，于是 :root、外层类名和按路由设置的主题都被默默忽略。现在改成在用到的地方读取，默认值没有变化。
fixed: 可放入公式的内容列表现在真正可见了。它一直存在，但被工作表的滚动区域以及单元格与页面之间的任何 overflow:hidden 裁剪，因此最后一行上从不出现。现在它固定在窗口上，当下方没有空间时会开在单元格上方。
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.