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

extended-yellow

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

inland-turquoise

11/19/2024

rows are jizzy

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

foreign-sapphire

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

exotic-emerald

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

flat-fuchsia

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

fair-rose

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

reduced-jade

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

sunny-green

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

xenial-black

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

ratty-blush

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

optimistic-gold

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?

rare-sapphire

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?

fair-rose

10/9/2024

TanStack Virtual ResizeObserver bug

I'm creating a chat app, where everytime I switched room the ResizeObserver error occured.

magic-amber

10/7/2024

Creating a placeholder

Is there a way to make a placeholder? ```ts const rowVirtualizer = useVirtualizer({ count: rows.length,...

wise-white

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

itchy-amethyst

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

itchy-amethyst

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

yelping-magenta

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

other-emerald

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

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

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