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

xenial-black
xenial-black8/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
molecular-blue
molecular-blue7/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 ?
molecular-blue
molecular-blue7/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
optimistic-gold
optimistic-gold7/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...
harsh-harlequin
harsh-harlequin7/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
flat-fuchsia
flat-fuchsia7/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!...
wise-white
wise-white7/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?...
stormy-gold
stormy-gold7/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,...
absent-sapphire
absent-sapphire7/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...
generous-apricot
generous-apricot7/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....
foreign-sapphire
foreign-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?...
flat-fuchsia
flat-fuchsia7/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....
typical-coral
typical-coral6/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....
sensitive-blue
sensitive-blue6/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.
foreign-sapphire
foreign-sapphire5/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....
like-gold
like-gold5/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...
grumpy-cyan
grumpy-cyan4/29/2024

tanstack multiple shorting

I'm using the Tanstack table. Can it give me the latest sorting at index 0?
sunny-green
sunny-green4/29/2024

How to virtualize a grouped list?

I want to virtualize a MUI Autocomplete component that has groups. The structure is as below. Seems a bit counterintuitive to virtualizing. Any ideas?