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="/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="/[email protected]/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src=".3.1.min.js"></script>

<button id='testing'>Click this button !!</button>
<div id="example-table" style='display:none'></div>

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

• javascript
• jquery
• html
• tabulator

• 1 Both JSfiddle and SO code snippet seems to be working as expected here. – visibleman Commented Jan 11, 2019 at 2:56
• @visibleman what browser are you using sir? i check in mozilla and google chrome still having this issue. – dianeryanto Commented Jan 11, 2019 at 3:01
• Google Chrome Version 71.0.3578.98 (Official Build) (64-bit) on Windows – visibleman Commented Jan 11, 2019 at 4:08
• I see it properly in chrome and opera, I see your issue in firefox and edge, so would appear to be browser related – BlackICE Commented Jan 11, 2019 at 17:35
• Think its part of the html where you set display to none – Anonymous Commented Apr 1, 2021 at 17:49

2 Answers 2

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 bees visible. This features is not yet available in other browsers.

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.