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

conscious-sapphire

5/22/2024

Dynamic Width + Manual Scrolling Re-mounts

Hello. I want to achieve the same effect as in Chrome DevTools > Performance tab. This means that when you hold Command (or Ctrl) and scroll, it should zoom into a certain point. I use the virtualizer.measure() API for this so the library can react to the width change. For some reason, it re-mounts elements that should be visible if I scroll quickly. The further to the right I scroll, the more noticeable the issue becomes. The first render after mounting is delayed, making the issue more apparent....

ambitious-aqua

5/20/2024

Recommended pattern for a grid of dynamic, but uniformly-sized items?

Our team has a use case where we... - Have a grid of items - When the grid / window is resized, these items dynamically change size - Though dynamic, all items are uniformly-sized with respect to one another...

absent-sapphire

5/17/2024

Please tell me how to restore scrolling when using measureElement.

https://github.com/TanStack/virtual/discussions/731

adverse-sapphire

4/29/2024

tanstack multiple shorting

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

rare-sapphire

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?

genetic-orange

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

xenophobic-harlequin

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

xenophobic-harlequin

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

evident-indigo

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

fascinating-indigo

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

fascinating-indigo

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

absent-sapphire

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

eager-peach

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

xenial-black

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

afraid-scarlet

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

flat-fuchsia

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

other-emerald

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

fascinating-indigo

3/15/2024

Restore scroll position

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

equal-aqua

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

plain-purple

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

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