Tabulator table not view properly

Question

I have a button when the button clicked will show the table (tabulator) but the problem is when button clicked, the table not show properly, table is view but the content isn't display, im need trigger action like resize window or press F12 to show the content.

When button clicked, show nothing

When i press F12, content view but the header is missing (red line)

When i try to test in jsfiddle, header is show but the content isn't (need to resize window to show data)

What i have try is like this :

 $(document).on('click', '#testing', function(){ $('#example-table').show(); }); //define some sample data var tabledata = [ {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"}, ]; //create Tabulator on DOM element with id "example-table" var table = new Tabulator("#example-table", { height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value) data:tabledata, //assign data to table layout:"fitColumns", //fit columns to width of table (optional) columns:[ //Define Table Columns {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"}, ], rowClick:function(e, row){ //trigger an alert message when the row is clicked alert("Row " + row.getData().id + " Clicked!!!!"); }, });

 <link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <button id='testing'>Click this button !!</button> <div id="example-table" style='display:none'></div>

You can check in jsfiddle too, check here

Can someone tell me why it's happen?

Answer 1

This is likely because you are creating the table when it is hidden. Tabulator needs to be visible when it is drawn because the Virtual DOM needs to calculate the lengths of the elements that make up the table to layout the table correctly. a DOM element has no dimensions until it is first made visisble which can lead to some corruption in the table.

The easiest way round this is to call the redraw function on the table immediately after it is made visible.

table.redraw(true);

This topic is covered in detail in the Quickstart Guide on the Tabulator website.

The reason it dosnt happen in Chrome is because chrome implements the ES8 ResizeObserver feature that tabulator can use to determine when the table changes shape or becomes visible. This features is not yet available in other browsers.

Answer 2

I guess table.redraw(true); works for tabulator 4.0 version and above, in case you have lower version of tabulator use table.redraw(); . It happened with me as well, before upgrading to version 4 I have used tableRefernc.redraw() method and it works well, but after upgrading to version 4 it was not working well, so I changed it to tableRefernc.redraw(true) and it works very well.