Only loads first batch of table rows.
I just found and tried this little lib, but can't get it to work properly. Here's the thing:
I have an array of 1000 strings of this type:
const rowsArr=['<tr><td class=\"fileUrl\"><img src=\"blob:file:///3ac975e4-355d-4bc5-8c6e-bfc8a3c4a9a9\" /></td><td class=\"lastModified\">1575994775000</td><td class=\"name\">1.png</td><td class=\"size\">1.67 kb</td><td class=\"type\">image/png</td></tr>', ...]
I put this into a table (which is 300px high and lives somewhere in my browser window (not full-width/height).
Here's the HTML:
<table>
<tbody class="ttscroller" class="clusterize-content">
</tbody>
</table>
The library only renders the first batch of lines (approx 58) of <tr> and then stops. No matter if I scroll down or not, there are only approx 58 rows drawn/loaded.
This is all code:
function stringToHTML(html) {
var template = document.createElement('template');
template.innerHTML = html.trim();
return template.content.firstChild;
}
function renderMessage(message) {
return stringToHTML(message);
}
const vsoptions = {
estimatedItemHeight: 51,
bypass: false
}
const virtualScroller = new VirtualScroller(
document.querySelector(".ttscroller"),
rowsArr,
renderMessage,
vsoptions
);
I'm using this DOM-lib from 'unpkg': https://unpkg.com/virtual-scroller@1.x/bundle/virtual-scroller-dom.js
BTW: If I add window.VirtualScrollerDebug = true; and throw my 1000 rows at the library, my machine gets unuseable for a while and the CPU-load jumps to around 100% (on a 6-core MacBookPro 2018).
I hope that was detailed enough for you to reproduce.
andy