virtual
virtual copied to clipboard
TanStack
virtualizer.getVirtualItems() return zero items for vanilla js project
Describe the bug
I need to implement virtual list in vanilla js. I used this approach:
<script type="module" defer>
import { Virtualizer } from 'https://cdn.jsdelivr.net/npm/@tanstack/[email protected]/+esm';
// other code...
// Initialize the virtualizer
const virtualizer = new Virtualizer({
debug: true,
count: 10000, // The number of items in the list
getScrollElement: () => container,
estimateSize: () => 50, // The estimated size of each item
overscan: 5, // How many items to render outside of the viewport
});
// other code...
const items = virtualizer.getVirtualItems();
// items.length always === 0
</script>
No matter what I do, the array of items is always empty. But virtualizer.measurementsCache.length === 10000.
Your minimal, reproducible example
https://codepen.io/Dugnist/pen/LYveoXQ
Steps to reproduce
<script type="module" defer>
import { Virtualizer } from 'https://cdn.jsdelivr.net/npm/@tanstack/[email protected]/+esm';
</script>
const virtualizer = new Virtualizer({
debug: true,
count: 10000, // The number of items in the list
getScrollElement: () => container,
estimateSize: () => 50, // The estimated size of each item
overscan: 5, // How many items to render outside of the viewport
});
3
const items = virtualizer.getVirtualItems(); // -> []
Expected behavior
const items = virtualizer.getVirtualItems() should return array with more than zero items
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
codepen
tanstack-virtual version
TypeScript version
vanilla js
Additional context
No response
Terms & Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
@Dugnist you need to call virtualizer._willUpdate() that will register scroll events and rect size detection.
I'm using solid, I had the same problem when I tried to update the package, so I went back to the one I was using until then, 3.0.0-beta.6, and it works perfectly. Waiting to find out why.
having same problem on a nextJs project with latest version (3.5.1)
@lucjdo can you create simple stackblitz example?
having same problem on a nextJs project with latest version (3.5.1)
@lucjdo can you create simple stackblitz example?
@piecyk sorry my bad, I was trying to use it with another library and the parent ref wasn't accurate, that was causing getVirtualItems() to return a empty array
I used setTimeout(() => setParentRef(el), 100) to set parentRef to solve the issue
