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

fair-rose

4/29/2024

tanstack multiple shorting

I'm using the Tanstack table. Can it give me the latest sorting at index 0?

wee-brown

4/29/2024

How to virtualize a grouped list?

I want to virtualize a MUI Autocomplete component that has groups. The structure is as below. Seems a bit counterintuitive to virtualizing. Any ideas?

quickest-silver

4/26/2024

Blank spaces where I should see virtual rows in horizontally scrolled div

Hey, I tried adapting one of piecyk's example (https://stackblitz.com/edit/tanstack-virtual-chmknb) mentioned in responsive grid list thread. I adapted it to have a horizontally scrollable div with grid. Here is my example: https://stackblitz.com/edit/tanstack-virtual-8uf16a?file=src%2Fmain.tsx I have a problem with the missing rows however, they are just blank and no rows get added to the DOM when I scroll to them. ...

blank-aquamarine

4/23/2024

useWindowVirtualizer with dynamic row height

Hey, the company I work for is using react-virtualized for displaying rows (it's a video platform similar to Youtube). So image a long list of rows with video previews. Currently we are using WindowScroller from react-virtualized. I would like to replace react-virtualized with tanstack/react-virtual. I already started implementing the functionality but I'm having issues with using dynamic row height with useWindowVirtualizer. Is there a working example somewhere with this combination? I have only found one or another. If somebody has working example I'd be grateful....

blank-aquamarine

4/23/2024

Is it just me or the website won't load?

https://tanstack.com/virtual/latest ``` jquery.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'createElement') at ue (jquery.js:25:3634)...

robust-apricot

4/13/2024

Scroll to not working + warning about flushSync

The scrollToIndex doesn't seem to work and I'm getting a warning about flushSync. I'm guessing the scrollTo doesn't work because of whatever triggers the warning. How would I go about this issue? I'm using react-virtual@3.2.1 and latest react 18 version. Reproducible repo: https://github.com/hornta/react-virtual-flushsync-scrollto...

continuing-cyan

4/12/2024

What is the `sync` parameter for in the `Virtualizer.onChange` function?

Howdy! There's a parameter in the virtualizer that's not documented - the onChange function's sync parameter Docs: https://tanstack.com/virtual/latest/docs/api/virtualizer#onchange Fn Signature: https://github.com/TanStack/virtual/blob/f0537588c4304fda7c231124d73cc4cbcec618a8/packages/virtual-core/src/index.ts#L250C3-L253C12...

continuing-cyan

4/8/2024

How can I retain scroll position when table state is changed, or a row is removed from my table?

Hello, I'm using @tanstack/svelte-table with a virtualizer for an interactive table project. However, I'm encountering a user experience issue: whenever there's a state change in the table, such as selecting or deleting an item, the virtualizer automatically scrolls back to the top. Has anyone successfully integrated the virtualizer with a table that maintains its scroll position during such interactions?...

wee-brown

4/6/2024

Seeking Advice on Dynamically Calculating Element Height and Adjusting Scroll Position in a React P

Hello, I'm seeking assistance with managing scroll positions in a project using React and react-virtual, specifically for an infinite scroll list implementation where elements are dynamically added to the top of the list. Each element's height can change dynamically, necessitating appropriate adjustments to the scroll position to account for the added elements' heights. However, when adding elements and calculating the scroll position, I encounter flickering issues on the screen. You can access my code through the following CodeSandbox React Virtual Infinite Scroll Implementation. The implementation details are primarily in App.tsx. CodeSandbox...

mute-gold

3/29/2024

Has anyone animated a virtualized list with gsap to stagger in the list items on page load?

Has anyone animated a virtualized list with gsap to stagger in the list items on page load, in a Next.JS app? I have a useWindowVirtualizer setup, and I am trying to animate it in, but having trouble selecting individual list items, no matter where I position the ref that GSAP uses for the animation, and no matter which part of the windowVirtualizer container elements I select. Has anyone tried this? The closest I got was animating in the entire windowVirtualizer container (not the individual items) but this also causes issues when I scroll because it seems to re-trigger an animation....

quickest-silver

3/25/2024

Race between measure element and rendering

I have a busy (expensive elements) table that has collapsable rows, the table row has ref={virtualizer.measureElement} when I click on the collapse button ( to expand the content) the content is rendered and THAN the measure element kicks in and pushes the content bit more down, but there is a split second where the content of the next row is rendered OVER the row I clicked on. Logically it makes sense, and I can solve it by just adding white (or any other color) background to the row. But I wonder if there is a better way do this....

exotic-emerald

3/18/2024

Expandable/collapse virtual items - change of scroll position when height is changed

Hi everyone! I've been using TanStack Virtual for managing a list of expandable/collapsible items within a scrollable container, and it's been great so far! However, I've encountered a specific issue that I could use some help with. The Problem: ...

evident-indigo

3/17/2024

I am facing app crash, when i tried to take useReactRouter outside of table component

Context My application/ page is laid out like this ```js function ComponentA {...

correct-apricot

3/15/2024

Scroll container with other content above virtualized list

I'm attempting to virtualize a list within a scrollable container but the scrollable container has content above the list The list renders fine, but the virtualization only begins only where the first item is initially rendered when scrolled down. https://codesandbox.io/p/devbox/funny-wildflower-yr2hvq?file=%2Fsrc%2FApp.tsx...

rival-black

3/15/2024

Restore scroll position

Hello, is there an API i can use to call & restore a scroll position? thanks!

like-gold

3/15/2024

Performance: transforming a block of elements vs each element

In a scenario of fixed item heigh which approach is more performant? The fixed example shows making each row position: absolute and applying transform: translateY to it. Is it shown in the docs because this is more efficient than applying transform: translateY to the whole block of elements (as shown here )? Is the difference documented a...

blank-aquamarine

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> ...

sunny-green

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?...

xenial-black

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

modern-teal

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...

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