TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

ratty-blush

3/15/2024

Implementing multiple levels of sticky headers.

Hi. I've been using React Virtual to implement long virtualized lists in my app and have been loving it so far. However, I've run into a bit of an issue when trying to implement multiple levels of sticky headers. My intention was to have a list with the following structure: ``` <Section1> <SubSection1> ...

conscious-sapphire

3/14/2024

Shaking the scroll when there is a radix CheckboxRoot inside the list item.

demo: https://stackblitz.com/edit/tanstack-virtual-szapmj?file=src%2Fcomponents%2FRowVirtualizerDynamic.vue I can't figure out why the scroll is shaking when there is a radix CheckboxRoot inside. If you put an absolutely identical static button, then this does not happen. At the same time, nothing inside the radix component causes scrolling What cyclically triggers the scroll event on the parent element?...

correct-apricot

3/13/2024

Windowed Infinite Scroll UI - dual scroll bar issue

Does this code look fine? If yes, then why is UI messed up?

message.txt

absent-sapphire

3/10/2024

Virtualized items not updating more than once

I'm defining my list like this (attached snippet on next post). When I load my page the list updates its elements (if I scroll before it loads I get a different section) then it never updates again, leaving whitespace...

afraid-scarlet

3/6/2024

Resizing dynamically sized virtual rows causes jittery behavior

I am using measureElement to virtualize dynamically sized elements. Everything works well but I have one problem when dynamically changing the rows size through conditional rendering. Each row is passed a boolean prop based on some conditions, and when a certain action happens, the row will display/hide some content. When this happens, specifically when the row grows in size (triggering the resizeObserver from measureElement), this behavior is jittery for a split second. It seems that text is displayed on top of each other until it finishes adjusting. Any ideas on how to fix this? This is my virtualizer instance: ``` const virtualizer = useVirtualizer({...

variable-lime

2/28/2024

virtualization question!

Hey, I have 3 layers of data, like an array of grandparents> having parents> and then children, I want to virtualize children, anyone knows how to do that? Thanks...

extended-salmon

2/23/2024

Virtualized Tree

Hi, I'm back 🙂 I had to pause the virtualized tree for a while because of life... I'm still struggling unfortunately and maybe I need to approach it differently but my solution feels so close and if we could solve this puzzle I think it could be one of the better react tree solutions out there. In short, we are using the power of react components to create the tree structure with react state for expand/collapse, contexts for tree level and indentation. But the resulting DOM output is a flat list which should make it suitable for windowing/virtualization. ...

extended-salmon

2/12/2024

Significant scrolling performance hit from scrollLeft?

This is a re-post of https://github.com/TanStack/virtual/discussions/667. Perhaps Discord is more active 🙂 I am building a data grid with the tanstack react-table + react-virtual combo but I am having troubling making the scrolling performance better. When profiling with chrome dev tools, I found for every scroll event, there is half time spent on Recalculate Style and Layout, the stack trace points to get scrollLeft from the observeElementOffset of react-virtual....

extended-salmon

2/12/2024

Missing documentation on scrollingDelay

I am recently trying to improve scrolling performance of a data grid built on react-virtual. I found setting a much lower scrollingDelay greatly improve the perceived scrolling performance. I didn't know about this prop until digging into the source code, as it wasn't mentioned anywhere in documentation. Shouldn't we add some documentation for it?...

ratty-blush

2/10/2024

Is there a documented way to make a responsive grid list?

Can you share an example of a responsive grid list? I tried using lanes, dynamically substituting the number of lines there, but it didn't work

generous-apricot

2/8/2024

Problems with list rendering with ssr

Hello, please tell me the solution for tanstack/virtual 3.0.4 I use virtualization for a list on an ssr page, without initialRect tags are not rendered on the server side, which is exactly what I need. For rendering on the server side, I added an initialRect accordingly, but with initialRect on the client, during the first render I get the entire list without virtualization, which is noticeable, how can I fix it? ``` const virtualList = useVirtualizer({...

ambitious-aqua

2/5/2024

Parent components behaving unexpectedly

Styling and the ref={(node) => rowVirtualizer.measureElement(node)} effecting the parent components. if i comment out this code everything works: ...

fascinating-indigo

2/5/2024

Duplicated fetching with React Query + React Table + Virtual and MUI Table

Hi everyone, I am trying to create a virtual table with query + table + virtual. I am using the following versions: "@tanstack/react-virtual": "3.0.2",...

afraid-scarlet

2/5/2024

Dynamic item sizes causes list to jitter when items are removed

Hey all. Thanks for this amazing library. Ive managed to get my virtual list working in my React app using the useVirtualizer hook. My use case is a chat UI and the virtual list displays messages in a column orientation. Everything works great, and sending messages is smooth. My issue is when I delete a message, depending on where it is in the window, sometimes this deletion is very jittery and sometimes its smooth. All the messages are dynamically sized and my estimate size function returns the size that is for the most common case. There is no hard limit on how big an item is because messages can have multiple rows of content. Here is my visualizer:...

xenial-black

2/2/2024

Toggling visibility on items leaving empty space

Heya, using the window scroll, i'm trying to implement visibility toggle. What i have for data is a flattened tree and when i want to hide children of some node looks like it doesn't recalculate the positions of elements that are below the collapsed node so i'm left with blank space. What i've tried so far: ...

extended-salmon

2/1/2024

Recursive structure

Is it possible to use the virtualizer without looping over the virtual items? My items is in a recursive structure but the resulting dom elements are flattened. But I'm not sure how to figure out what item should be rendered without using getVirtualItems() function.

stuck-chocolate

1/30/2024

[Possible Bug] getTotalSize is calculated incorrectly.

I have a waterfall style of grid with 4 lanes and each item can be a different height. I have the calculations correct but sometimes at the bottom content gets cut off. I was banging my head against the wall but then I realized there might be a bug and just wanted to confirm. You can see the list of measurements in the image. You can see index 16 as an end that is bigger than index 17, but getTotalSize() only takes the last item of the array into consideration. This is taken straight from the source:...

rising-crimson

1/30/2024

Responsive virtualizer

Hi, How can I make my virtualizer responsive ? can't find any example. Should I check for window size / resize and update the estimateSize ? Got issue adding margins between virtual items too, I have to add margins to the estimateSize to get them work.. any help would be appreciated, thanks 🙂...

like-gold

1/17/2024

Most of the react example sandbox are down for me

All of them just error out with this: And there is no documentation except these examples. It doesent help if I sign in or not. I think it would really be helpful if there was documentation beside these because codesandbox is really slow. Also stackblitz has been stellar in terms of performance. If you dont mind me suggesting maybe it is a better alternative. Let me know if I can help....

xenial-black

12/28/2023

Dynamic Virtualizer - when scrolling through touchpad it causes flicker

Hey all, I was wondering if any of you have tried implementing a dynamic virtualizer with smooth scroll. I am rendering a list where the height of the items aren't fixed and calculated during render time. For e.g. list item 1 could be of 200 x 400 px and item 2 could be 200 x 900 px. Finding an appropriate estimateSize seems impossible as list item dimensions vary a lot. My main issue is scroll flickering. Items blink a lot when scrolling down and up, not sure what could be causing that. My virtualizer looks like this const virtualizer = useVirtualizer({...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs