table "swallows" some rows after replaceData() or setData() is executed

[xtlc]

Describe the bug See code. after 5 sec the table correctly updates, but 5 rows are missing. The rows can be found when using the filter function on serial number, so information is "still there" in the virtual DOM I guess. So whenever I click on a new page the last 5 rows. The page size does not matter in that regard, setting it to 50 just makes 20 rows shown and 30 disappear.

I checked additionally that the API always returns the same amount of items, also the number of pages available is not influenced by this.

the height: 100% attribute seems to not influence the change.

workaround i am not happy with Set height: "1000px. I would like to avoid this, because a fixed number of 25 rows without scrolling works when the page loads first.

Tabulator Info

• 4.9.3

Code

// ********** columns for the table ********** //
cols = [{field: "status", formatter: LED, headerSort:false, maxWidth: "40"},
        {title: "serial", field: "serial", headerFilter: "input"},
        {title: "fw", field: "fw_version"},
        {field: "version"},
        {title: "pcb", field: "pcb.name"},
        {title: "sdcard", field: "sdcard.name"},
        {title: "pi", field: "device_model", formatter: filterPI},
        {title: "shipment", field: "shipment.name", formatter: shipmentSHRT, tooltip: true},
        {headerSort:false, formatter: editBTN, cellClick: editClkd, maxWidth: "40"},
        {headerSort:false, formatter: printBTN, tooltip: prntToolTip, width: "40"},
        {headerSort:false, formatter: cfgBTN, cellClick: cfgClkd, width: "40"}]

// ********** Creating the tabulator instance ********** //
var table = new Tabulator("#table", {height:"100%", pagination: "local", paginationSize: 25, columns: cols,});
setInterval(() => {table.replaceData()}, 5000);

Expected behavior having 25 colums on every page but the last page

Screenshots

Desktop (please complete the following information):

• win10
• chrome 92.0.4515.159
• ff 91.0.2

[bornova]

Hi @xtlc, I found the same question on SO and I will suggest the same solution. The culprit may be the Virtual DOM. As a workaround, try disabling the virtual DOM (virtualDom: false) or set the virtualDomBuffer to a high number bigger than the visible table height. virtualDomBuffer: 2000 for example. Not sure if it will fix your issue but may be worth a try.

[xtlc]

Yes, this was my question :) Changing that did not lead to anything unfortunately. This is why I asked again here. Could you imagine that upgrading to V5 (once released) would be an option to get rid of the problem?

[jaguarxii]

this also happens in version 5.0.7

[olifolkerd]

Hey All,

This was an issue with the way the virtual DOM was handling redraw events, this should be fixed in this weekends patch release.

If you are still having issues after the release, please create a JS fiddle that demonstrates the issue as i currently cannot replicate it on my machine.

Cheers

Oli :)