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
disable scrollToFn on the fly ?
Is it possible to disable scrollToFn option after virtualizer initialization ?
Help virtualizing the columns on a table
I'm working on a data-grid table, that's meant to display some report data, and its using the native HTML <table> markup. I'm looking to add column virtualization to the table to improve mobile performance.
The table itself, isn't too special in terms of a data-grid. It's got a sticky header, with column sorting and resizing. Though I understand, the resizing could affect the virtualization performance.
Following the examples, it was pretty straight forward setting up virtualization on the table rows as well as setting up the sticky header with a ref. However, over the weekend, every attempt I took at trying to get the columns virtualized ended badly....
spamming scrollToIndex scroll bug
Hi,
I'm using virtual to create a swiper of many items. I bind an index increment onKeyDown arrows.
Despite a throttle on the key press, when spamming one arrow (or keep pressing) scroll starts shaking and bugging.
I have scroll behavior "smooth", and it does the same with scrollToOffset method and I'm running out of Idea on how to deal with this...
Any help would be much appreciated....
Nested Virtual
Hi,
I have nested virtual lists with behavior smooth, but the nested list is smooth only at first render, when the nested list is un-rendered and then re-rendered, smooth behavior is not working..
Any help ?
thanks...
Virtual infinite loop mode
How to create a loop mode with virtual ?
For example if you have a list from [0,...,10], when I'm scrolling to the 10 element if I keep scrolling it will loop from the beginning of my list [7, 8, 9, 10, 0, 1, 2] without scroll back to the first index but more like the infinite mode.
I've tried to play with rangeExtractor without any success.......
Scrolling doesn't work properly
Hey there, I have an issue with scrolling. When I scroll this weird bounce and scroll to top happens. I checked with a useEffect and it doesn't seem like the component is rerendered.
Reverse virtual scroll
hello I'm making a chat app with react query and react virtual. To display the messages I need to virtualize the list starting from the bottom with the latest message.
I have implemented a virtual scroll and it work fine to display in the natural order ( top to bottom). To reverse the display I have apply transform with scaleY(-1) to both scroller and items. However now my mouse wheel is reverse.
To counter the reverse mouse whell I have found a snipset on github. ...
sticky header for virtualized table gets scrolled after scrollTop reaches table height
I have an issue with a virtualized table with a sticky header.
Apparently the
sticky css suppose that scrollTop of the container is less than the height of the content being scrolled.
But for virtual lists this is not true, because height of the content is quite fixed = (overscan * 2 + number of visible rows)*rowHeight , but the conteiner's scrollTop property being increased as you scroll.
That way, after you scroll to the point when scrollTop is bigger than the content's height, sticky header gets scrolled up together with the rows. (it will flicker unpleasantly before doing so).
...Why npm i @tanstack/react-virtual installs alpha??
The title. In documentation there is installation instructions :
npm install @tanstack/react-virtual@beta
Why it defaults to alpha version, where even imports are different from what are described in documentation?...Mui-Autocomplete with Infinite Query
Hello all! I'm currently working on an Autcomplete component (https://mui.com/material-ui/react-autocomplete/#virtualization) with MUI. I'm trying to use tanstack virtual in addtiona to infinite query. MUI's ref system is odd and is throwing me for a loop. I'll get my initial results but when I reach the bottom of what I think is the ref container, my data isn't updated even though my tools and network state that I've recieved all my results. Any help here would be greatly appreciated (I can pro...
Does anyone have an a basic example of using solid-virtual?
Looking for something super simple to demonstrate it's basic use. The documentation is a tad confusing and the React use seems pretty different.
Thanks!...
Initialize (dynamic) list with scroll centered on a particular element?
Bumping this discussion for visibility: https://github.com/TanStack/virtual/discussions/579
We have a dynamic virtualized list being used as a chat messenger. We allow users to search for a particular message and would like the virtualized list to open with that message centered. Is this possible? I know with dynamic elements everything is more challenging.
In lieu of this we are currently trying to "scroll to the selected message" on initial render, but due to the weight of our message components we have not yet been able to get the scroll acceptably fast....
Facing issues with react-table column visibility along with react-virtual
I'm using virtualization horizontal, and on adding the column-visibility from tanstack/react-table the virtualization window is shifted to the right side, hence whenever I'm scrolling horizontally the virtualization window is getting out of the screen.
If I increase the overscan option then its resolved as the number of DOM nodes rendered increases, but that isn't what I want.
Any way around so that I can control the size of the virtualization window as in where it should start and end ?...
Scroll on initial render?
Hello there I am having troubles using the scrollToIndex function of the virtual library on initial render. I put the scrollToIndex in a useEffect so that when the component is rendered I scroll to the last selected item. Is this currently possible. If I put a delay to the scrollToIndex function in the useEffect. For example 200ms it does scroll to the desired index after the timeout.
pass array to rowVirtualizer
hey, How do you pass your own array to rowVirtualizer? like I want to pass my list to be virtualized. but all the examples on the website is just about rendering a simple div with virtualRow.index prop. I want to pass a component with its own props. How do you do that?
:reactvirtual:...
v3 Virtual List in Tanstack Table v8
Having issues where I am getting a large amount of bottom padding when scrolling when there are more items.
Used this as a reference: https://github.com/Rayologist/next-template/blob/8b934ff38d69afa488fc7411c24c56933e01d072/src/components/Table/index.tsx#L173
```ts...
Use virtual scroll list in the middle of a scrollable <div>
I am trying to use a virtual scroll list in the middle of scrollable <div> element. Unfortunately, the list is always placed at absolute coordinates instead of flowing naturally with the rest.
Here is a minimal working example: https://stackblitz.com/edit/solidjs-templates-nexbnn?file=src%2FApp.tsx
The code uses SolidJS, but that should probably not matter....
Usage when estimateSize should be updated after mount?
I'm currently trying to calculate each item's size after mount (
item count / view window size), but the virtualizer doesn't reflect the size change.
I understand that it is not a good idea to calculate size changes every time the estimateSize function reference changes, but it's making my usecase unusable ðŸ˜
Maybe we could introduce something like a key option to reinitialize (or at least recalculate) the virtualizer after mount 🤔 not sure if it's the best way to solve the problem though....Svelte-virtual performance with table
Hi, I am building a table that virtualizes in the row and column direction. I have used svelte-virtual to get the table working, but even when I am testing the virtualization, scrolls of significant size seem to cause the entire window to blank out and not re-render. It seems the bigger the scroll jump, the longer this blank window persists. I recognize this is expected to happen occasionally with a virtual table, but in this case it happens extremely frequently.
Is this expected? is it a bug? Am I perhaps using svelte-virtual wrong?
See attached video...
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...