T
TanStack•3y ago
other-emerald

pass array to rowVirtualizer

hey, How do you pass your own array to rowVirtualizer? like I want to pass my list to be virtualized. but all the examples on the website is just about rendering a simple div with virtualRow.index prop. I want to pass a component with its own props. How do you do that? :reactvirtual:
2 Replies
extended-salmon
extended-salmon•3y ago
Hi, virtualizer doesn't know anything about your data, by passing count we know how big the list is and you can access elements from virtual item index as in examples
stormy-gold
stormy-gold•2y ago
This is how I'm doing it in a component that receives data from a cms: 
<ol
    ref={tableContentRef}
    style={{ height: `${rowVirtualizer.getTotalSize()}px`, }}
>
    {virtualItems.map(virtualItem => {
        return (
            <li
                key={virtualItem.key}
                ref={rowVirtualizer.measureElement}
                className="scroll-mt-[calc(50vh-11vw)]"
                style={{
                    height: `${virtualItem.size}px`,
                }}
            >
                <TableItem exhibition={exhibitions[virtualItem.index]} />
            </li>
        )
    })}
</ol>
<ol
    ref={tableContentRef}
    style={{ height: `${rowVirtualizer.getTotalSize()}px`, }}
>
    {virtualItems.map(virtualItem => {
        return (
            <li
                key={virtualItem.key}
                ref={rowVirtualizer.measureElement}
                className="scroll-mt-[calc(50vh-11vw)]"
                style={{
                    height: `${virtualItem.size}px`,
                }}
            >
                <TableItem exhibition={exhibitions[virtualItem.index]} />
            </li>
        )
    })}
</ol>

Did you find this page helpful?