ngx-univer-sheet

Fully open-source Angular spreadsheet component built on Univer Sheets (Apache 2.0).

Drop <ngx-univer-sheet> into any Angular 19+ app. Your parent app owns side panels, forms, or sync tables — the library provides only the Excel-like grid with the same JSON / Excel data format.

Open source stack

| Package | License | Role | |---------|---------|------| | Univer (@univerjs/*) | Apache 2.0 | Spreadsheet engine, UI, formulas | | ExcelJS | MIT | Rich .xlsx import | | SheetJS (xlsx) | Apache 2.0 | .xlsx export | | ngx-univer-sheet | Apache 2.0 | Angular wrapper |

No Univer Pro or commercial packages required. Charts and enterprise server exchange are not included.

Install

npm install ngx-univer-sheet

Install peer dependencies (Univer, ExcelJS, xlsx, react, react-dom) — see package.json peerDependencies.

Setup

1. Add Univer styles to angular.json

"styles": [
  "node_modules/@univerjs/design/lib/index.css",
  "node_modules/@univerjs/ui/lib/index.css",
  "node_modules/@univerjs/docs-ui/lib/index.css",
  "node_modules/@univerjs/sheets-ui/lib/index.css",
  "node_modules/@univerjs/sheets-formula-ui/lib/index.css",
  "node_modules/@univerjs/sheets-numfmt-ui/lib/index.css",
  "node_modules/@univerjs/find-replace/lib/index.css",
  "node_modules/@univerjs/sheets-filter-ui/lib/index.css",
  "node_modules/@univerjs/sheets-sort-ui/lib/index.css",
  "node_modules/@univerjs/sheets-conditional-formatting-ui/lib/index.css",
  "node_modules/@univerjs/sheets-data-validation-ui/lib/index.css",
  "node_modules/@univerjs/sheets-hyper-link-ui/lib/index.css",
  "node_modules/@univerjs/sheets-zen-editor/lib/index.css",
  "node_modules/@univerjs/drawing-ui/lib/index.css",
  "node_modules/@univerjs/sheets-drawing-ui/lib/index.css"
]

Or import the constant in your build config:

import { UNIVER_SHEET_STYLES, UNIVER_SHEET_COMMON_JS_DEPS } from 'ngx-univer-sheet';

Also add to allowedCommonJsDependencies: xlsx, exceljs.

2. Use the component

import { Component, ViewChild, signal } from '@angular/core';
import type { IWorkbookData } from '@univerjs/core';
import { LinkedCellRow, UniverSheetComponent } from 'ngx-univer-sheet';

@Component({
  standalone: true,
  imports: [UniverSheetComponent],
  template: `
    <div style="display:flex;height:100vh">
      <ngx-univer-sheet
        #sheet
        [workbook]="workbook"
        toolbarTitle="My App"
        (linkedCellsChange)="rows.set($event)"
        (highlightChange)="highlight.set($event)"
        (statusChange)="status.set($event)"
      />
      <!-- Your parent-app table / form panel -->
      <your-sync-table
        [rows]="rows()"
        (valueChange)="sheet.setLinkedCellValue($event.address, $event.value)"
        (rowSelect)="sheet.selectLinkedCell($event)"
      />
    </div>
  `,
})
export class AppComponent {
  @ViewChild('sheet') sheet!: UniverSheetComponent;
  workbook = {} as IWorkbookData;
  rows = signal<LinkedCellRow[]>([]);
  highlight = signal<string | null>(null);
  status = signal<string | null>(null);
}

Data format

• Input / output: Univer IWorkbookData JSON (same as export JSON from the demo).
• Import Excel: .xlsx via ExcelJS (styles, merges, images).
• Export Excel: .xlsx via SheetJS (values & structure; limited style round-trip).
• Import / export JSON: native IWorkbookData snapshot.

Utility functions are exported for custom flows:

import {
  xlsxFileToWorkbookData,
  workbookDataToXlsxBlob,
  downloadBlob,
} from 'ngx-univer-sheet';

Component API

| Input | Type | Default | Description | |-------|------|---------|-------------| | workbook | IWorkbookData \| null | null | Initial / updated workbook | | showToolbar | boolean | true | Built-in import/export bar | | toolbarTitle | string | 'Spreadsheet' | Toolbar label |

| Output | Description | |--------|-------------| | linkedCellsChange | Editable non-formula cells (for parent sync tables) | | highlightChange | A1 address when a linked cell is selected | | statusChange | Import/export status or error message | | initError | Fatal init error |

| Method | Description | |--------|-------------| | selectLinkedCell(address) | Focus cell from parent table | | setLinkedCellValue(address, value) | Push table edit into sheet | | refreshLinkedCells() | Re-scan linked cells | | getWorkbookData() | Current IWorkbookData | | loadWorkbook(data) | Replace workbook |

Build & publish

From the monorepo root:

npm run build:lib
cd dist/ngx-univer-sheet
npm publish

Demo

See the univer-spreadsheet app in this repo — sheet from ngx-univer-sheet, sync table is parent app only.