Solid Windowed
Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.
A Solid component. See https://www.solidjs.com/
Usage
Use in the same way as a solid For. Please see: https://www.solidjs.com/docs/latest/api
import Windowed from 'solid-windowed'
let list = []
for (let i = 0; i < 250_000; i++) list.push(i)
export default function YourComponent() {
return (
<div style="height:100%;">
<Windowed each={list}>
{(value, index) => {
return (
<div>
Index in list is {index}, value is: {value}
</div>
)
}}
</Windowed>
</div>
)
}
Install
npm install https://github.com/titoBouzout/solid-windowed.git
or
npm install solid-windowed
How it works?
It renders the first 10 elements of the list, then averages the height and with that in mind, we get the height of the container and render N items. As you scroll we slice the list to show what's supposed to be visible. If our average didn't fill the whole available space, we will add more items till its filled.
Caveats
- You are responsible for setting the height of the container item. Child will be 100%
Alternatives
I started this project without knowing there was already an implementation of this concept
Bugs That Have Been Fixed
The end of the list, seems to be a problematic edge case for the implementation of this concept.
- scrolling to the bottom doesn't render the last few items
- when at the bottom of the list and then maximising to a bigger size, doesn't render previous items
Author
URL
- https://github.com/titoBouzout/solid-windowed
- Playground. Look at solid handling 1.5 million of items and being able to render and scroll them super fast: https://playground.solidjs.com/?hash=-1161667584&version=1.3.7
5 Apr 7, 2021
12 Nov 15, 2022
5 Nov 25, 2022
10 Aug 22, 2022
2 Jan 10, 2022
761 Jan 1, 2023
14 Apr 22, 2022
20 Aug 29, 2022
210 Jan 4, 2023
14 Sep 9, 2022