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

quickest-silver
quickest-silver
View on Discord
11/13/2024

Table data does not update when using virtualization

When using angular signals for table data along with row virtualization, the table does not update when the signal data changes
conscious-sapphire
conscious-sapphire
View on Discord
11/13/2024

Re-render issue: Masonry Grid implementation in Next.js

Hello, I've been facing this issue for a while now, I have a masonry grid that renders images from an external source, and when the image source is broken, I set the source to a default image that shows the image is broken. Now every time I scroll, the image starts loading again (because I have a shimmer effect flash for a sec), and it doesn't have to be a big scroll, it could be as little as little as a few pixels (~10px)....
xenial-black
xenial-black
View on Discord
11/6/2024

Virtualized Table border issue

I'm gutted, i've been stuck for 2 days trying to fix this nasty styling issue. Pretty sure it's skill issue and I very in need of help. TLDR: the borders of the table rows seem to stop working when i try adding virtualization. Attached is a video showcasing the issue im facing as well as the example data-table i used. This data-table is mainly based off the example from the docs: https://tanstack.com/virtual/latest/docs/framework/react/examples/table...
tame-yellow
tame-yellow
View on Discord
11/2/2024

How to create a Virtualized Pivot Table?

I want to create a pivot table like this https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/PivotGrid/VirtualScrolling/MaterialBlueLight/ using tanstack. There are row/column headers and cells. Row/column headers are virtualized vertically/horizontally, and cells are virtualized in both directions. I'm aware of the grid example in https://tanstack.com/virtual/latest/docs/framework/react/examples/fixed But there are no headers in this example. A tricky part is to stay all 3 of them synced in position. Some pointers/ideas would be appreciated!...
flat-fuchsia
flat-fuchsia
View on Discord
10/29/2024

Problems with jank in firefox

I'm having a problem with the transform offset doing small jumps occasionally after a scrollToIndex, specifically in firefox, and not chromium (haven't tested safari). The virtual items are dynamically sized. overflow-anchor: none didn't help. Below is the most relevant portion of the code. I was using top for positioning for other reasons, but I have the same problem whether using top or transform. ```jsx...
ratty-blush
ratty-blush
View on Discord
10/27/2024

How to update the created virtualizer instead of creating a new one every time an option is changed?

Currently, I'm following the examples to create the vitualizer like this: ```ts let rowVirtualizer = $derived( createVirtualizer({ count: rowCount,...
fair-rose
fair-rose
View on Discord
10/18/2024

cant find DynamicList with List Example

Hey there. I have just started building out an app which uses tansstack virtual (which is so good by the way). There are some great examples but the one I do want is 'List - window as scroller" which it seems the example for a Dynamic list should have but when you click on that button it says not found. ...
No description
other-emerald
other-emerald
View on Discord
10/16/2024

Are there any plans for supporting React Native?

React Native support would be pretty slick for this library. Any plans to support React Native?
flat-fuchsia
flat-fuchsia
View on Discord
10/10/2024

virtual-core doesn't load in browser due to expecting process.env.NODE_ENV

I'm trying this library out in vanilla JS and getting an error due to the library checking process.env.NODE_ENV in several spots. Could this be checked safely so it doesn't blow up in browsers?
like-gold
like-gold
View on Discord
10/9/2024

TanStack Virtual ResizeObserver bug

I'm creating a chat app, where everytime I switched room the ResizeObserver error occured.
No description
robust-apricot
robust-apricot
View on Discord
10/7/2024

Creating a placeholder

Is there a way to make a placeholder? ```ts const rowVirtualizer = useVirtualizer({ count: rows.length,...
ratty-blush
ratty-blush
View on Discord
10/5/2024

Trying to wrap my head around dynamically inserting elements in table

Hello, friends! I apologize for the vagueness in advance; this is my first time using useVirtualizer and I'm still trying to wrap my head around how everything fits together. I'm working on a custom hook that extends useVirtualizer to support a table of expansible/collapsible rows (<tr>). Each <tr> has an onClick handler either passed directly to it or to a child element that causes additional sibling rows to render. I managed to make it work where each "parent" row can have a single child by manually measuring the child and adding that height to the parent. Each parent row is positioned with translateY(virtualItem.start) and children with translateY(virtualItem.end - parentHeights[virtualItem.index]). This works for a single additional row, but would've gotten unwieldy fast as I wanted to support n child rows. For reference, this is the component I'm working on, and this is the virtualized version of the regular table component, without expand/collapse....
yappiest-sapphire
yappiest-sapphire
View on Discord
10/1/2024

Is there a way to group common columns without loosing type safety?

Please check the problem here: https://github.com/TanStack/table/discussions/5764#discussion-7258889
yappiest-sapphire
yappiest-sapphire
View on Discord
9/28/2024

Preserve cells alignment after adding virtualization to shadcn data table.

I am using shadcn data table and trying to implement virtualization, but as soon as I add virtualization to it the cell alignment breaks and everything adopts randow width. Is there a way to preserve the default cell styling? I have attached related photos. Thanks in advance....
No description
foreign-sapphire
foreign-sapphire
View on Discord
9/27/2024

Virtualized list not rendering options

Hi, i'm trying to virtualize a list using shadcn combobox. I followed your examples to try to implementing it but my list is not rendering the options. Check both files to see what im talking about....
No description
wise-white
wise-white
View on Discord
9/24/2024

Initialize the Virtualizer with an initial scroll to index

Hello, is it possible to load the virtualizer (vue) with an initial index that is otherwise reached by using the scrollToIndex function. This would prevent the unnecessary loading of the first few elements (depending on the overscan value). Thanks in advance....
foreign-sapphire
foreign-sapphire
View on Discord
9/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
deep-jade
deep-jade
View on Discord
8/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....

message.txt

crude-lavender
crude-lavender
View on Discord
8/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....
rival-black
rival-black
View on Discord
8/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
PreviousNext