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
Reverse infinite scroll
How we can implement reverse infinite scroll?
I tried following with
flex flex-col-reverse and it didnt work.
main usage for this is infinite scroll in chats...Do virtual list items have to be positioned absolutely?
All of the examples have absolute positioning, is this required?
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 ...
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?...
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. ...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....
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....
@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...
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?
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?...
Scroll restoration solidjs
does the solid version of tanstack virtual has the scroll restoration feature?
Hi, I'm struggling with text wrapping inside the cells after I added Virtualization to my table.
As such, the cells don't line up with the columns.
I have followed this tutorial: https://tanstack.com/virtual/v3/docs/guide/introduction...
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? š...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....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...
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?
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...
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...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....