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

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

afraid-scarlet

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

generous-apricot

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

other-emerald

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

afraid-scarlet

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

vicious-gold

11/28/2023

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

(in the presence of overscan)

inland-turquoise

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

ambitious-aqua

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

adverse-sapphire

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

fair-rose

11/7/2023

Virtual and CMDK

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

ratty-blush

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.

fair-rose

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

rising-crimson

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

wee-brown

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!

rising-crimson

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

rising-crimson

10/18/2023

disable scrollToFn on the fly ?

Is it possible to disable scrollToFn option after virtualizer initialization ?

genetic-orange

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

rising-crimson

10/10/2023

spamming scrollToIndex scroll bug

Hi, I'm using virtual to create a swiper of many items. I bind an index increment onKeyDown arrows. Despite a throttle on the key press, when spamming one arrow (or keep pressing) scroll starts shaking and bugging. I have scroll behavior "smooth", and it does the same with scrollToOffset method and I'm running out of Idea on how to deal with this... Any help would be much appreciated....

rising-crimson

10/10/2023

Nested Virtual

Hi, I have nested virtual lists with behavior smooth, but the nested list is smooth only at first render, when the nested list is un-rendered and then re-rendered, smooth behavior is not working.. Any help ? thanks...

rising-crimson

10/9/2023

Virtual infinite loop mode

How to create a loop mode with virtual ? For example if you have a list from [0,...,10], when I'm scrolling to the 10 element if I keep scrolling it will loop from the beginning of my list [7, 8, 9, 10, 0, 1, 2] without scroll back to the first index but more like the infinite mode. I've tried to play with rangeExtractor without any success.......

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