Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Bottom Rows Disappear
See original GitHub issueOriginally I had labelled this ticket as bottom rows disappear on fast scroll, but as you can see with my comment below I’m also experiencing the same issue when the window is much larger (without even scrolling).
When scrolling rather quickly, the bottom rows are disappearing/showing as white space.
I’m using the stock standard 4.2.1 template.
I have tried this with large and small data sets alike, still the same problem. There are two screen shots attached to demonstrate.
Table construct is below.
var table = new Tabulator
(
"#example-table",
{
height:(window.innerHeight)-20, // I need a slim buffer before the footer of my window
headerFilterPlaceholder: '',
selectable:1,
data: [**Data** ] ,
dataTree:true,
dataTreeStartExpanded:true,
dataTreeBranchElement: false,
dataTreeChildIndent: 25,
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !0,
layout:"fitColumns",
columns:[ **Columns** ],
rowFormatter:function(row)
{
var rowColor = row.getData().color
row.getElement().style.backgroundColor = rowColor;
},
}
);
I have tested this on both IE and Safari.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Hi,
I would like to reopen this issue, as I’m experiencing the same problem. I have a large table with a few 1000 rows. Upon loading it looks fine, and if I scroll slowly, it remains ok. When I scroll faster however, the bottom rows disappear.
Before scroll:
After scroll:
The table construction is really simple (There is only a 100 rows in this example, but it illustrates the issue):
This is on Firefox and Tabulator 4.2.3
Edit: Just to make @olifolkerd 's answer clear. If I understand correctly, after the data changes, a redraw is required (he mentions resizing, but I assume this refers to resizing the amount of data, not the physical table size, which is what I originally misunderstood.) To fix my code above I had to add:
after
This solved the problem, and it is working fine now.
Thanks for the reply @olifolkerd
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . EDIT: I did see that you specifically mentioned
redrawfunction. I just wanted to know if this will cause any performance issues or can fail sometimes. Also, wanted to verify from you that the way I’m using it is correct. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .So, are you suggesting that a
redraw()should be enough to handle this or there is a specificresizefunction available? I did it like this:This seemed to work (although, it didn’t work the first time but worked after a
CTRL+F5) but I’m not sure if this the best way or is it working just by fluke and may fail in some edge cases! Do I also need to add an event listener for each.tabulator-data-tree-controlto make sure a redraw is done on every expand/collapse? To achieve that, I had something like below in mind:Is there a specific
resizecall available likeredrawthat must be called. From docs, I could only find aboutautoResize:true, // auto resizing of tablesetting in available in table configuration, which I doubt is what you were suggesting. Anyway, I believe that it is set totrueby default. If this not how it must be done, can you point me in right direction?