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/09/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 のグループ化と同じです。あるレベルの列または行の並びが 1 つのボタンで折りたたまれ、どのグループが折りたたまれているかはあなた次第です。

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。シートの 65 個のテーマ可能な変数を一度の include で。すべての引数は任意で、渡したものだけが出力されます。

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.

関連ライブラリ

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

よくある質問

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.