Search code examples
javascriptjqueryhtmltabulator

Tabulator table not view properly

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 enter image description here

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

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

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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/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?

Solution

  • 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.