Skip to content

[pull] main from TanStack:main #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 2 commits into from
Mar 6, 2026
Merged

[pull] main from TanStack:main #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be89e29
fix(virtual-core): smooth scrolling for dynamic item sizes (#1108)
piecyk Mar 6, 2026
c4da5cb
ci: Version Packages (#1137)
github-actions[bot] Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions docs/api/virtualizer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ A function that returns the scrollable element for the virtualizer. It may retur
estimateSize: (index: number) => number
```

> 🧠 If you are dynamically measuring your elements, it's recommended to estimate the largest possible size (width/height, within comfort) of your items. This will ensure features like smooth-scrolling will have a better chance at working correctly.
> 🧠 If you are dynamically measuring your elements, it's recommended to estimate the largest possible size (width/height, within comfort) of your items. This will help the virtualizer calculate more accurate initial positions.

This function is passed the index of each item and should return the actual size (or estimated size if you will be dynamically measuring items with `virtualItem.measureElement`) for each item. This measurement should return either the width or height depending on the orientation of your virtualizer.

Expand Down Expand Up @@ -166,8 +166,6 @@ An optional function that (if provided) should implement the scrolling behavior

Note that built-in scroll implementations are exported as `elementScroll` and `windowScroll`, which are automatically configured by the framework adapter functions like `useVirtualizer` or `useWindowVirtualizer`.

> ⚠️ Attempting to use smoothScroll with dynamically measured elements will not work.

### `observeElementRect`

```tsx
Expand Down Expand Up @@ -349,6 +347,23 @@ scrollToIndex: (

Scrolls the virtualizer to the items of the index provided. You can optionally pass an alignment mode to anchor the scroll to a specific part of the scrollElement.

> 🧠 During smooth scrolling, the virtualizer only measures items within a buffer range around the scroll target. Items far from the target are skipped to prevent their size changes from shifting the target position and breaking the smooth animation.
>
> Because of this, the preferred layout strategy for smooth scrolling is **block translation** — translate the entire rendered block using the first item's `start` offset, rather than positioning each item independently with absolute positioning. This ensures items stay correctly positioned relative to each other even when some measurements are skipped.

### `scrollBy`

```tsx
scrollBy: (
delta: number,
options?: {
behavior?: 'auto' | 'smooth'
}
) => void
```

Scrolls the virtualizer by the specified number of pixels relative to the current scroll position.

### `getTotalSize`

```tsx
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@faker-js/faker": "^8.4.1",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/fixed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/infinite-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@tanstack/angular-query-experimental": "5.80.7",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/padding/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/smooth-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/sticky/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@faker-js/faker": "^8.4.1",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@angular/router": "^18.1.0",
"@faker-js/faker": "^8.4.1",
"@tanstack/angular-table": "8.21.3",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/variable/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/window/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@tanstack/angular-virtual": "^4.0.8",
"@tanstack/angular-virtual": "^4.0.9",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.1"
Expand Down
4 changes: 2 additions & 2 deletions examples/lit/dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/lit-virtual": "^3.13.21",
"@tanstack/virtual-core": "^3.13.20",
"@tanstack/lit-virtual": "^3.13.22",
"@tanstack/virtual-core": "^3.13.21",
"lit": "^3.3.0"
},
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions examples/lit/fixed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/lit-virtual": "^3.13.21",
"@tanstack/virtual-core": "^3.13.20",
"@tanstack/lit-virtual": "^3.13.22",
"@tanstack/virtual-core": "^3.13.21",
"lit": "^3.3.0"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/react/dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
6 changes: 5 additions & 1 deletion examples/react/dynamic/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ function RowVirtualizerDynamic() {
enabled,
})

React.useEffect(() => {
virtualizer.scrollToIndex(count - 1, { align: 'end' })
}, [])

const items = virtualizer.getVirtualItems()

return (
Expand All @@ -40,7 +44,7 @@ function RowVirtualizerDynamic() {
<span style={{ padding: '0 4px' }} />
<button
onClick={() => {
virtualizer.scrollToIndex(count / 2)
virtualizer.scrollToIndex(count / 2, { behavior: 'smooth' })
}}
>
scroll to the middle
Expand Down
2 changes: 1 addition & 1 deletion examples/react/fixed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"serve": "vite preview"
},
"dependencies": {
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/infinite-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@tanstack/react-query": "^5.80.7",
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/padding/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"start": "vite"
},
"dependencies": {
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/scroll-padding/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@react-hookz/web": "^25.1.1",
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/smooth-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"start": "vite"
},
"dependencies": {
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/sticky/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"lodash": "^4.17.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/react/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/react-table": "^8.21.3",
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/variable/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"start": "vite"
},
"dependencies": {
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/react/window/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"serve": "vite preview"
},
"dependencies": {
"@tanstack/react-virtual": "^3.13.20",
"@tanstack/react-virtual": "^3.13.21",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/svelte-virtual": "^3.13.20"
"@tanstack/svelte-virtual": "^3.13.21"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.1.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/fixed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-virtual": "^3.13.20"
"@tanstack/svelte-virtual": "^3.13.21"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.1.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/infinite-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@tanstack/svelte-query": "^5.80.7",
"@tanstack/svelte-virtual": "^3.13.20"
"@tanstack/svelte-virtual": "^3.13.21"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.1.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/smooth-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/svelte-virtual": "^3.13.20"
"@tanstack/svelte-virtual": "^3.13.21"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.1.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/sticky/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/svelte-virtual": "^3.13.20",
"@tanstack/svelte-virtual": "^3.13.21",
"lodash": "^4.17.21"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/svelte-table": "^8.21.3",
"@tanstack/svelte-virtual": "^3.13.20"
"@tanstack/svelte-virtual": "^3.13.21"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.1.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/fixed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/infinite-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"dependencies": {
"@tanstack/vue-query": "^5.80.7",
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/padding/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/scroll-padding/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"@vueuse/core": "^12.8.2",
"vue": "^3.5.16"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/smooth-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/sticky/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"lodash": "^4.17.21",
"vue": "^3.5.16"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"dependencies": {
"@faker-js/faker": "^8.4.1",
"@tanstack/vue-table": "^8.21.3",
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/vue/variable/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/vue-virtual": "^3.13.20",
"@tanstack/vue-virtual": "^3.13.21",
"vue": "^3.5.16"
},
"devDependencies": {
Expand Down
Loading
Loading