fix: align startIndex & endIndex to lanes for masonry mode

[Azq2]

1. startIndex should be aligned to the beginning of its lane
2. endIndex should be aligned to the end of its lane
3. count is actually lastIndex

Fix for #573

[Azq2]

Without fix

item.lane=
    | 1 | <-- row 0
| 0 | 1 | <-- row 1
| 0 | 1 | <-- row 2

With fix

item.lane=
| 0 | 1 | <-- row 0
| 0 | 1 | <-- row 1
| 0 | 1 | <-- row 2

[Azq2]

Easy way for reproducing bug - just set overscan 0 for MasonryVerticalVirtualizerVariable example

https://tanstack.com/virtual/latest/docs/framework/react/examples/variable

[piecyk]

Thanks, looks good, let's update the condition and we can merge it.

[piecyk]

Suggested change

	if (lanes != 1) {
	if (lanes > 1) {

[Azq2]

Thanks for the feedback, I fixed it

[autofix-ci]

Hi! I'm autofix.ci, a bot that automatically fixes trivial issues such as code formatting in pull requests.

I would like to apply some automated changes to this pull request, but it looks like I don't have the necessary permissions to do so. To get this pull request into a mergeable state, please do one of the following two things:

1. Allow edits by maintainers for your pull request, and then re-trigger CI (for example by pushing a new commit).
2. Manually fix the issues identified for your pull request (see the GitHub Actions output for details on what I would like to change).

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a2cde5d.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	2m 32s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	19s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-25 06:14:01 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/virtual-example-angular-dynamic
• @tanstack/virtual-example-angular-fixed
• @tanstack/virtual-example-angular-infinite-scroll
• @tanstack/virtual-example-angular-padding
• @tanstack/virtual-example-angular-smooth-scroll
• @tanstack/virtual-example-angular-sticky
• @tanstack/virtual-example-angular-table
• @tanstack/virtual-example-angular-variable
• @tanstack/virtual-example-angular-window
• tanstack-lit-virtual-example-dynamic
• tanstack-lit-virtual-example-fixed
• tanstack-react-virtual-example-dynamic
• tanstack-react-virtual-example-fixed
• tanstack-react-virtual-example-infinite-scroll
• tanstack-react-virtual-example-padding
• tanstack-react-virtual-example-scroll-padding
• tanstack-react-virtual-example-smooth-scroll
• tanstack-react-virtual-example-sticky
• tanstack-react-virtual-example-table
• tanstack-react-virtual-example-variable
• tanstack-react-virtual-example-window
• tanstack-svelte-virtual-example-dynamic
• tanstack-svelte-virtual-example-fixed
• tanstack-svelte-virtual-example-infinite-scroll
• tanstack-svelte-virtual-example-smooth-scroll
• tanstack-svelte-virtual-example-sticky
• tanstack-svelte-virtual-example-table
• tanstack-vue-virtual-example-dynamic
• tanstack-vue-virtual-example-fixed
• tanstack-vue-virtual-example-infinite-scroll
• tanstack-vue-virtual-example-padding
• tanstack-vue-virtual-example-scroll-padding
• tanstack-vue-virtual-example-smooth-scroll
• tanstack-vue-virtual-example-sticky
• tanstack-vue-virtual-example-table
• tanstack-vue-virtual-example-variable

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@933

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@933

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@933

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@933

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@933

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@933

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@933

commit: a2cde5d

[piecyk]

@Azq2 thanks, btw did you noticed the formatting check?

[Azq2]

@piecyk Yes, I missed it. Now it's fixed.