Using Tabulator in Angular 8 all data and headers show in the first column

In Angular 8, I have set up a tabulator-table component (Tabulator) and I am trying to send data from the app.component to the tabulator-table. I am passing the data between the two components using a shared service. The data is being transferred successfully however when I attempt a drawTable() command, I am having an issue where all of the headers and row data are shown in the first column of the Tabulator grid. I have worked on this over the past day and a half so any assistance would be gretly appreciated.

data-table.service.ts `

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataTableService {

  arrayData:any[];
  columnData:any[];

  constructor() { }
}

`

appComponent.html

`
<app-tabulator-table></app-tabulator-table>
`

appComponent.ts

`
import { Component, OnInit } from '@angular/core';
import { DataTableService } from './services/data-table.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'StoresAppUI';

  myTableData: any[] = this.getData()
  myColumnNames: any[] = this.getColumns();
  height: string = '311px';

  get arrayData():any[] {
    return this.dataService.arrayData;
  }

  set arrayData(value : any[]) {
    this.dataService.arrayData = value;
  }

  get columnData():any[] {
    return this.dataService.columnData;
  }

  set columnData(value: any[]) {
    this.dataService.columnData = value;
  }

  constructor(private dataService: DataTableService) {}

  ngOnInit()
  {
    this.dataService.arrayData = this.getData();
    console.log('myTableData => ', this.dataService.arrayData);

    this.dataService.columnData = this.getColumns();
    console.log('myColumnNames = ', this.dataService.columnData);
  }


  getData(): any[]
  {
    let data:any[] = [
      {firstname: "Al", lastname:"Alberts", age:66},
      {firstname: "Bob", lastname:"Banes", age:66},
      {firstname: "Chuck", lastname:"Chandler", age:55},
      {firstname: "Donnie", lastname:"Darwin", age:77},
    ]
    return  data;
  }

  getColumns():any[]
  {
    let cols: any[] = [
      {title: 'First', field:'firstname', width:100},
      {title: 'Last', field: 'lastname', width:100},
      {title: 'Age', field: 'age', width:100}
    ];
    return cols;
  }
}
`

tabulator-table.component.html

`
<div id="my-tabular-table"></div>
`

tabulator-table.component.ts

`
import { Component, Input, OnChanges, SimpleChanges, OnInit } from "@angular/core";
import Tabulator from "tabulator-tables";
import { DataTableService } from "../../services/data-table.service";

/**
 * This is a wrapper class for the tabulator JS library.
 * For more info see http://tabulator.info
 */
@Component({
  selector: "app-tabulator-table",
  templateUrl: "./tabulator-table.component.html",
  styleUrls: ["./tabulator-table.component.css"],
})
export class TabulatorTableComponent implements OnChanges, OnInit {
  @Input() tableData: any[];
  @Input() columns: any[];
  @Input() height: string = "311px";

  get arrayData(): any[] {
    return this.dataService.arrayData;
  }

  get columnData(): any[] {
    return this.dataService.columnData;
  }

  tab = document.createElement("div");

  constructor(private dataService: DataTableService) {}

  ngOnInit() {
    this.tableData = this.dataService.arrayData;
    console.log("tableData (in table) => ", this.tableData);

    this.columns = this.dataService.columnData;
    console.log("columns (in table) => ", this.columns);

    this.drawTable();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.drawTable();
  }

  private drawTable(): void {
    new Tabulator(this.tab, {
      data: this.tableData,
      reactiveData: true, //enable data reactivity
      columns: this.columns,
      layout: "fitColumns",
      width: "600px",
      height: "311px",
    });
    document.getElementById("my-tabular-table").appendChild(this.tab);
  }
}
`

Here is results after showing columns and data being passed to the drawTable() function per Marc's request.

columns
[ { "title": "First", "field": "firstname", "width": 100 }, { "title": "Last", "field": "lastname", "width": 100 }, { "title": "Age", "field": "age", "width": 100 } ] data [ { "firstname": "Al", "lastname": "Alberts", "age": 66 }, { "firstname": "Bob", "lastname": "Banes", "age": 66 }, { "firstname": "Chuck", "lastname": "Chandler", "age": 55 }, { "firstname": "Donnie", "lastname": "Dreary", "age": 77 } ]

After following Oli's post, I realized I needed to move the tabulator.css code into the styles.css at the root of the project. After that, all data is appearing correctly in the table.

Thanks all for the rapid responses.