Virtual Dom not completely rendering when used by default in Remote Paginated Tables

[tentus]

Describe the bug The virtual dom is being used for tables using remote pagination, which becomes problematic after navigating to another page of results, because it does not render all the rows. This applies to navigating back to the first page.

Explicitly disabling virtualDom or manually redrawing will work around the issue, but it seems like the rendermode on remotely paginated responses should be defaulting to classic, not virtual.

Tabulator Info

• version 4.9.3

Working Example https://jsfiddle.net/ph27xuc0/

To Reproduce

1. Open fiddle above
2. Click on page 2
3. Observe that the rows after index 44 are not rendered

Expected behavior All rows should be rendered.

Desktop (please complete the following information):

• OS: macOS
• Browser: reproduced in Chrome, Firefox, and Safari
• Versions 88, 86, and 13 respectively

Smartphone (please complete the following information):

• Device: LG V30
• OS: Android 9
• Browser: Chrome
• Version: 89

[rekleness]

Hi, to avoid this behavior, you can use virtualDomBuffer option https://jsfiddle.net/65g3dfyp/

[tentus]

Yes, so long as you choose a magic number for the buffer size greater than the height of the rows. I would strongly advise anyone looking at this thread to avoid such indirect solutions.

[Bechma]

This same issue happens to me, I was doing some experiments with some examples from the docs(I'm new using this library[love it btw]) and with this configuration and having my backend sending random data:

let table = new Tabulator('#tabular', {
    layout: "fitColumns",
    ajaxURL: "/api/progressive",
    ajaxFiltering: true,
    clipboard: true,
    // virtualDom: false, // with this setting, I have no problems
    pagination: "remote",
    paginationSize: 50,
    paginationSizeSelector: [20, 50, 100, 500],
    paginationInitialPage: 1,
    placeholder: "No Data Set",
    movableColumns: true,
    resizableRows: true,
    columns: [
        { title: "Name", field: "name", sorter: "string" },
        { title: "Progress", field: "progress", sorter: "number", formatter: "progress" },
        { title: "Gender", field: "gender", sorter: "string" },
        { title: "Rating", field: "rating", formatter: "star", hozAlign: "center" },
        { title: "Favourite Color", field: "col", sorter: "string" },
        { title: "Date Of Birth", field: "dob", sorter: "date", hozAlign: "center" },
        { title: "Driver", field: "car", hozAlign: "center", formatter: "tickCross", sorter: "boolean" },
    ],
});

The first page looks good with all 50 rows showing it, but the problem is when I click "Next" or page 2, that will only show the first 20 results :(! the 3rd page shows again all 50 rows but the 4th again has same issue, just 20 rows...

Interesting enough, when I click on a button that has this listener(got it from the examples), the table shows all 50 rows

document.getElementById("print-table").addEventListener("click", function () {
    table.print(false, true);
});

[olifolkerd]

Hey All,

This should be resolved in the 5.x releases

Cheers

Oli :)