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

harsh-harlequin

1/1/2023

Is there a strategy to search (ctrl + F) through a virtualised list?

I understand that the content doesn't actually exist in the DOM, and therefore it can't be searchable. However, I'm sure I'm not the first person to need to address this. My use-case is that I'm rendering out a heap of paragraphs, as a result of a podcast transcript, and there are event handlers peppered throughout the words. My performance for the page is pretty 💩 when there are a lot of paragraphs (for long podcasts, it could be over 100 paragraphs). If there are only a few paragraphs though, performance is great. The reason I'm reaching for this library is that only a few paragraphs are displayed on screen at a time, so virtualising the list seems like an easy win. But it seems necessary to allow users to search through a transcript for certain words. All the paragraphs have id's and ref's, so I was thinking i could write my own search box etc. and create some kind of word map... A different solution I was thinking of, instead of using this library, was checking if a paragraph was currently in view, and only then apply the event handlers etc....

unwilling-turquoise

12/23/2022

Infinite Scroll with set number of virtual items

I'm implementing infinite scroll. When the user gets near the last item, I'd like to add a few items to the virtualizer and remove the same number from the beginning. Anyone got any tips on how to implement this behavior without causing a runaway effect?...

stormy-gold

12/23/2022

lists with common scrolling element

I'm trying to create a grouped list, so that I have one scrolling element with groups and each group contains many items. ideally the groups list and all the items list will react to the same scroll. I managed to create a non virtual groups list with virtual items lists inside: https://codesandbox.io/s/grouped-virtual-by-item-jor1nv?file=/src/App.tsx ...

genetic-orange

12/20/2022

How to use rangeExtractor properly for horizontal column virtualization with pinned or sticky column

I have got column and row virtualization working pretty well using TanStack Virtual v3 beta.31. The only remaining issue I cannot figure out is how to properly use the rangeExtractor function properly to not lose pinned columns as the user scrolls. Here is my live example: https://www.material-react-table.dev/?path=/story/features-virtualization--max-virtualization Here is my code for the virtualizer:...

like-gold

12/17/2022

react-virtual scrolling to nested components

Hey, I'm using react-virtual and for each virtual item im rendering a div with nested divs so something like this: <Element> <div>...

flat-fuchsia

12/14/2022

CSS zoom

My app uses css zoom on tablet screens. When using a window virtual scroll it breaks the rendering. Elements on the page have the same size in pixels but more space is visible in a scroll window. It's possible to achieve the same bug if you put zoom: 0.8 on the list in react virtual examples on tanstack website. Any ideas how to fix this problem?

fair-rose

12/6/2022

Using table with other components in a scrolled container

Hi, I have a table component that is positioned after the heading block. I want to be able to scroll down so it would be possible to use a full screen table. I have to use a window scroller, but not the one from the table. I've created a demo to show the issue. https://codesandbox.io/s/funny-dream-bo34ub?file=/src/App.js...

wise-white

12/6/2022

support es5

Do you plan to support es5 in this library?

unwilling-turquoise

12/4/2022

How to implement scroll snapping

Hi, has anyone implemented scroll snapping? My initial thought was just to put a debounced callback on the container scroll handler, finding the closest virtualItem in the measurements cache and scrolling there with scrollToOffset. I was experiencing some janky behavior which I suspect is because scrollToOffset itself also triggers the scroll handler. So it can sometime queue an unwanted scroll after it snaps to the closest virtual item....

stormy-gold

11/26/2022

How to add gaps to the infinite scrolling list?

I have a simple infinite scrolling list (for ease mind it just a huge one-page list) and it's just the same as the docs example https://tanstack.com/virtual/v3/docs/guide/introduction With this useVirtualizer options ```ts const options = {...

probable-pink

11/24/2022

Delay IsLoading...

i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the data. I've tried a number of implementations and failed, can anyone help? ```js const { isLoading, isError, data } = trpc.ticketDomain.getByTicketId.useQuery(...

foreign-sapphire

11/24/2022

Is there example of using useWindowVirtualizer with a Table?

I've got V3 latest version working with a fixed height table using the example in react-tables (suggestion: example should be updated to V3) but now I'm trying with useWindowVirtualizer and I'm getting the first rows rendered, but no re-renders as I scroll down the page. Are there any working examples of using the useWindowVirtualizer with a table I can refer to?

ambitious-aqua

11/23/2022

Troubles with integration to MUI Menu

Hi, I'm testing the lib, to integrate it in front end, and i came across two weird issues

like-gold

11/21/2022

What does scrollMargin do ?

I was going through react , dynamic example for beta version. In that I came across this code ```ts const RowVirtualizerDynamicWindow = () => { const parentRef = React.useRef<HTMLDivElement>(null)...

fair-rose

11/16/2022

How to use v3 with HTML table and infinite scroll?

Hi! I found the following post (https://discord.com/channels/719702312431386674/1026081427583930429) asking a similar question, but with v2 of virtual library. Looks like with virtual I need 3 types of elements:...

multiple-amethyst

11/14/2022

virtual items are accordion

I'm struggling with this issue the problem is: I have a huge list of accordions. I need to virtualise them otherwise the browser struggle to handle that. ...

optimistic-gold

11/8/2022

Failed to resolve - Vitest

Hi 🙂 Please, how I do for resolve this problem when I test with vitest: Error: Failed to resolve entry for package "@tanstack/react-virtual". The package may have incorrect main/module/exports specified in its package.json....

conventional-tan

10/25/2022

How to make one column grow, and all others occupy space depending on content

Hello, I am currently working on a project using react-table version 7, and in that project we plan to display more than 500 tables (all tables will have a dynamic number of columns, from 4 to 20 and more). Tables are rendered with the useFlexLayout hook. But the question would be partly simple. There is one column that must occupy as much space as possible. The remaining columns must occupy as much space as the content of the header (cells should resize if the header expands when the sorting ic...

quickest-silver

10/8/2022

Styling Virtualized List issue

Hi everyone, I'm farily new to working with TanStack Virtual library and it seem's I'm constantly battling styling issues as there is alot of position absolute. Is there a way to add spacing between elements in a list ?...

like-gold

10/6/2022

Any pitfalls or reason to not have multiple records in a row when using useWindowVirtualizer?

Use case is infinite scroll where each row contains three records

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