solid-windowed's Introduction

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 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%. For example using this component on the body and having <!DOCTYPE html> will require to set the height of html and body to 100%. See #2 and https://stackoverflow.com/questions/32214152/why-does-height-100-work-when-doctype-is-removed

Alternatives

I started this project without knowing there was already an implementation of this concept

https://github.com/minht11/solid-virtual-container

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

https://github.com/titoBouzout

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=430573707&version=1.4.1

solid-windowed's People

Contributors

Stargazers

Watchers

solid-windowed's Issues

Playground issue

Playground example https://playground.solidjs.com/?hash=-1161667584&version=1.3.7 doesn't load.

Displays error

/main.tsx: A numeric separator is only allowed between two digits. (10:23)

8 | // lets render a list with 1 and a half million of items
9 | let list = [];
> 10 | for (let i = 0; i < 1_500_000; i++) list.push(i);
| ^
11 |
12 | return (
13 | <div style="height:100%;">

When using HTML5 (`<!DOCTYPE html>`), solid-windowed requires that html/body have height set to 100%

Thanks for sharing your library. I think it fits my current project well.

It seems like Windowed requires this styling, when it's used in an HTML5 document:

html, body {
    height: 100%;
}

I realized that this issue may not be apparent in Solid Playground, because there are base styles there, including html, body { height: 100% }.

What happens without it? Well, it can be a blank page. What surprised me at first is that there were no elements being rendered by the <For> loop inside <Windowed>, in my local code... until I removed <!DOCTYPE html> from my index.html! I think it's because solid-windowed's calculations were deciding to render zero elements.

Thinking about a solution: maybe just adding a note to the README with that chunk of CSS?

Recommend Projects

titobouzout / solid-windowed Goto Github PK