Difficulty Identifying the Issue with Tabulator Table Rendering in Angular Component

Question

I'm facing challenges with rendering a Tabulator table within an Angular component. The data (tableData) and columns (tableColumns) are defined in the TypeScript file (test.component.ts), and I've attempted to initialize the Tabulator instance in the ngAfterViewInit lifecycle hook. Despite my efforts, the table doesn't render as expected. I've checked for errors in the console, but no apparent issues have surfaced.

I'm having difficulty pinpointing the problem and would appreciate any guidance or suggestions for troubleshooting and resolving the issue. I would like to showcase the table in the test file as a subcomponent of the form accessed through http://localhost:4200/pages/forms/test.

Thanks in advance for your assistance!

Below is a simplified version of the code of test.component.ts:

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


const persons = [
  {
    id: '1',
    firstName: 'John',
    lastName: 'Smith',
    state: 'Ohio',
  },
  {
    id: '2',
    firstName: 'Jane',
    lastName: 'Doe',
    state: 'Iowa',
  },
  {
    id: '3',
    firstName: 'Bill',
    lastName: 'Great',
    state: 'Hawaii',
  },
  {
    id: '4',
    firstName: 'Ted',
    lastName: 'Adventure',
    state: 'Arizona',
  },
];
@Component({
  selector: 'my-app',
  styleUrls: ['./test.component.scss'],
  templateUrl: './test.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
  exTable: any;
  filterParam: string = '';

  tab = document.createElement('div');

  table_def = [
    { title: 'Id', field: 'id' },
    { title: 'First Name', field: 'firstName' },
    { title: 'Last Name', field: 'lastName' },
    { title: 'Location', field: 'state' },
  ];
  tableData: any[];
  columnNames: ColumnDefinition[];
  constructor() {}

  ngOnInit() {
    this.exTable = new Tabulator(this.tab, {
      height: 130,
      layout: 'fitColumns',
      columns: this.columnNames,
      movableColumns: true,
      data: this.tableData,
    });
    //    this.exTable.setData(persons);
    document.getElementById('ex-table-div').appendChild(this.tab);
  }
  ngAfterViewInit() {
    this.exTable?.setData(persons);
  }
}

and test.component.html code

<p>
    example-table works!
    </p>
    <div id="ex-table-div"></div>
    

I expected the Tabulator table to render successfully, displaying the data as specified in tableData with the defined columns from tableColumns.

Actual Result: Unfortunately, the table did not render as expected. Despite thorough checks in the console for errors, I could not identify any apparent issues. The table remains unrendered, and I'm seeking guidance on what might be causing this problem or any suggestions for effective troubleshooting.

NPM Version 6.12.0