Documentationkeyboard_arrow_rightAngular

Angular Spreadsheet

Jspreadsheet extends its advanced JavaScript data grid component capabilities to Angular, offering spreadsheet-like controls tailored for TypeScript and Angular environments. This guide provides detailed steps for incorporating Jspreadsheet into your Angular projects, ensuring a easy integration process. Each example in this documentation includes an Angular implementation, illustrating practical applications within Angular contexts.

Documentation

Installation

The quickest way to install is with the install wizard, which auto-detects Angular and sets up everything:

npx @jspreadsheet/install

Or install manually using npm:

npm install jspreadsheet

Examples

Online Spreadsheet with Angular

A basic Angular spreadsheet with XLSX export functionality.

Online XLSX editor with Angular

Import and edit XLSX files online using Jspreadsheet Pro.

Sample Angular Code

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('YjczNTIxOGUxODNmNzkzODgxZTYxNmE1MzUyMGM2MmE1YzM4YTlhYzI2ZTcxODFkYmE4ZjU0ZWNiMTIyYWNlYjU3MTUyNmI2OTM1MTYzN2FkMmI3ZWNmZGMyZjgxODViYzQ2MGY1NTU4ZDZiMmExYjIxNzExNDBlYTg0OWQyOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpneE1qUTROekl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [[]],
                minDimensions: [6, 4],
                columns: [
                    {
                        type: "dropdown",
                        width: 100,
                        source: ["Y", "N"]
                    },
                    {
                        type: "color",
                        width: 100,
                        render: "square"
                    }
                ]
            }]
        });
    }
}

Note: Ensure you import the Jspreadsheet and jSuites CSS files into your angular.json file.

"styles": [
    "jsuites/dist/jsuites.css",
    "jspreadsheet/dist/jspreadsheet.css"
]

More Angular Examples