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
$ npm install jspreadsheet
Examples
Online spreadsheet with Angular
A basic angular spreadsheet with export to XLSX.
Online XLSX editor with Angular
Sample angular code
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
@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("OThmNWFmMzQ2ODdjY2Y1NWE4MGU1ODAzN2NkMzRlMThjZjQ0MGRhZTM0OTMxOGE0ZDhmMmM1MmRiZmM0YzhjNTg2ZDE4NDYyNWQzYmQ1YTY5ZTQ0MDJlZDI1NzE4OGNhOTk4N2ZkMzRlMGE3NDZmYmNjMTNmZTU2ZWFhZTlmNGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNNRGN5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==");
// 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"
],