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
Any examples for Svelte with masonry infinite grid and dynamic item sizing?
I'm looking for an example, I managed to get some parts working but not sure how to do
measureElement with Svelte. I did use: but sizes all seem messed up. Also couldn't figure out how to do the infinite bit without triggering renders that send me back to the top.Is there a way to preserve scroll position when prepending items?
I have an infinite list, paginated in both directions. There are no issues when scrolling down and appending items, however when scrolling up the scroll position switches to the first prepended item.
I understand this happens because scrollTop is 0 and stays 0 while the items get prepended. I tried working around it by scrolling to the previously visible item, but it's a very janky experience. Any tips?
What I might want:...
Is it production ready?
Hey, I am using react-virtual (v^2.10.4) in my application to support infinite scroll in table. My motive was to upgrade the tables and seems to be working great. But I may have missed some edge case while testing. Since this library is still in beta phase, I wonder if I can use it in production environment. Additionally it would be great if you can provide me the timeline of when can we expect it to be the stable version approximately.
Thanks...
Vue (Beta): Is there an example of for usage? (+ Questions)
I understand the vue adapater is in beta. I'm trying to test it and hopefully improve.
```vue
<script lang="ts" setup>
import { ref } from "vue";...
Scrolling Indicators a la React Window
Hello! I'm using a two virtualizers to create a grid in my application. I was curious if there was a way to ship something like React Window's scrolling indicators?
https://react-window.vercel.app/#/examples/list/scrolling-indicators
Roughly - my individual components inside the grid have the possibility to be heavy, and I would love to just not show them while scrolling....
Count for Infinite Scrolling List
I'm building an infinite scroll table with Tanstack Virtual (v3.b.54) and Tanstack Table (v8)
If the API return the total data count, am I better off setting
count inside useVirtualizer to the the total count or using the line from the docs hasNextPage ? flatData.length + 1 : flatData.length?
Thanks!...useWindowVirtualizer for infinite image scrolling
I've been struggling to get a somewhat basic image scroller working and was hoping someone could help point out what I might be doing wrong. Basically, I create a virtualizer based on the number of pages in an archive file (which consists of a bunch of images), and then iterate through the virtual items and render the image based on the index. It sounds fairly straightforward, but currently I can't get the full page count to render, and I also feel like I am rendering too much at once, at the same time. If i set the estimateSize to return 1, then it will display all images at once. If I return an arbitrary size, like 30, it displays about 20 at once but then no more. If I set it to the size of an image, then it only displays 1 total.
I'll paste the code below, but here is a short video for what this code does: https://streamable.com/kzofvq...
How to put together a scrollable chat (virtualize the long list of messages) ?
I have my messages in an object where the keys are dates, and each date is an array that has the conversation for that particular day.
Something like:
`{...
How to infinite scroll a fixed list of items
Is it possible to use this to have a fixed list of items but allow scrolling infinitely up and down? I'm thinking for a time picker allowing the user to scroll down through the hours and minutes indefinitely but always repeating the same 12 or 60 options.
Mocking scrollToIndex with jest
Since the Virtualizer is getting compiled to a function on the build output,
jest.spyOn(Virtualizer.prototype, 'scrollToIndex') will not work
What would then be the best way to check that scrollToIndex is called with the correct value within a test?...scrollToindex with behavior:smooth and dynamic size.
I have an issue when using scrollToIndex with behavior: smooth. It's not working on large list data ( wrong position after scrolling).
If I removed behavior:smooth, it works well. I use version beta v54 and v30.
I found that code:
`if (behavior === 'smooth' && this.isDynamicMode()) {...
...
Column Virtualizer dynamic height
Hi 👋
Just wondering if there's a way to have the parent element (the one with the ref and the overflow) in a column virtualizer (horizontal) take the height of its children dynamically instead of hardcoding it (e.g. in the examples:
height: 100px on the parent and height: 100% on the scrollable container and the virtual items).
Doesn't seem that straightforward with the absolute positioning and all....Roadmap?
What is the roadmap for virtual? Is there a plan to move virtual out of the beta phase in the near future?
Scroll Anchoring
Is there a way using react-virtual (v3) to maintain the apparent scroll position when new items are added to the start of the list?
I'm seeing in my app that if new items are added to the top and the scrolling is somewhere down the list that what the user sees moves as items appear at the top. The behavior I hope to achieve is that when the user has already scrolled down, as items appear at the top the apparent position of the scrolling stays constant. I believe this called scroll anchoring.
I'm not sure if this is due to my implementation or if it's something that needs to be supported by react-virtual....
Can't I get an example of dynamic + sticky using react-table?
I implemented virtualization by looking at examples of react-table and dynamic of virtual.
If you specify the 'position:sticky' and 'top:0' properties in the th tag,
the table header is fixed at the top in safari, but the header scrolls down in chromium and edges.
...
Using virtual scroll with nested lists
I have a combobox dropdown that has groups of items (nested lists).
I have been struggling to figure out how to use virtual scrolling with this setup. Anyone have any suggestions?
This is the css framework I am using and must follow the provided dom structure for styling to work...
instance hidden properties
there are properties that I can see on the instance. like getSize, scrollRect etc but Typescript doesn't know about them
are they valid to use? or internal state?...
How do I mock the dimensions and scrolling for testing?
I need to test a behavior that only triggers after scrolling the list to the end.
Is there a suggestion on which things I should mock to achieve this? I've been trying some things (
HTMLElement.prototype.scrollHeight, HTMLElement.prototype.getBoundingClientRect) but virtual always renders all the elements....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....