Tabulator: When scrolling through a table, rows disappear and it becomes empty

[VeraVershinina]

Describe the bug
When scrolling through a table, rows disappear and it becomes empty

Tabulator Info

• version of Tabulator 4.4

Working Example
https://jsfiddle.net/pkosorotov/h23g5e49/18/

To Reproduce
Steps to reproduce the behavior:

1. Scroll the table up and down
2. See the error

Expected behavior
Rows remain in the table and are displayed as you scroll.

Screenshots
https://prnt.sc/ppisxr
https://vimeo.com/368475669

Desktop (please complete the following information):

• OS: windows 10
• Chrome browser
• version 78.0.3904.70

[olifolkerd]

Hey @VeraVershinina

your JS fiddle doesnt even load im afraid, it just gives me a blank page :(

[VeraVershinina]

Hey @olifolkerd
I don't know why( Try again please!
https://jsfiddle.net/pkosorotov/h23g5e49/18/

[Nyut0n]

@VeraVershinina it's because you include the tabulator js and css files from your own webserver, which is not reachable from public internet apparently.
use the official cdn links instead:
https://unpkg.com/[email protected]/dist/css/tabulator.min.css
https://unpkg.com/[email protected]/dist/js/tabulator.min.js

[VeraVershinina]

@Nyut0n thank you!
@olifolkerd try this please https://jsfiddle.net/pkosorotov/h23g5e49/19/

[olifolkerd]

@VeraVershinina

That is a very wide table you have there!

I think the title of this issue might be a bit misleading. no rows are deleted, you are just occasionally getting some whitespace at the bottom if you scroll fast, which is you scroll again you will get the rows back.

it is probably just the virtual dom buffer struggling to adapt to the wide range of cell heights. if you try manually overriding it using the virtualDpmBuffer option. set it to three times your table height and that should hopefully solve your issue:

var table = new Tabulator("#example-table", {
    virtualDomBuffer:300, //set virtual DOM buffer to 300px
});

I hope that helps,

Cheers

Oli :)

[olifolkerd]

Hey @VeraVershinina

Did adjusting the buffer help resolve your issue?

Cheers

Oli :)

[VeraVershinina]

Hey @olifolkerd
Thank you for advise! I'll write you later
I did as you said, but haven't tested yet

[VeraVershinina]

@olifolkerd
No, it's not help(((

[britvik]

@VeraVershinina try adding tabulator.redraw(true); after you initialize the tabulator. I had the same issue in IE and this helped me.

[VeraVershinina]

@britvik thank you very much! That helped!