Expanding rows in a virtualized table will cause it to scroll to top #656

Activity

1. KevinVandy commented on Jan 26, 2024

   

   KevinVandy

   on Jan 26, 2024

   Member

   More actions

   Yeah it seems that anything that causes the count option to change will cause an automatic scroll to the top
2. Gumichocopengin8 commented on Apr 3, 2024

   

   Gumichocopengin8

   on Apr 3, 2024

   More actions

   im having the same issue. Are there any workaround or fixes?

   👍React with 👍21Reacted by Patrick Rogg, Daniel, Nikhil-br, Roman, Tomas P., vladearnix, Nicholas Narsing, Nayan Mathur, Fatou DIALLO, Rebecca Tay and 11 more
3. mshameer237 commented on Jun 24, 2025

   

   mshameer237

   on Jun 24, 2025

   More actions

   im too having the same issue. any solutions yet?
4. zhangcheng690 commented on Dec 29, 2025

   

   zhangcheng690

   on Dec 29, 2025

   More actions

   im having the same issue also, it seems that it cannot be resolved
5. aimerthyr commented on Feb 12, 2026

   

   aimerthyr

   on Feb 12, 2026

   More actions

   Is there a way to solve this?
6. Silverium commented on Mar 25, 2026

   

   Silverium

   on Mar 25, 2026

   More actions

   I've been playing around with it, and looks like expanding a row is incompatible with the <table> constraints regarding children (like a <div> can't be a direct child of <tr>).

   So if we have a structure like this:

   <tbody>
     <tr       
         data-index={virtualRow.index}
         ref={rowVirtualizer.measureElement}
         style={{
           position: 'absolute',
           transform: `translateY(${virtualRow.start}px)`,
         }}
     >
      {row.getVisibleCells().map(cell => <td>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>)}
      // we can't add a div here as expandable
     </tr>
     // if we add an extra <tr> here, the problems are...
   </tbody>

   The first problem with adding an extra <tr> is that it is not measured with rowVirtualizer.measureElement as it is part of another element, and its position is not either re-calculated with the resize observer either.

   The second problem is that its position would also have to be calculated with an absolute + translate strategy.

   I've tried with the given solution to replace the rowVirtualizer.measureElement, which is supposed to be rowVirtualizer.resizeItem, but I was unable to make it work properly.

   My final thoughts are:

   • Expanding a row with custom content looks out of scope for a regular <table>
   • If we want to present a small <table> inside the expanded content, we can't because of the parent's <table> constraints, so there is no point in using an additional <tr> or breaking the rules of the <table> and squeezing a <div> element

   My final solution was to use a "div table", and then all works as expected:

      <div
         role="row"
         key={row.id}
         className={`tr cursor-pointer ${virtualRow.index % 2 === 1 ? 'odd-row' : 'even-row'} flex flex-col flex-wrap-wrap`}
         style={{
           position: 'absolute',
           transform: `translateY(${virtualRow.start}px)`,
         }}
         data-index={virtualRow.index}
         ref={rowVirtualizer.measureElement}
       >
         <div
           onClick={event => {
             onClickRow?.(event, row.original);
           }}
           className={`flex flex-ai-stretch w-full`}
         >
           {row.getVisibleCells().map(cell => 
            <div className="td" role="cell">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>)
            }
         </div>
         {renderExpandedRow && row.getIsExpanded() && (
           <div key={`${row.id}-expanded`} className="expanded-row w-full">
             {renderExpandedRow({ row })}
           </div>
         )}
       </div>

   Key points:

   • ref={rowVirtualizer.measureElement} is in the parent of both the pseudo td elements (wrapped in a div) and the extra div element, which will contain the expanded content
   • The position for the virtualiser is calculated only once, applied to the parent div.tr
7. piecyk commented on Oct 15, 2026

   

   piecyk

   on Oct 15, 2026

   Collaborator

   More actions

   I can reproduce this with the code from the StackBlitz. The cause is how the code creates the virtualizer.

   The code creates the virtualizer in a reactive statement:

   $: virtualizer = createVirtualizer({ count: rows.length, ... })

   When you expand a row, rows.length changes, and Svelte creates a new virtualizer. A new virtualizer does not know the old scroll position. When it attaches, it writes its initialOffset to the scroll element. The default is 0, so the list goes to the top.

   Workaround: create the virtualizer one time, and change the count with setOptions:

   const virtualizer = createVirtualizer({
     count: rows.length,
     getScrollElement: () => virtualListEl,
     estimateSize: () => 34,
   })
   
   $: $virtualizer.setOptions({ count: rows.length })

   With this change, the scroll position stays the same when you expand a row.

   The Svelte examples in this repository use the same reactive pattern. We will change them, so that other users do not have the same problem.