README.md

Jspreadsheet with Angular

Style

Make sure import the CSS and JS classes in your angular.json file

"styles": [
  ...
  "./node_modules/jspreadsheet-ce/dist/jexcel.css",
  "./node_modules/jsuites/dist/jsuites.css"
],
"scripts": [
  "./node_modules/jspreadsheet-ce/dist/jexcel.js",
  "./node_modules/jsuites/dist/jsuites.js"
]

HTML FILE

<div #spreadsheet></div>

Typescript file

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as jspreadsheet from 'jspreadsheet-ce';

@Component({
  selector: 'app-jexcel-spreadsheet',
  templateUrl: './jexcel-spreadsheet.component.html',
  styleUrls: ['./jexcel-spreadsheet.component.css']
});

export class JexcelSpreadsheetComponent implements OnInit, AfterViewInit {
  @ViewChild('spreadsheet') spreadsheet: ElementRef;
  constructor() { }

  var data = [
    ['Mazda', 2001, 2000],
    ['Pegeout', 2010, 5000],
    ['Honda Fit', 2009, 3000],
    ['Honda CRV', 2010, 6000],
];

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    jspreadsheet(this.spreadsheet.nativeElement, {
      data: this.data,
        columns: [
          { title: 'Model', width: 300 },
          { title: 'Price', width: 80 },
          { title: 'Model', width: 100 }
      ],
      minDimensions: [10, 10]
    });
  }
}