How to keep lane order in masonry grid for items based on their original index

[ryuoryuo]

Hi. I use useWindowVirtualizer for masonry grid, and I have a problem: my items are not ordered in the same way as they are placed in the original array. For example:

lanes is set to 4.

{virtualizer.getVirtualItems().map((virtualRow) => {
    virtualRow.index // shows 4
    virtualRow.lane // shows 1 (but I want it to be 0)
...

return <div
              key={virtualRow.index}
              data-index={virtualRow.index}
              ref={virtualizer.measureElement}
              className={clx(
                'absolute top-0 flex flex-col items-center justify-center',
                'gap-s pt-s',
                'md:gap-ss md:pt-ss md:pl-ss',
                'lg:gap-sm lg:pt-sm lg:pl-sm',
              )}
              style={{
                left: `calc(${virtualRow.lane} * (100% / ${cols}))`,
                width: `calc(100% / ${cols})`,
                transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
              }}
            >
          ... 
         </div>
}

This results in the following situation:

Is there a way to preserve their original order? I want all my items to appear in the grid exactly as they are arranged in the original array.

[ryuoryuo]

I could not find a solution without modifying the library itself, so I patched it. Now I'm always returning this index check:

virtual/packages/virtual-core/src/index.ts

Line 605 in 8072348

return a.index - b.index

This can cause large gaps at the end of the grid when some rows are much taller than others (if some cards vary significantly in height), but in my case it works fine.