Handsontable example

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: [
    {
      value: null,
      __children: [
        {value: 5},
        {value: 6},
        {value: 7},
      ]
    },
    {
      __children: [
        {value: 15},
        {value: 16},
        {value: 17},
      ]
    }
  ],
      colHeaders: true,
      rowHeaders: true,
      afterRender: function(){
      	//console.log(this)
      },
      nestedRows: true,
      columnSummary: function() {
        var endpoints = [];
        var nestedRowsPlugin = this.hot.getPlugin('nestedRows');
        var getRowIndex = nestedRowsPlugin.dataManager.getRowIndex.bind(nestedRowsPlugin.dataManager);
        var nestedRowsCache = null;
        var tempEndpoint = null;
        var resultColumn = 0;
        console.log(this.hot.getPlugin('nestedRows'));
    
        if (nestedRowsPlugin.isEnabled()) {
          nestedRowsCache = this.hot.getPlugin('nestedRows').dataManager.cache;
        } else {
          return;
        }

        for (var i = 0; i < nestedRowsCache.levels[0].length; i++) {
          tempEndpoint = {};

          if (!nestedRowsCache.levels[0][i].__children || nestedRowsCache.levels[0][i].__children.length === 0) {
            continue;
          }

          tempEndpoint.destinationColumn = resultColumn;
          tempEndpoint.destinationRow = getRowIndex(nestedRowsCache.levels[0][i]);
          tempEndpoint.type = 'sum';
          tempEndpoint.forceNumeric = true;
         ...