Integrate Jspreadsheet CE into Angular applications using the jspreadsheet-ce package. Use @ViewChild to get a reference to the container element and initialize the spreadsheet within the ngAfterViewInit lifecycle hook.
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"
// Create component
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
['Hello', 13123, '', 'Yes', true, '#AA4411'],
['World!', 8, '', 'No', false, '#99BE23']
],
columns: [
{ type: 'text', title: 'Text' },
{ type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
{ type: 'calendar', title: 'Calendar' },
{ type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
{ type: 'checkbox', title: 'Checkbox' },
{ type: 'color', title: 'Color', width: 50, render: 'square' }
]
}],
});
}
}
