Help request: how to do infinite tables about svelte-infinite-loading

[mike-hogan]

Certainly, thanks. This is a total mess though, sorry

https://svelte.dev/repl/e02305d6ddf341f5ae011d031a11f579?version=3.44.1

[jonasgeiler]

Sorry I couldn't respond yesterday, was busy.
Anyways:

Here is your fixed REPL: https://svelte.dev/repl/70aa77f9aff048bebedef20ad68e4eae?version=3.44.2

I think you main problem was using list.push(...) instead of having an assignment like list = [...list, newItem]. See here for more info.

Then, for some reason, putting the <InfinteLoading /> component inside a <tr> doesn't work. I've changed it to <div> and then it actually appeared. Probably an issue that could be solved with CSS - or just use a <div>.

Then, always add let:style {style} to the element with slot="item". This makes sure the items are rendered correctly.

There are some other improvements, like putting <tbody> outside the virtual list, and adding width: 100% to the .tall class. But these aren't completely essential.

Also, I'm aware that the documentation sucks a bit... But I'm too lazy to make it better and also moved on to some other projects 😅
Sometimes, tho, the documentation of the original Vue.js library might help: vue-infinite-loading.
Or the documentation of the original React.js library for the virtual list: react-tiny-virtual-list.

I hope that helps!

[mike-hogan]

Wow, this is unbelievable, thanks! Works like a charm

[jonasgeiler]

Could you provide a Svelte REPL with your current implementation? Maybe I can try to get it working.

[jonasgeiler]

Happy to help! 😊