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

like-gold

12/26/2023

setting scroll position when using infinite query with maxpages

I’m using virtual with infinite query. Everything was working pretty well, but then I set the maxpages on infinite query to prevent running out of memory on especially large lists. This works on the query side, but I noticed that the scroll position in my list stops updating when I reach the page equal to the max page (in my case 5). I’ve been able to work around this by manually setting the scroll index to a value equal to one page fewer items (4000 for my 5 pages of 1000 items). Is this normal...

quickest-silver

12/7/2023

Is there a way to access instance of the virtualizer from another react component?

I have a page with a virtual scrolling window of items, and in the page header I have a nav where I would like to use the scrollToIndex() function to scroll to specific indexes in the list of virtual items. The nav is not a parent or child of the component where the items are rendered. Is there a way to call scrollToIndex from outside of the component where the virtualizer was instantiated?

ratty-blush

12/7/2023

Window Virtualizer dynamic item sizes and scroll jitter

So I'm using svelte with each item in the list being dynamiclly sized with pictures loaded from the web, and videos. The main issue I'm facing rn is that i can't scroll past a certain point where it just jitters and the scroll stays there, how do I deal with this?

rival-black

12/6/2023

rowVirtualizer.getVirtualItems() returning values in v3.0.0-beta.61 but not v3.0.1

Hey all - Problem - When updating from beta version to stable version, rowVirtualizer.getVirtualItems() returns []. Reverting version back to beta fixes empty array issue ...

fascinating-indigo

12/6/2023

Heavy CPU usage on virtualized tables?

Steps to reproduce: 1. Visit this codesandbox link (derived from https://tanstack.com/virtual/v3/docs/examples/react/fixed): https://f2mml2-5173.csb.app/ 2. In Chrome, open the Performance Monitor (Inspect Element -> Three dots icon at the top right -> "Open Drawer" -> in the opened drawer, show the "Performance Monitor" tab) 3. Scroll very fast in the third example (the table with cells) of the sandbox example using a mouse wheel. Notice the CPU spike. In the first example with plain rows, the CPU spike is very minimal....

quickest-silver

12/4/2023

Jumping scrolling and flickering with @tanstack/react-virtual

Hi there, I'm trying to implement the @tanstack/react-virtual library on a page with a scroll list of approx 90 items. I have been able to return the virtualItems but I find that when I scroll down in larger strokes / somewhat quickly I'm getting the scrollbar jumping and the page flickering. This is in a Next JS 14.0.3 pages router project. Is there anything that jumps out in the code below as obviously wrong? Here is my component (uploaded file)....

useVirtualizer

absent-sapphire

12/2/2023

Performance vs react-virtuoso

Hi all, great package, I really like that it's completely compatible with any height content. I first tried out tanstack/virtual and then react-virtuoso for our use-case (large list with heavier rows of dynamic heights). Sadly it seems like react-virtuoso is outperforming tanstack virtual for our use-case. Is there a guide on performance optimizations? I already compared code with the examples and the rows are memoized, and all callbacks etc are wrapped....

rival-black

11/29/2023

When scrolling it shows blank list items

So I implemented Virtualization and when I scroll down fast I get blank component for a second and then component loads afterwards

foreign-sapphire

11/28/2023

How do I know if an item is currently visible or not ?

(in the presence of overscan)

protestant-coral

11/21/2023

Adjust height when keyboard opens

Hi, I have the problem that when the keyboard opens it moves the content out of view. In React Native I can just use KeyboardAvoidingView and everything works fine, but I don't know how to do it on the web. What I want is that the scrollview automatically changes size when the keyboard opens, so that the last messages can still be seen. The screen has a height of 100svh. Minimal Predroduction Repo: https://github.com/j3sch/input-mobile-scrollview...

genetic-orange

11/15/2023

Missing attribute name 'data-index={index}' on measured element, when it clearly exists

When trying to virtualize our list of messages I copied everything almost exactly from the dynamic example, while modifying it to fit our use case and solidjs, everything seemed to work until I tried scrolling and experienced jittering, while the console constantly outputted the error. Snippet of the virtualized element ```ts ...

national-gold

11/15/2023

RTL unit tests with tanstack virtual

Hey Guys ! 👋 I am facing one strange issue, when implementing the tanstack virtual. const items = virtualizer.getVirtualItems(); the items is empty and not rendering any items, because of which unit test is failing. On console, I found the DOM structure like this:...

jolly-crimson

11/7/2023

Virtual and CMDK

Hi guys, has anyone implemented virtual with the cmdk library? https://github.com/pacocoursey/cmdk

deep-jade

11/7/2023

Cannot find module '@tanstack/react-virtual'

Anyone run into issues finding the node module from a .spec file? My component itself can access it fine, but when trying to import the component through a test file it cannot find the module. I assume it's user error with how I've installed the module (pnpm), but throwing it out in case others saw something similar.

adverse-sapphire

11/7/2023

Modify size of element on click

Each row can be clicked, which expands the row to show more data. I'm storing the state of what's open within a state object Record<string, boolean. My estimate size fn looks like: ```...

like-gold

10/24/2023

custom scrollToFn performance issue

This function below aims to reproduce a linear scroll animation, it's working nicely on high end devices but it becomes laggy on low end devices and can't figure out why.. I know this can work smoothly on low end device because without a scrollToFn and with scrollBehvaior: "smooth" the animation is smooth BUT as scroll-behavior is not linear (look like easeInOut), when we start spamming index increase, the animation goes out of hands... (even with a throttle on input) any help would be appareciated 🙌 ```js...

firm-tan

10/20/2023

Filtering

Has anyone implemented filtering with Tanstack virtual? Say I've got a table with a search term. The table initially has 100 elements, but after searching it's got 10. What's a good strategy here? Thanks!

typical-coral

10/19/2023

Virtual doesn't load items when displayed in a dialog

Hello everyone, I'm working on a feature to show user's list of followers. Since I use shadcn I decided to display that list inside a dialog (https://ui.shadcn.com/docs/components/dialog ) and inside the dialog content to use @tanstack/virtual. However, when I open that dialog the items aren't displayed (height is calculated properly). Only when I switch the screen/tab I get the elements. I've found this issue on github: https://github.com/TanStack/virtual/issues/263 however, using a ref callback din't help much. ...

like-gold

10/18/2023

disable scrollToFn on the fly ?

Is it possible to disable scrollToFn option after virtualizer initialization ?

xenial-black

10/15/2023

Help virtualizing the columns on a table

I'm working on a data-grid table, that's meant to display some report data, and its using the native HTML <table> markup. I'm looking to add column virtualization to the table to improve mobile performance. The table itself, isn't too special in terms of a data-grid. It's got a sticky header, with column sorting and resizing. Though I understand, the resizing could affect the virtualization performance. Following the examples, it was pretty straight forward setting up virtualization on the table rows as well as setting up the sticky header with a ref. However, over the weekend, every attempt I took at trying to get the columns virtualized ended badly....

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