solidjs-community / solid-primitives

A library of high-quality primitives that extend SolidJS reactivity.
https://primitives.solidjs.community
MIT License
1.27k stars 126 forks source link

virtual: <VirtualList> needs listClass prop #698

Open andraaspar opened 1 month ago

andraaspar commented 1 month ago

Describe The Problem To Be Solved

I've found that when using <VirtualList> I could not style the list <div>. The styles I needed were:

display: flex;
flex-flow: column;
width: 100%;

Suggest A Solution

I think the right way is to let us have an optional listClass prop so we can style the list directly. This will not break any existing implementations. Like this:

<div
    class={props.listClass}
    style={{
        position: 'absolute',
        top: `${getFirstIdx() * props.rowHeight}px`,
    }}
>
    <For
        fallback={props.fallback}
        each={items().slice(getFirstIdx(), getLastIdx()) as any as T}
    >
        {props.children}
    </For>
</div>
thetarnav commented 1 month ago

First of many issues on virtual I expect, this is why I hate shipping jsx here. The user should be in full control of rendering. Well listClass seems like an appropriate solution, if you submit a PR, I'll probably merge it.