2

I am using React Table Virtuoso for a large list of loads in my React app. The table updates every n seconds by prepending newly found loads to the top. However, this causes an issue where the existing items are pushed down, making the scroll position jump and resulting in a loss of sight tracking of the currently viewed loads.

What I Have Tried: I attempted using the firstItemIndex prop of Virtuoso, which helps maintain scroll position to some extent. However, the table still jumps because new items shift everything down. I considered temporarily freezing the scroll position, but I haven't found a good way to do this in Virtuoso while allowing new items to appear naturally.

Expected Behavior: I want new loads to prepend to the table without affecting my current scroll position or causing the list to jump unexpectedly.

Question: How can I properly stabilize the scroll position in React Table Virtuoso when prepending new items? Are there any best practices or workarounds for this issue?

Code:

<TableVirtuoso
                            ref={tableRef}
                            data={renderingRows}
                            style={{
                                flexShrink: 1,
                                height: '95%',
                            }}
                            components={virtuosoComponents}
                            fixedHeaderContent={() => <TableHeader {...tableHeaderProps} />}
                            increaseViewportBy={800}
                            firstItemIndex={firstItemIndex}
                            computeItemKey={(index, load) => load._id + (index % 2 !== 0 ? '-expanded' : '')}
                            overscan={50}
                            scrollerRef={handleScrollerRef}
                            context={{
                                handleRowClick,
                                trackOpenUIElement,
                                removeOpenUIElement,
                                openUIElements,
                            }}
                            itemContent={<LoadRow/>}
                        />
1
  • Please provide enough code so others can better understand or reproduce the problem. Commented Mar 10 at 20:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.