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?

Both JSfiddle and SO code snippet seems to be working as expected here. — visibleman, Jan 11 '19 at 02:56
@visibleman what browser are you using sir? i check in mozilla and google chrome still having this issue. — dianeryanto, Jan 11 '19 at 03:01
Google Chrome Version 71.0.3578.98 (Official Build) (64-bit) on Windows — visibleman, Jan 11 '19 at 04: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, Jan 11 '19 at 17:35

Oli Folkerd · Accepted Answer · 2019-01-21T22:35:28.117

7

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.

edited Jan 21 '19 at 22:35

answered Jan 12 '19 at 10:23

Oli Folkerd

7,510
1
22
46

Hi Oli thanks for your response, but i still got the problem. when i try redraw using `$('#example-table').redraw(true)` the header is still missing, and i got this response `TypeError: $(...).redraw is not a function`. already include jquery wrapper like this https://imgur.com/a/2lU6zU0/ – dianeryanto Jan 14 '19 at 01:42
i got `TypeError: t.widget is not a function` on `jquery_wrapper.min.js:2:190` too when first load page. am i wrong include the file? or order the file? – dianeryanto Jan 14 '19 at 03:04
you have declared your table using the non-jQuery method, you can't then try and access it using a jQuery selector that won't work. you must call the redraw function on the table variable that you assigned the table to when you created it – Oli Folkerd Jan 16 '19 at 22:25
How to try declared table using jquery method? what i'm try is `$("#example-table").tabulator({ //table setup options });` and getting this error: `TypeError: $(...).tabulator is not a function`, can you give me refference or example? – dianeryanto Jan 21 '19 at 03:21
sir please kindly check my new question in [here](https://stackoverflow.com/questions/54286603/how-to-get-all-row-values-tabulator) – dianeryanto Jan 21 '19 at 09:15
Hello Oli, your link to Quickstart Guide references localhost. Can you please change that to a correct link. Thanks – Danny Jan 21 '19 at 21:16

score -1 · Answer 2 · edited Sep 11 '19 at 17:13

-1

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.

edited Sep 11 '19 at 17:13

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Sep 11 '19 at 16:54

ram

1

Tabulator table not view properly

2 Answers2