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

sensitive-blue

3/27/2025

Unexpected undefined error

Hi, I am getting an error coming from react-virtual I guess… "Unexpected undefined at notUndefined" and I don’t understand what exactly is wrong in the code and what to fix…

dependent-tan

3/24/2025

Is there a way to render "ghost" items in a virtual list when a user scrolls too fast?

Right now whenever I scroll an infinite list of items it skips rendering the items and does't show anything until the velocity of scrolling decreases. I'd like to render empty "ghost" boxes in that case, like it's possible with React-Virtuoso. Is this possible with Tanstack/Virtual ?

exotic-emerald

2/23/2025

Is it possible to implement nested virtualization with @tanstack/virtual

Hey is it possible to implement nested virtualization with @tanstack/virtual, or is it better to flatten everything into a single list for better performance? I have a hierarchical data structure like this: ```js const data = [...

rare-sapphire

2/17/2025

Creating a virtualized table of dynamic container size

I am trying to use tanstack Table in conjunction with tanstack Virtual to make a table that can contain both a lot of elements and also support infinite scroll. For the most part, functionally, it seems to be working great. But for the life of me I cannot figure out how to make the container dynamic to the viewport. I have two elements in a psuedo-fullscreen page where the table should grow to fill all remaining space. However all the examples in the docs combining these two libraries use fi...

stuck-chocolate

2/13/2025

Floating UI / Virtual with extra header element

Hi, I'm using the Floating UI Select / Virtual example as a base: https://codesandbox.io/p/sandbox/l10rjs With my updates: https://codesandbox.io/p/sandbox/nostalgic-tristan-skfs9t ...

xenial-black

2/9/2025

Tanstack virtual with multiple sections without fixed heights

Hi everyone 👋 I'm currently looking into how I can implement TanStack virtual for a grid like setup with the setup in the screenshot. I originally thought I could potentially use 2 window virtualizers but that conceptually doesn't make too much sense nor does it seem adviseable. ...

ambitious-aqua

2/8/2025

Server console with virtual + text wrapping

How would i properly calculate the height of each line dynamically based on screen/parent size?

inland-turquoise

1/26/2025

All list not rendering in shadcn Select component

I have 242 items on my options array. But virtualizer only render 42 items. Can someone help me to fix my issue? You can see the example here: https://stackblitz.com/edit/vitejs-vite-dt6km4bw?file=src%2FApp.tsx...

dependent-tan

1/10/2025

Can I use Masonry example to implement this hierarchical stricture?

I want to implement this hierarchical structure. I tried using Masonry example, but I think it requires a large overscan which is not scalable. Because if I sequentially put the nodes in preorder (USA, WA, BEL, Foo, Bar, SEA, Foo, Bar, WA Total, ...), I need a large overscan to be able to scan USA. How can I overcome this issue? Looker's pivot table does support this virtualized hierarchical structure....

afraid-scarlet

12/24/2024

US partner wanted for a profitable venture

I’m working on an exciting business idea and need a partner to help bring it to life. Here's what you can expect: -A comfortable fixed monthly salary with a light and manageable workload. -No financial investment or technical expertise required—just your willingness to collaborate....

stormy-gold

12/20/2024

Add gap between items with dynamic height

I'm using the example with the dynamic height. How to add a gap between each item? There is a property called gap but it doesn't work for me.

dependent-tan

12/17/2024

Does tanstack/virtual add any debounce to scroll event?

I built a pivot table which syncs the scroll position of body, row headers, and column headers. Before using tanstack/virtual, the header is always aligned with the body. After using tanstack/virtual, I found that the headers are lagged behind the scroll position of the body. Can anyone share some insight? Thanks. v Gif of before and after...

correct-apricot

12/13/2024

Custom scrollbars with tanstack/virtual

i have a scrollarea component from @mantine, which uses custom scrollbars to scroll inner element (likely via syncing scroll positions) this triggers getScrollElement of rowVirtualizer each frame causing big perf drops any solutions on using tanstack virtual with such custom scroll elements? works fine with native scroll event from mouse...

plain-purple

12/9/2024

Window based virtualization

I'm working on a scenario where I have an outer virtualized list, and each item in the outer list contains an inner list. Here's the setup: The outer virtualized list has a fixed height (e.g., 500px) and scrolls within its container. Each inner list is not virtualized and can exceed the height of the outer list's viewport....

dependent-tan

12/5/2024

Implement a virtualized tree structure

I'm implementing a pivot table. I want to use react-virtual to implement the virtualization of the pivot row/column headers. May I know how to achieve that? I wonder if I should use nested virtualization, or flatten the different rows in column headers and virtualize them separately. Should I use tanstack-table if this is supported there already?...

absent-sapphire

12/4/2024

how to implement drag and drop by using react-virtual?

no example found in docs

wise-white

11/25/2024

Scrolling issues on iOS only

Hello, I'm trying to use the tanstack virtual list in my svelte 5 application, but I've been running into an issue that only happens on iOS. Basically when you scroll, it doesn't have any momentum on iOS. I've tested it on an android phone, MacOS, and linux and it doesnt have the issue. Anyone have any ideas on how to fix this? Here is my code: ```ts...

magic-amber

11/24/2024

Keeping previous scroll position when using useWindowVirtualizer

I am currently using the useWindowVirtualizer hook for a large list of about 2000+ items. I am also using react-router-dom (but not against migrating to tanstack router but it will be quite a large refactor) When I scroll down the list and click on any item to go to the single item page and then go and click the browers back button, I want the list to scroll to that item. But if just goes back to the top of the page. I removed the actual virtualizer part and just renderd it as a pure html ul list and it works as expected, so it must be something to do with the useWindowVirtualizer hook. Im guessing it must be to do with the initialOffest or something....

like-gold

11/22/2024

Help needed 😭: Editable Cells, total calculations, react-hook-form to handle data state

react-virtual table + react-hook-form (useFieldArray) Link: https://codesandbox.io/p/devbox/vigilant-proskuriakova-w6hspc Total I'd like to ask for help: How to calculate the "total" values for rows with the same "category" if the cells are editable? (category is set in data for every item). I tried to use aggregateFn, but couldn't manage it. Probably using the useWatch on every "onChange" event to calculate the total is not efficient....

absent-sapphire

11/21/2024

How to run "npm run start" using Tanstack start?

Hello, After I have been running "npm run build" in the terminal, I though I could start it by running "npm run start", but I do get the following error: ERROR Cannot find module '/Users/mathias/GitHub/flowthings/.output/server/index.mjs' imported from /Users/mathias/GitHub/flowthings/node_modules/vinxi/bin/cli.mjs 11:32:37 AM...

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