Tabulator: table starts collapse inside a tab

[aballeras01]

Hello,

I have several tabs and each tab contains a table. The first tab has its own data set but the subsequent tabs share one data set. On the 2 to nth tab, the table renders collapse. Only when I sort a header does the entire data show. Any ideas why this is happening.

javascript:
function facilityTable(facilityName, dataList) {
var bedRoom = function (value, data, type, params, component) {
return (data.bedrm + " Bed " + data.bedbed);
}
$('#facDataDiv_'+facilityName).tabulator({
data: dataList,
pagination: "local",
paginationSize: 15,
layout: "fitColumns",
columns : [
{title: "IF", field: "", headerSort: false, align: "center", width: 20, formatter:"html"},
{title: "Name", field: "bedpat", formatter:"textarea"},
{title: "Nurse Unit", field: "bedunt"},
{title: "Room", field: "bedrm", mutator: bedRoom}
],
initialSort:[
{column:"Room", dir:"asc"}]
});
}

After I sort the column:

Thank you in advance for any help.

Alfredo.

[Rodbjartson]

Hey!
_Why does this happen?_
@olifolkerd might answer this the best way. It has something to do with certain elements that get rendered, while the table itself when it is out of view does not get rendered as it should. Maybe this can be fixed in a future release?

_How to fix this?_

$("#example-table").tabulator("redraw", true);

Whenever you click a tab, call this function(for the correct table of course).

Now true triggers a full rerender of all data as well, so I would try using false first and see if that is enough. Then only the table layout itself redraws $("#example-table").tabulator("redraw", false);

[aballeras01]

Thanks Rodbjartson, I added an event when the tab changed and redraw the table which fixed the issue.

[olifolkerd]

Hey @Rodbjartson

You are on the money there,

Sadly there is no way to fix this on most browsers at present, it is an inherent limitation of the way that browsers generate the DOM.

Basically elements have no dimensions until they are first rendered and visible on the DOM, ie no height/width etc.

In order for Tabulator to calculate how big columns and rows need to be to fit on the screen it needs to know what dimensions they have, if the table is not visible when they are added it dosnt know how big to make them to fit properly so they get all scrunched up like that.

Sadly in most browsers there is no way of knowing when an element becomes visible so there is no way to automatically trigger the redraw when the element is made visible, hence you needing to call the redraw function yourself,

BUT there is hope on the horizon... es8 introduced the concept of the ResizeObserver, this allows elements to know when they have been resized (similar to the window onResize event but much snazzier). Chrome has already implemented this, and so Tabulator takes full advantage of it in chrome, but it is not available in the other browsers yet, so it is now a matter of twiddling our thumbs till the other browsers implement the functionality.

I hope that adds a bit of clarity to the issue.

Cheers

Oli :)