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

flat-fuchsia
flat-fuchsia7/27/2023

Add content to scrolling container

Absolutely love the library. Thank you so much for all the incredible work! I have a virtual list with sticky headers among the data. I have read through the sticky header example, and have that working perfectly. The twist is, I have other content I want to put above my virtualized content, but still inside the "parent" (scrolling) container. I have a sticky menu above my virtualized rows, with position:sticky and top:0. I stuck that content where the comment ...
exclusive-harlequin
exclusive-harlequin7/25/2023

Svelte-virtual: mousewheel and keydown cause nonstop scrolling

Hi, I'm trying to leverage svelte-virtual by following the React examples and porting to svelte. If I scroll my container using the mouse to grab a specific scroll position, it works fine. But if I use my mousewheel or keyboard arrow keys to scroll more than a few rows rapidly, suddenly I get in a loop where the component keeps scrolling on its own. Has anyone seen this before and know how to address?...
rare-sapphire
rare-sapphire7/25/2023

Performance on Grid issues with complex rows

Okay so I know this is partially my fault šŸ™‚ But I'm curious if anyone has run into something similar - I'm leveraging React Virtual to render a pretty complex set of rows/columns in the grid, and it works lovely.... except for one scenario. I have a sticky left column, and I've leveraged the Grid examples which have a const [before, after] being created by the getVirtualItems start number. The only problem is - when I scroll quickly on complex cells, the before lags behind on actually updating - so now the sticky left column also lags behind (everything is absolutely positioned, so the sticky left column is beholden to that before number, even though it's a left: 0. ...
harsh-harlequin
harsh-harlequin7/18/2023

dynamic number of columns in a grid

Hey, Is there a way have a flex / flex wrap layout in a sort of dynamic grid view using react-virtual? I have a number of thumbnails which i want to display is a grid and as i resize, id like to have the number of columns be dynamic to the width....
flat-fuchsia
flat-fuchsia7/17/2023

Compatability with MUI TreeView?

Hello, just curious about compabality with MUI TreeView !
absent-sapphire
absent-sapphire7/11/2023

Retain scrollposition when using a rowvirtualizer

I am trying to build a kanban layout and I am coupling column virtualizer for sections and row virtualizer for cards in a section. Say, I scroll down a bit on a particular section and I scroll away to the right. This will result in that particular section getting removed from the dom. When I scroll left and get back to that particular section, the section's scrolltop is reset to 0. I would ideally like to retain that scroll position and the last rendered virtual items of that section....
harsh-harlequin
harsh-harlequin6/30/2023

@tanstack/react-table v8 with @tanstack/react-virtual v3: Resizing a table with large dataset

I have a table rendering a large data set, which i want to virtualise. I want to have the columns resizable, but as i resize the ui slows down. Any ideas or examples would be welcomed. the documentation and example on the tanstack site seem to use the older react-virtual v2...
other-emerald
other-emerald6/19/2023

React - grid with colspan row

i want to implement virtual grid to this component but in blue rows (header) i need to set rowspan (to all columns.length), It is possible?
No description
fair-rose
fair-rose6/17/2023

Newbie Question: Variable Row Height Not Working Yet?

Attached is my jsx, which I've tried to copy straight from the sample code. But I must be leaving something out, because larger rows are on top of smaller rows, per the attached screenshot. What am I missing?...
No description
eastern-cyan
eastern-cyan6/16/2023

Scroll restoration solidjs

does the solid version of tanstack virtual has the scroll restoration feature?
ambitious-aqua
ambitious-aqua6/7/2023

Example for reversed virtualization using a non-window virtualizer?

I found this example by @piecyk online: https://codesandbox.io/p/sandbox/beautiful-meninsky-fr6csu?file=%2Fpages%2Findex.js%3A153%2C36-153%2C50 Also a MR and some issues related to reversing the virtual list and "reverse" infinite scroll. My usecase is also a chat app. I'm trying to recreate it for a non-window virtualizer by using 2 refs (1 for getScrollElement and 1 to access .options) but I can't get it to work properly. Did anyone ever implement this? Is there some example codesandbox that I missed? šŸ™‚...
extended-salmon
extended-salmon6/7/2023

How to handle variable item heigh based on CSS Media Queries

I'm writing a virtualized-list component with react-virtual, but this question is relevant to any windowing library: Each item in the list has the same height. The height is mostly static, except that padding/font-size change depending on the viewport size because of responsive media queries in the CSS. Because of this, the size of an item that is already rendered might change without any rerenders taking place. I'm seeking insight on the recommended approach for handling this type of dynamic sizing for virtualized elements....
xenial-black
xenial-black6/2/2023

Is virtual support class component (react) ?

I have been trying to apply TanStack virtual table on class component. but i recognized that TanStack virtual only support for function component. I tried HOC to solve this prob, but it is hard to apply to my project. Is TanStack virtual support class component? or is there any way to solve this problem? plz let me know...
continuing-cyan
continuing-cyan5/30/2023

useVirtualizer and useWindowVirtualizer

Hello! I have a component that is rendering two virtualizers, currently I am using useVirtualizer and useWindowVirtualizer, but I noticed it works using useVirtualizer for both of them. What is the ideal scenario for this? is there any difference between useVirtualizer and useWindowVirtualizer?
flat-fuchsia
flat-fuchsia5/18/2023

React Virtual Table Jumping Around

- Im seeing elements rendering in and out jumping the table around - Sometimes I see jumps to the top of the table - As I infinite scroll more elements in, the table grows in size...
optimistic-gold
optimistic-gold5/15/2023

Svelte-virtual: stuck in infinite render

I'm trying to use tanstack/table with tanstack/virtual and using an actual table element, everything is working as expected except when I scroll all the way down and get stuck into a loop and my table starts to jump up and down: ``` ā± 0 / 0 ms calculateRange ā± 0 / 0 ms maybeNotify...
foreign-sapphire
foreign-sapphire5/11/2023

Is there a way to scroll to the top of the list?

I use useVirtualizer along with useInfiniteQuery. I display a list of items, and I let the user filter records. when a user selects filter criteria, I utilize the useInfiniteQuery to pass these filters to the back end, and receive the filtered data from the back end. the problem is, if initially there is lets say 100 items in the list, and post- filter request there is 50, the scroller location is at the bottom of the list, which resulting in the virtualList spamming requests to the back end asking for me (if there's more, of course). I tried using scrollToIndex(0), or scrollToIndex(items[0]), and I tried a few other potential answers I scraped from GitHub like using rangeExtractor, but none of them seem to work....
quickest-silver
quickest-silver5/5/2023

CSS issue with aligmnet virtualizedRows with @tanstack/react-table

Hello, I finally figure out, why I had issues with pagination data into tanstack table with tanstack/react-query / tanstack/react-table Now I have issue with aligment of virtualized rows to match with columns. Should I also create a virtualizer for columns, to measure the width of the columns or is there any better way to do it? ...
No description
eastern-cyan
eastern-cyan5/1/2023

Check when you scrolled all the visible elements

I'm trying to use createVirtualizer for a paginated virtual list, I was wondering if there was a way to check if you scrolled all the visible elements in order to call a function fetchMore