https://github.com/jspreadsheet/example-with-angular

https://github.com/jspreadsheet/example-with-angular

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jspreadsheet/example-with-angular
• Owner: jspreadsheet
• Created: 2020-04-17T18:20:14.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T02:40:01.000Z (over 3 years ago)
• Last Synced: 2023-03-05T17:33:50.255Z (over 3 years ago)
• Language: TypeScript
• Size: 564 KB
• Stars: 10
• Watchers: 2
• Forks: 4
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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]

    });

  }

}