TanStack

T

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

equal-aqua
equal-aqua9/9/2024

Vue 3 SSR issues

When using useWindowVirtualizer, with SSR and Nuxt 3, I'm getting the error in the screenshot: ```html [Vue warn]: Hydration children mismatch on <ol style=​"position:​absolute;​top:​0;​left:​0;​width:​100%;​transform:​translateY(0px)​;​" class=​"space-y-4">​…​</ol>​ Server rendered element contains fewer child nodes than client vdom. ...
No description
foreign-sapphire
foreign-sapphire8/31/2024

Adding new items to virtual list shows wrong content visually.

When I add new items, the virtual list shows wrong content for the new item. I scrolled down, and then back up to the new item and now it shows the correct content. How can I make the correct content appear instantly? Also, when I console.log(segments[virtualItem.index]), I see that there is correct item with the correct data, but visually there is wrong data....
xenial-black
xenial-black8/26/2024

Virtual + framer-motion

Is it possible to animate the appearance and disappearance of rows using framer-motion? I am currently experiencing that framer-motion conflicts with virtual. I need to animate the height change for each row. I encounter that when using animatepresence and motion, the element for which transform: translateY is applied behaves unpredictably....
rare-sapphire
rare-sapphire8/6/2024

Implementing Tan Stack virtualizer with Flowbite table.

How can I get the same styling on my Flowbite Table implementing Tan Stack Virtual. Can't seem to get same look as a vanilla Flowbite Table. ``` // import type { unlinkedProductData } from "@/helpers/getData"; import { useVirtualizer } from "@tanstack/react-virtual"; import { Table } from "flowbite-react";...
No description
fascinating-indigo
fascinating-indigo7/31/2024

IS the scroll being controlled?

When using the library, the scrolling is not smooth and does not seem native anymore. Is the scroll controlled by the lib ?
fascinating-indigo
fascinating-indigo7/31/2024

How to have header and footer

Hello, I have a list with a footer and header which I do not know the height in advance, I saw the example of sticky header but no example on how to do static one
quickest-silver
quickest-silver7/30/2024

Scroll Position Issue on Initial Post View

I'm working on a project with a masonry-style layout using Tanstack/Virtual, and I've run into a challenge I'd appreciate some help with. Desired Functionality - Open posts without navigating away from the main page - Maintain scroll position when viewing a post...
ambitious-aqua
ambitious-aqua7/24/2024

Problem with react query and nextjs query params

Hi, I am using react query with a custom hook for pagination but the query is not executed, it is always pending for some reason and it does not make the call, is it because of the line where I push the queries, did it happen to anyone? ```js import { OptionalParams, Pagination } from '@/types/commonTypes' import { usePathname, useRouter, useSearchParams } from 'next/navigation'...
No description
harsh-harlequin
harsh-harlequin7/23/2024

Testing a table that uses virtual with React Testing Library

I have a component that is using react-virtual and it works as expected in the UI but when testing I see that the getVirtualItems returns an empty array. Can someone please provide an example for testing using Jest and/or RTL? I can't share code because it is confidential but I think my description is as clear as possible. Thanks!...
dependent-tan
dependent-tan7/23/2024

Svelte 5

Hello there! Can't find anything about Svelte 5 migration for the bindings to tanstack/virtual. Is it on the roadmap? Maybe there is currently some fork with updated bindings and examples? Or maybe there is an issue aleady and I was just unable to find it?...
extended-salmon
extended-salmon7/23/2024

Stutter and Jumping when reaching the end of list

My infinite scroll with virtualizer looks like this: ``` const virtualizer = useVirtualizer({ count: rows.length,...
continuing-cyan
continuing-cyan7/7/2024

Solid-virtual Dynamic Height + Dynamic Data

Hi, I am using query + virtual to create a sheet with comments I went through all the issues and examples, but I still don't understand what my problem is, I am using the example List from here...
absent-sapphire
absent-sapphire7/3/2024

useVirtualize does not update on scroll

Hello! useVirtualize does not update when scrolling application. getVirtualizedItems returns 5 items, and on scroll does not update, leaving blank space behind....
conscious-sapphire
conscious-sapphire7/2/2024

Switching between row and grid

I want to allow my users to switch between row and grid modes, I currently have a row virtualizer with infinite scrolling which works well. I would like to allow 2-3 items in a row in a grid, depends on screen size. I have tried setting flex flex-wrap, and all, all in all it seems to "work" but I sometimes get this jumpy-laggy behavior like it's rendering like crazy and I am not sure how to solve it. Anyone tried to implement something like this?...
like-gold
like-gold7/1/2024

Am I missing the purpose of Virtual? can it block rendering whats off screen?

Am I missing something for the purpose of Virtual, I've use a virtual list in past to get the performance booast of not rendering whats off screen. I went to do the same with TanStack Virtual got it working but everything appears to still be rendering. for context rendering 1000's of countdowns to dates on a page, which the countdown calculations are expensive and mostly recalculate every second....
inland-turquoise
inland-turquoise6/18/2024

React peer dependency

Hey folks, does anyone know if this lib supports react 17? I tried to look in the docs and in the issues but got no luck. Before react was a peer dependency in package.json but now its not there....
eastern-cyan
eastern-cyan6/4/2024

Infinite Scroll with dnd-kit sortable

Anyone here implemented an infinite scroll container with @dnd-kit/sortable? Trying to get the styling right on the draggable element, but the virtual styling seems to clash with the sortable styling when trying to drag an element.
metropolitan-bronze
metropolitan-bronze5/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....
eastern-cyan
eastern-cyan5/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...