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/>}
/>