react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
📣-announcements
Virtualized dynamic height measurement
I have been trying to create a dynamic grid (the number of columns being tied to window width)
The issue is that my rows expand in height due to window resize, but my virtualiser uses a fixed estimate height, making the scroll 'jump' and not smooth.
I have a minimal working example setup here if anyone could help me figure out how to measure the elements....
detecting if list is scrolled to bottom
Is it possible to detect if the virtual list is scrolled to bottom?
column virtualization with several header groups?
is there any way to do column virtualization with several header groups?
Nested virtualizers?
I have a
CommentsList component that I'm showing in a drawer, which is a scrollable list with comments. Each comments can have replies which can be toggled via a "show/hide replies" button on each comment. These replies can then also have replies, nested indefinitely. I know how to virtualize the main comments list, but if a comment has a massive amount of replies, how would I virtualize that too but have the comments be in the same scrollable list? If you've used Reddit, their comments system...VirtualRows with rendering sub components
Hey everyone.
I am currently building a table that uses both tanstack virtual (mainly the useWindowVirtualizer hook) as well as tanstack table. In the tanstack table examples there is a way to render sub components. Functionally I have it all working but when combined with the useWindowVirtualizer stuff it doesn't change the
getTotalSize which I think its because in this situation the count doesn't change so the virtualizer doesn't adjust the total height.
I thought of passing the measureElement to the fragment but that isn't possible. Does anyone have any idea of a solution to this?
```js
const { rows } = table.getRowModel();...Mocking getBoundingClientRect broken
Hi folks,
since this PR https://github.com/TanStack/virtual/pull/986 mocking getBoundingClientRect for tests (e.g. using JSDOM in vitest) is broken. Do you have any suggestion how to replace it?
All the best,...
How can I sync two virtual lists (with no lag)
Hey, the goal is the following :
Syncing (with no lag) the scrollTop value of two virtual lists that are in different scroll containers.
The two lists have same number of elem + same eleme height but the rest is different so I cant use lane=2....
Tanstack start wrangle dev cloudflare worker
I want to test wrangler dev in local in miniflare. After doing build, I am getting a issue on react dom server on running wrangler dev, It is working fine by running vinxi dev, Can someone help me who are familiar with wrangler and cloudflare deployments
X [ERROR] Could not resolve "react-dom/server"
.output/server/chunks/build/report-DwJEuG7y.mjs:25:7:...
Is the "end" of a range inclusive or exclusive?
Noob question, but when TanStack Virtual says to render from 0 to 10, does that mean essentially doing a rows.slice(0, 10), or a rows.slice(0, 10+1)?
Brief Scrollbar Flash Due to Incorrect `getTotalSize()` on Dropdown Mount
We've integrated TanStack Virtual into our custom Select component in React to optimize rendering performance. However, we're encountering a visual glitch: upon opening the dropdown, a scrollbar appears briefly (for approximately one frame), even though the total height should not require scrolling.
The issue appears to stem from the virtualizer.getTotalSize() function, which returns a height roughly 4x larger than expected. We're using an estimated item size of 40px, which matches the actual rendered height of each item, so it's unclear why the total size is incorrect.
Component structure:...
Having an issue where dnd-kit, resizable columns, and the virtualizer don't play nice together
I wasn't sure which thread to post this question under since it's quite multi-faceted and uses a combination of different TanStack bits and pieces (namely both Table and Virtual).
A few weeks ago, we were making a grid view for our internal system that required the following functionality:
- Resizable columns
- Reorderable columns...
Browser Search
Is there any good way in 2025 to use browser search with virtualized lists? Any APIs to tie into to get the query, or something?
Best I can come up with is hijacking the CTRL/CMD+F and building my own search UI....
Reverse infinite scroll direction like chat apps
Does anyone know how can I achieve upward scrolling like other chat platforms that is load data on scrolling up instead of scrolling down
using the tanstack virtual...
scrollToIndex completion sync
Hi, wondering is it possible to determine when scrollToIndex completes as I wasnt to set focus on the first cell.
At the moment scrollToIndex kicks off a setTimeout which may recursively kick off more setTimeouts...
If I access the DOM before the scrollToIndex completes I get returned the wrong row element.
Any idea greatly appreciated at this stage!!!
Thanks, Donal...
infinite-scroll virtualizer
Does this approach provide the benefits of virtualization while maintaining our grid layout?
```
import { useWindowVirtualizer } from "@tanstack/react-virtual";
...
Unexpected rangeExtractor behaviour
When using the rangeExtractor I'm find that some indexes become virtualised even if they are included in the range.
For example if I want to pin some items to the start and therefore always have them rendered I would add their indexes to the range,
[0,1,2, ...virtualIndexes].
This works find but the problem is when there is a gap in indexes at the start....Unexpected undefined error
Hi, I am getting an error coming from react-virtual I guess… "Unexpected undefined at notUndefined" and I don’t understand what exactly is wrong in the code and what to fix…
Is there a way to render "ghost" items in a virtual list when a user scrolls too fast?
Right now whenever I scroll an infinite list of items it skips rendering the items and does't show anything until the velocity of scrolling decreases. I'd like to render empty "ghost" boxes in that case, like it's possible with React-Virtuoso. Is this possible with Tanstack/Virtual ?
Is it possible to implement nested virtualization with @tanstack/virtual
Hey is it possible to implement nested virtualization with @tanstack/virtual, or is it better to flatten everything into a single list for better performance?
I have a hierarchical data structure like this:
```js
const data = [...