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.

Documentation


Installation

// Install Jspreadsheet version 10
%npm install jspreadsheet

Examples


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";

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

  ngAfterViewInit() {
    // License for Formula Plugin
    jspreadsheet.setLicense("your-license-here");
    // 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": [
    "styles.css",
    "jsuites/dist/jsuites.css",
    "jspreadsheet/dist/jspreadsheet.css"
],