fair-rose

virtual items are accordion

I'm struggling with this issue the problem is: I have a huge list of accordions. I need to virtualise them otherwise the browser struggle to handle that. My problem is that whenever I open an accordion this happens. I have also tried to virtualItem.measureElement(ref); whenever the accordion is open or cloesed but nothing change. any idea? here is how i instanciate the list

  const virtualizer = useVirtualizer({
    getScrollElement: () => containerRef.current,
    estimateSize: () => 40,
    count: filteredOptions.length,
    overscan: 5
  });

  const virtualizer = useVirtualizer({
    getScrollElement: () => containerRef.current,
    estimateSize: () => 40,
    count: filteredOptions.length,
    overscan: 5
  });

4 Replies

foreign-sapphire•3y ago

Hi, please update to latest beta 22, there we added suport for observing items for size change. Also in case when children will change it height by clicking better is not to position each item, but wrap it with block and move this around. Maybe something like this https://codesandbox.io/s/async-brook-w2w41g?file=/src/App.tsx

piecyk

CodeSandbox

async-brook-w2w41g - CodeSandbox

async-brook-w2w41g by piecyk using @tanstack/react-virtual, react, react-dom, react-scripts

fair-roseOP•3y ago

WOW amazing I'll try beeta22 and let you know @piecyk just one question why do you apply items[0].start at line 43 on the parent element? that should always be 0 right?

foreign-sapphire•3y ago

Yes, it's the first element of virtual items that should be rendered

fair-roseOP•3y ago

solved thanks

Gaming

Programming

virtual items are accordion

Did you find this page helpful?