How to run tabulator 6.2.5 with Angular 13

Hi,

I try to use tabulator with Angular.
I used this docu https://tabulator.info/docs/6.2/quickstart

with
npm install tabulator-tables --save
and
npm i --save-dev @types/tabulator-tables

I also tried the Angular Setup https://tabulator.info/docs/6.2/frameworks#angular.

The documentation is not really actuall.

The table does not work. Can anyone help?

Maybe the css does not work.

Here is my code

ts

import { Component, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import {Tabulator} from 'tabulator-tables';

@Component({
   selector: 'app-table',
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.scss'],
})
export class TableComponentTest implements OnChanges, OnInit {
   tab = document.createElement('div');
   innerGrid;
   constructor() {}
 
ngOnChanges(changes: SimpleChanges): void {changes=changes}

ngOnInit(): void {
  this.drawTable(); //Dom noch nicht gezeichnet
}

drawTable(): void {
  let parentDiv = document.getElementById('inner-table');

  this.innerGrid = new Tabulator(this.tab, {
    data: this.getData(),
    height: '100%',
    layout: 'fitColumns',
    columns: this.getColumns(),
    resizableRows: true,
    movableColumns: true,
    clipboard: true,
    clipboardPasteAction: 'replace',
  });
  parentDiv.appendChild(this.tab);
}

getColumns() {
  return [
    {
      title: 'Rating',
      field: 'rating',
    },
    {
      title: 'Name',
      field: 'name',

    }
  ];
}

getData(): any {
  return [
    {
      id: 1,
      name: 'Oli Bob's "',
      rating: 1,
    },
    {
      id: 2,
      name: 'Mary May',
      rating: 2,
    }
  ];
}

}

HTML

<div id="example-table"></div>

SCSS
@import "tabulator-tables/dist/css/tabulator_modern.css";