T
TanStack•3y ago
harsh-harlequin

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
exotic-emerald
exotic-emerald•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
eastern-cyan
eastern-cyan•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?