Tabulator Angular

I'm using Tabulator with Angular. I tryed to create a testing table but it rendered the table like this. It's completely broken. Can you please help me with fixing this issue?

I have imported tabulator css in the index.html using css like this.

<!doctype html>
<html lang="en">
<head>
  <link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>

Here is my angular code.

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {

  tableData: any[] = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
  ];
  columnNames: any[] = [
    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", align:"left", formatter:"progress"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
  ];

  tab = document.createElement('div');

  constructor() {
  }

  ngOnInit(): void {
    var table = this.drawTable()
    
    
    setInterval(() => {
      console.log(table.redraw());
      this.tableData.push({id: this.tableData.length + 1, name: Math.random(), age: Math.round(Math.random()), col: "blue"})
    }, 1000)
  }

  private drawTable(): any {
    var tabulator = new Tabulator(this.tab, {
      data: this.tableData,
      reactiveData:true, //enable data reactivity
      columns: this.columnNames,
      layout: 'fitData',
    });
    
    document.getElementById('my-tabular-table').appendChild(this.tab);

    return tabulator
  }

}