Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.3.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.3.0/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/scripts/helpers.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/zone.js@0.9/dist/zone.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/compiler@8/bundles/compiler.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/core@8/bundles/core.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/common@8/bundles/common.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@8/bundles/platform-browser.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@8/bundles/platform-browser-dynamic.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/angular@12.0/bundles/handsontable-angular.umd.min.js"></script>

<app-root></app-root>

TypeScript

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { HotTableComponent } from '@handsontable/angular';

@Component({
  selector: 'app-root',
  template: `
  <div>
    <hot-table
      [settings]="settings"
      height="auto"
      licenseKey="non-commercial-and-evaluation">
    </hot-table>

  </div>
  `,
  styles: [
  `
  ::ng-deep .handsontable {
    td {      
    	color: green;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      
      &.current {
      	color: red;
        word-break: break-word !important;
        text-overflow: unset !important;
        white-space: pre-line !important;
      }
    }
  }
  `
  ]
})
class AppComponent {
	editingEnabled = false;
  settings = {
    colheaders: true,
    rowHeaders: true,
  	columns: [
     { data: 'id', title: 'ID' },
     { data: 'name', title: 'Full name', width: 400},
     { data: 'address', title: 'Street name', width: 300 }
    ],
    data: [
      {id: 1, name: 'Ted Right', address: 'Wall Street'},
      {id: 2, name: 'Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest Frank Honest  ', address: 'Pennsylvania Avenue'},
      {id: 3, name: 'Joan Well', address: 'Broadway'},
      {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
      {id: 5, name: 'Michael Fair', address: 'Lombard Street'},
      {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
      {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
      {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
    ]
  }
  newColumnIndex = 0;
  newColumns = [
  { data: 'zipCode', title: 'ZIP code' }, { data: 'telephone', title: 'Tel' }, { data: 'age', title: 'Age' }, { gender: 'gender', title: 'Gender' }, { data: 'diet', title: 'Diet' }];
	
  
 ...