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.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Bearbeiten und Zwischenablage

Ein bearbeitbares Blatt

Product Units Unit price Total
M6 zinc-plated bolt12000.12144
M6 flat washer34000.04136
Self-locking nut8000.0972
Threaded rod, 1 m453.75168.75

Click a cell and type, or press F2 to edit keeping the value. Enter commits and drops a row, Tab commits and moves right.

Kopieren und Einfügen mit Excel

Meter January (kWh) February (kWh) Change
Warehouse1240.51188-52.5
Workshop890.25935.7545.5
Offices410402.5-7.5
Cold store3120.83260.4139.5999999999999

Select a range, copy it, and paste it into Excel. Or the other way round.

Spaltentypen und ein eigener Editor

Task Status Due Billable Assignee
Site surveyDone2026-10-02Ana Ruiz
CablingIn progress2026-10-09Luis Prat
Patch panelNot started
HandoverOn hold

A click picks a cell; a double click, F2 or simply typing opens it. Open Status for a list, Due for a date and Assignee for a searchable hub-select supplied by this page; Billable takes one click on its box. Hover an empty Due or Assignee cell to see its hint.

Formeln über Alias und über Koordinate

Item Units Price Discount Total VAT 21%
Steel bolt M64000.1204810.08
Washer12000.040.143.29.07
Hex nut8000.0907215.12
Anchor601.40.256313.23
Order total226.247.5

Change a quantity and the totals follow. Open a Total cell to see the formula, and the last row to see a column added up.

Die Zellen einer Spalte selbst zeichnen: Abzeichen und Aktionen

Reference Customer State Total Actions
INV-0412Ferretería SurPaid1240.5
RemindArchive
INV-0413Metalls PratPending890.25
RemindArchive
INV-0414Suministros MoraLate410
RemindArchive
INV-0415Bilbo ToolsPending3120.8
RemindArchive

Pick a row and use the actions at the end. Copy the State column into a spreadsheet: what travels is paid, not the badge.

Eine Control-Bibliothek einmal verdrahten statt ein Template je Spalte

Subject Queue Severity
Card reader offlineField serviceHigh
Duplicate invoiceBillingNormal
Password reset loopSupportCritical
Old portal exportLegacy (closing)Low

Queue and Severity have no editor of their own. Open one and it is the house select, with its search box.

Form des Blatts

Fixierte Zeilen und Spalten

Region Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Total276082892429391285802723626595272462859129392289142759526649
North400055155637425426382274349751835781474230212200
Levante563742542638227434975183578147423021220030344756
Centre263822743497518357814742302122003034475657835171
South349751835781474230212200303447565783517134822269
Islands578147423021220030344756578351713482226926484270
Portugal302122003034475657835171348222692648427056435506
France303447565783517134822269264842705643550639842477

Scroll sideways and down. The region column and the first row stay put, and the seam is drawn on the last frozen track.

Verbundene Blöcke

Time Monday Tuesday Wednesday
09:00StandupStandupQuarterly review
10:00Design workshopSupport rota
11:00
12:00RetroOpenOpen

The Monday workshop spans two hours, and Wednesday's review spans three. Arrow into one, then try selecting only part of it. Select a rectangle and right-click to put it together, or right-click a block to take it apart.

Zehntausend Zeilen mal fünfzig Spalten, von denen das Dokument einen Bildschirm hält

Meter Taken kWh Cost 00:00 00:30 01:00 01:30 02:00 02:30 03:00 03:30 04:00 04:30 05:00 05:30 06:00 06:30 07:00 07:30 08:00 08:30 09:00 09:30 10:00 10:30 11:00 11:30 12:00 12:30 13:00 13:30 14:00 14:30 15:00 15:30 16:00 16:30 17:00 17:30 18:00 18:30 19:00 19:30 20:00 20:30 21:00 21:30 22:00 22:30 23:00 23:30
Warehouse2026-01-011202044.65.25.76.26.56.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.1
Workshop2026-01-01132.519.984.65.25.76.26.56.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.5
Offices2026-01-01144.919.95.25.76.26.56.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.9
Cold store2026-01-01156.919.785.76.26.56.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.4
Yard2026-01-01168.519.616.26.56.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.9
Warehouse2026-01-02179.319.396.56.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.5
Workshop2026-01-02189.419.136.8776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.51.2
Offices2026-01-02198.518.83776.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.51.21.1
Cold store2026-01-02206.618.4876.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.51.21.11
Yard2026-01-02213.618.16.96.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.51.21.111.1
Warehouse2026-01-03219.417.696.76.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.51.21.111.11.2
Workshop2026-01-0322417.246.465.554.43.83.22.72.21.71.41.1111.11.31.72.12.63.23.84.34.95.566.46.76.9776.86.66.25.85.24.74.13.52.92.41.91.51.21.111.11.21.5

10,000 rows and 52 columns. Scroll either way: the document holds a screenful at a time, and the first column stays put.

Ausfüllkästchen, und ein Ziehen in einem Schritt zurücknehmen

UndoRedo0 of 0 steps
Code Task Hours
INV-001Site survey8
INV-002Cabling16
Patch panel
Labelling
Handover

Select the two codes, then drag the corner square down. Undo with Ctrl+Z.

Spalten in der Breite ändern und umordnen

Reset the layoutNothing resized yet
Name Company Email City
Ana RuizFerretería Surana@ferreteriasur.esSevilla
Luis PratMetalls Pratluis@metallsprat.catGirona
Eva MoraSuministros Moraeva@sumora.esAlbacete
Jon DíazBilbo Toolsjon@bilbotools.eusBilbao

Drag the right edge of a header to widen it, or drag the header itself to move the column.

Zustand und Struktur

Speicherzustand je Zelle

Tariff Price Margin
Standard420.18
Volume38.50.14
Partner350.11
Launch290.06
Written, not sent Saving Saved Failed Changed elsewhere

Edit a price. Anything ending in 9 fails on purpose, so you can see the error state.

Zeilen und Spalten hinzufügen und entfernen

Add a lineAdd a column Remove the last column
Task Hours
Site survey
Cabling

Add a column, remove it, add another: the alias never comes back.

Aliases handed out so fardescription · col-1

Validierung je Zelle mit Signal Forms

Product Units Unit price
M6 zinc-plated bolt12000.12
M6 flat washer34000.04
Self-locking nut8000.09
Submit Clear a product name or set units to 0, then leave the cell.

Hinaus nach Excel oder CSV — und zurück

Item Units Price Total
Steel bolt M64000.1248
Washer12000.0448
Hex nut8000.0972

Export it, open it in Excel, change a quantity, save it and bring it back.