Handsontable example

by Jens Kühn

HTML

<app-root></app-root>

CSS

</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/7.4.2/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zone.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/compiler@7/bundles/compiler.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/core@7/bundles/core.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/common@7/bundles/common.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@7/bundles/platform-browser.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@7/bundles/platform-browser-dynamic.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/bundles/handsontable-angular.umd.min.js"></script>

TypeScript

// app.component.ts
  import { Component } from '@angular/core';
  import * as Handsontable from 'handsontable';
  import { HotTableRegisterer } from '@handsontable/angular';
  
  @Component({
    selector: 'app-root',
    template: `
    <div class="hot">
      <hot-table [hotId]="id" [settings]="hotSettings"></hot-table>
    </div>
    <br>
    <button (click)="swapHotData()">Load new data!</button>
    `,
  })
  class AppComponent {
    private hotRegisterer = new HotTableRegisterer();
    id = 'hotInstance';
    hotSettings: Handsontable.GridSettings = {
      data: Handsontable.helper.createSpreadsheetData(4, 4),
      colHeaders: true,
      renderer: function(instance, td, row, col, prop){
      	Handsontable.renderers.HtmlRenderer.apply(this, arguments);
        td.style.fontWeight = 'bold';
        td.style.color = 'green';
        td.style.background = '#CEC';
        td.innerHTML = '<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/81/drum-with-drumsticks_1f941.png" style="width:30px">' + td.innerHTML
      }
    };
  
    swapHotData() {
      this.hotRegisterer.getInstance(this.id).loadData([['new', 'data']]);
    }
  }
  
  // app.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HotTableModule } from '@handsontable/angular';
  
  @NgModule({
    imports:      [ BrowserModule, HotTableModule.forRoot() ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  class AppModule { }
  
  // bootstrap
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });