Handsontable example

by galvakojis

HTML

<app-root></app-root>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<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';
  
  @Component({
    selector: 'app-root',
    template: `
    <div class="hot">
      <hot-table [settings]="hotSettings"></hot-table>
    </div>
    `,
  })
  class AppComponent {
    hotSettings: Handsontable.GridSettings = {
      data:
        [
          ['A1', 'https://handsontable.com/docs/images/examples/professional-javascript-developers-nicholas-zakas.jpg'],
          ['A2', 'https://handsontable.com/docs/images/examples/javascript-the-good-parts.jpg'],
          ['A3','https://handsontable.com/docs/images/examples/javascript-the-good-parts.jpg'],[],[],[],[],[],[],[]
          ],
      columns: [
        {},
        {
          renderer: function(instance, td, row, col, prop, value, cellProperties) {
            const escaped = Handsontable.helper.stringify(value);
            let img = null;
  
            if (escaped.indexOf('http') === 0) {
              img = document.createElement('IMG');
              img.src = value;
  
              Handsontable.dom.addEvent(img, 'mousedown', function(event) {
                event.preventDefault();
              });
  
              Handsontable.dom.empty(td);
              td.appendChild(img);
  
            } else {
              Handsontable.renderers.TextRenderer.apply(this, arguments);
            }
  
            return td;
          }
        },
        {
        
        },
        {}
      ],
      colHeaders: true,
      rowHeights: 55,
  mergeCells: [
    {row: 2, col: 1, rowspan: 3, colspan: 3}
  ]
    };
  }
  
  // app.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HotTableModule } from '@handsontable/angular';
  
  @NgModule({
    imports:      [ BrowserModule, HotTableModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  class AppModule { }
  
  // bootstrap
  import {...