Not An Issue (Virtual Scroller Grid Works Without GetColumnsCount)

[David Asamoah]

Hello. This is not really an issue per se. But I don't know which way to inform you. I was trying to use the GetColumnsCount props to render my items in grid format. But I realized that adding a flex flex wrap properties to the VirtualScroller itself and setting each virtual scroller item CSS property to flex-basis50% works even without the GetColumnsCount props

For example.

<VirtualScroller 
  items={files}
  className="flex flex-wrap"
  itemComponent={ItemRender}
 />

on ItemRender

    const ItemRender = memo(({item, itemIndex}) => {
        return (
          <div style={{
            width: window.innerWidth / 2,
            height: window.innerHeight / 2
          }}>
            {renderFiles(item, itemIndex)}
          </div>
        )
    });

When I checked my browser inspector tool, everything is fine. And notice I did not use GetColumnsCount props.

I just want to know if omitting this props can cause any performance issues with regard to how VirtualScroller calculate the items before render.

Thanks.

[Nikolay]

Hi.

I just want to know if omitting this props can cause any performance issues with regard to how VirtualScroller calculate the items before render.

I dunno if it even works without specifying the columns count.
I think GetColumnsCount should always be defined when using a multi-column layout.

[David Asamoah]

Hi.

I just want to know if omitting this props can cause any performance issues with regard to how VirtualScroller calculate the items before render.

I dunno if it even works without specifying the columns count. I think GetColumnsCount should always be defined when using a multi-column layout.

Yeah. I saw in one of your reply to an issue that VirtualScroller does not know how to work with non-deterministic layouts. I also realized that when I added the GetColumnsCount, it helped VirtualScroller to understand how to calculate the items properly in the dom. Thanks for this awesome library.