Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-common.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-forms.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div>
  <example3-binding-data></example3-binding-data>
</div>

TypeScript

import { enableProdMode } from '@angular/core';

enableProdMode();

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

interface Person {
  id: number;
  name: string;
  address: string;
}

@Component({
  selector: 'example3-binding-data',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class Example3BindingDataComponent {

  readonly data: Person[] = [
    { id: 1, name: 'Ted Right', address: '' },
    { id: 2, name: 'Frank Honest', address: '' },
    { id: 3, name: 'Joan Well', address: '' },
    { id: 4, name: 'Gail Polite', address: '' },
    { id: 5, name: 'Michael Fair', address: '' },
  ];

  readonly gridSettings: GridSettings = {
    colHeaders: true,
    height: 'auto',
    width: 'auto',
    nestedHeaders: [
      ['A', { label: 'B', colspan: 8 }, 'C'],
      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],
      [
        'H',
        { label: 'I', colspan: 2 },
        { label: 'J', colspan: 2 },
        { label: 'K', colspan: 2 },
        { label: 'L', colspan: 2 },
        'M',
      ],
      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],
    ],
    autoWrapRow: true,
    autoWrapCol: true
  };
}



/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
...