Angular Spreadsheet

Jspreadsheet extends its advanced data grid capabilities to Angular, offering spreadsheet-like controls tailored for TypeScript and Angular environments. This guide details the steps for incorporating Jspreadsheet into your Angular projects, ensuring a smooth integration process. Each example within this documentation is complemented by an Angular implementation, illustrating practical applications in Angular contexts.

Documentation

Installation

$ npm install jspreadsheet

Examples

Online Spreadsheet with Angular

A basic angular spreadsheet with export to XLSX.

Angular Online Spreadsheet

Online XLSX editor with Angular

Import XLSX files and edit them online using Jspreadsheet Pro.

Angular Spreadsheet

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("MjEyZjNlYmEzNzk5ZTFjNWU0Yzg3OGIwY2VjMmQ0OTE5YzMxODQyNjc5ODM5YTkxNjAwMGFiZTQ0YTViM2RjYjkyZGEwNjM1MGY0OGI0Y2FiNzQ5MjcyODRhYjc0NjYyNmM3MTVjMmE4ZDJlMGZmNTZiOTk1ZWJmNzFiOTc4YmIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5Ua3hNalF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==");
    // 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": [
    "jsuites/dist/jsuites.css",
    "jspreadsheet/dist/jspreadsheet.css"
],