Search code examples
angulartabulator

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? Issue image

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

<!doctype html>
<html lang="en">
<head>
  <link href="https://unpkg.com/[email protected]/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
  }

}
Solution

  • This issue is caused by the data being loaded into the table before it is made visible on the DOM.

    There are several ways to resolve this.

    Upgrade Version

    You could upgrade to a later version of Tabulator. as of version 4.9 Tabulator was able to detect when its visibility changed and would self correct this issue.

    Redraw

    You could call the redraw function when you make the table visible:

    table.redraw();

    Set Data

    You could set the table data after the table has been made visible, by passing the data array to the setData function

    table.setData(data);