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
race condition with new getItemKey
I have a race condition that I can't reproduce (yet) in a sandbox. so I will try to describe what it looks like:
the result:
I get to a situation where the first items in virtualItems, up to index k, are with prev keys, and the items after k are with new keys....
Is there any example of svelte-table with svelte-virtual?
I am aware that svetle-virtual is in beta. But is there any example anywhere at all?
why does the component re-renders on each scroll change
it seems that the hook returns a new virtualizer and new virtual items (deeply equal to the prev ones)
each time the scroll offset changes.
It forces me to do very weird things to avoid over-rendering the component.
...
Switching between finite and infinite scrolling throws dynamic measurements off
Hey
I have an app with a list that becomes infinitely scrollable, by pushing a load more button. I.e. rendering a page of about 20 items with the “load more” button at the end of the page. I have an almost working version of this, but sometimes switching from a finite to an infinite list causes the page’s scroll position to jump.
Getting the value of window.scrollY is e.g. 18636 before rendering more content and 19406 after rendering more. This only happens when the list container is scrolled out of view leaving about 60% or less of the container in view. I use the useWindowVirtualizer to make the list a part of pages layout....
Is there a way to auto size the scroll area to parent?
Similar to how you might use react-window and AutoSizer to create a virtualized list that fits inside it's parent element, is there a way within Virtual's existing framework to do the same?
As an example, say I have a flex box layout and the height of the container element is set to 100vh. Ideally I would like Virtual to always take up all the vertical space it has and render rows accordingly....
Using TanStack Virtual inside a StencilJS project (or with vanilla JS)
I'd like to implement TanStack Virtual inside a StencilJS project. I tried to port an adapter starting from the React one ("https://github.com/TanStack/virtual/blob/beta/packages/react-virtual/src/index.tsx"), but I failed due to my basic React knowledge regarding hooks.
Has anyone ever tried this? Or even using it inside a vanilla JS project?...
async items (with @tanstack/query)
Hi there! Sorry if I missed this in the docs/discussions -
What's the recommended approach to integrate with async data (via tanstack/react-query)?
I have a use-case where the data is async and fetched using
useQuery and passed into a component that uses tanstack/virtual.
Since the data is async and undefined while loading, useVirtualizer gets initialized with an empty array. ...auto measure of item after item above it removed
I think I found a bug..
here is a sandbox - https://codesandbox.io/p/sandbox/virtual-dynamic-bug-9pqyib?file=%2Fsrc%2Fitem.tsx
if you click on "remove item at index 1" and then on "resize item on index 1" you'll see that the items aren't pushed.
...
Multiple instances on same page
Currently have two tables stacked on top of one another on the same page (first table is decently long ~3x height of page). The tables are both utilizing virtualization. I cannot seem to get the second table to correctly display items in view. Both tables are utilizing the same parent ref for the scroll element. Have tried setting start and end of items relative to table position on page with initialMeasurementsCache, but it appears to be overwritten internally (quickly glanced at source, but didn't dive in. Have no problem doing so, just been a long day lol).
If anyone has any suggestion the help would be greatly appreciated 🙂...
Grid with dynamic width columns
The example for dynamic virtualized grid on the website uses dynamic row heights but what I would like to have are dynamic column widths. Are there any examples for this use case? When I used
measureElement for columns they are no longer a grid now.Handling large no of records in Infinite scroll
We are using react-virtual for an infinite scroll. Based on scroll position we fetch the next set of 500 records.
As browsers have limitation on the max height is a scroll - how do we handle when we large set of lines let’s say 5000010 to show up in the virtualizer?...
testing components using virtual scroll
is there a way to show all items in unit tests?
or can I do something like show next batch?
mimicking user scroll to test that I have the correct items in the list isn't much fun 🙂...
Table Infinite Scroll w useVirtual not returning all rows
Hey friends. I seem to be having a weird issue where my table isn't displaying all rows. This is work code on a work laptop, so I'll share what little I can, please forgive me. Most of what we have follows the example for using Tanstack Table with Query's useInfiniteQuery and Virtual: https://tanstack.com/table/v8/docs/examples/react/virtualized-infinite-scrolling
We're getting 31 items from the API.
``` const flatData = React.useMemo(...
Is there a strategy to search (ctrl + F) through a virtualised list?
I understand that the content doesn't actually exist in the DOM, and therefore it can't be searchable. However, I'm sure I'm not the first person to need to address this.
My use-case is that I'm rendering out a heap of paragraphs, as a result of a podcast transcript, and there are event handlers peppered throughout the words. My performance for the page is pretty đź’© when there are a lot of paragraphs (for long podcasts, it could be over 100 paragraphs). If there are only a few paragraphs though, performance is great. The reason I'm reaching for this library is that only a few paragraphs are displayed on screen at a time, so virtualising the list seems like an easy win. But it seems necessary to allow users to search through a transcript for certain words. All the paragraphs have id's and ref's, so I was thinking i could write my own search box etc. and create some kind of word map...
A different solution I was thinking of, instead of using this library, was checking if a paragraph was currently in view, and only then apply the event handlers etc....
Infinite Scroll with set number of virtual items
I'm implementing infinite scroll. When the user gets near the last item, I'd like to add a few items to the virtualizer and remove the same number from the beginning.
Anyone got any tips on how to implement this behavior without causing a runaway effect?...
lists with common scrolling element
I'm trying to create a grouped list,
so that I have one scrolling element with groups and each group contains many items. ideally the groups list and all the items list will react to the same scroll.
I managed to create a non virtual groups list with virtual items lists inside: https://codesandbox.io/s/grouped-virtual-by-item-jor1nv?file=/src/App.tsx
...
How to use rangeExtractor properly for horizontal column virtualization with pinned or sticky column
I have got column and row virtualization working pretty well using TanStack Virtual v3 beta.31. The only remaining issue I cannot figure out is how to properly use the
rangeExtractor function properly to not lose pinned columns as the user scrolls.
Here is my live example: https://www.material-react-table.dev/?path=/story/features-virtualization--max-virtualization
Here is my code for the virtualizer:...