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

wee-brown

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

extended-salmon

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

extended-salmon

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

fair-rose

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?

fair-rose

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

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

like-gold

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

extended-salmon

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.

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

optimistic-gold

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

genetic-orange

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

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

quickest-silver

12/4/2024

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

no example found in docs

sensitive-blue

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

foreign-sapphire

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

deep-jade

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

exotic-emerald

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

other-emerald

11/20/2024

Sticky cells with two axis virtualization

I'm trying to create a grid virtualized in both axis to have the first col / first row to be sticky. I'm having some troubles figuring out how to do this and cant find any example. What am I missing? https://codesandbox.io/p/devbox/white-butterfly-hhx24c...

vicious-gold

11/19/2024

rows are jizzy

i have this ```ts const virtualizer = useVirtualizer({ count: data?.spaces.length ?? 10000, getScrollElement: () => parentRef.current,...

quickest-silver

11/15/2024

Is there any options or key in useVirtualizer working like dependencies in useEffect?

``` const virtualizer = useVirtualizer({ count, getScrollElement: () => virutalParentElement.current, estimateSize: () => 5,...

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