Angular spreadsheet

Jspreadsheet offers an advanced data grid with a spreadsheet like controls with full support for TypeScript and Angular. This section provides information on installing and integrating Jspreadsheet into your Angular applications. You can quickly enhance your application's data input functionality with easy-to-follow steps and examples.



// Install Jspreadsheet version 10
%npm install jspreadsheet


Online spreadsheet with Angular

A basic angular spreadsheet with export to XLSX.

Angular online spreadsheet

Online XLSX editor with Angular

Angular spreadsheet XLSX editor

Sample angular code
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
  @ViewChild("spreadsheet") spreadsheet: ElementRef;

  ngAfterViewInit() {
    // License for Formula Plugin
    // Create spreadsheet
    jspreadsheet(this.spreadsheet.nativeElement, {
      worksheets: [
          data: [[]],
          minDimensions: [6, 4],
          columns: [
              type: "dropdown",
              width: 100,
              source: ["Y", "N"]
              type: "color",
              width: 100,
              render: "square"

NOTE: Make sure to import the Jspreadsheet and Jsuites CSS files to your angular.json

"styles": [