Table Height Not Expanding When Expanding Bottom Rows with Subrows

[RaimonxDev]

Hello, I have an issue with row expansion and sub-rows. When I expand rows, particularly those at the bottom of the table, the table doesn't automatically increase its height, so the expanded sub-rows are not visible. I checked the official example and it has the same issue. Has anyone been able to solve this problem?

Expand the last row and you will see that the subrows are not visible, unlike in the first row.
https://tanstack.com/table/latest/docs/framework/react/examples/expanding

Thanks

[amasen02]

Why this happens

In the expanding example, the issue usually comes down to one of two causes depending on whether your table is container-constrained (CSS) or virtualized:

1. CSS Scroll & Overflow Container Constraints

In many layouts (and dashboard wrappers), the table container is set with a fixed or constrained height (height: 100%, max-height: 500px, or overflow: hidden / overflow-y: auto).
When expanding top or middle rows, the table content grows downwards within the existing scrollable viewport. But when you expand rows at the very bottom:

• The newly rendered sub-row <tr> elements push beyond the current scroll boundary.
• If the outer parent has overflow: hidden or clip, the sub-rows are clipped and invisible.
• If the outer container has overflow-y: auto, the sub-rows are rendered below the current scroll fold, so without scrolling down, they appear "hidden" or cut off.

2. Virtualized Tables (@tanstack/react-virtual)

If you are combining row expansion with TanStack Virtual:

• The virtualizer must know the total count of currently visible rows (including expanded sub-rows), which comes from table.getRowModel().rows.length (not data.length).
• When a row is expanded, the row's height changes dynamically. If dynamic measurement (measureElement) is not attached to the row DOM node, the virtualizer assumes the default estimated row height, cutting off bottom sub-rows outside the virtual window.

---

Solutions

Solution A: CSS Container Configuration (Non-virtualized)

1. Ensure the parent container allows vertical growth or enables automatic scrolling:

/* Bad: clips bottom sub-rows */
.table-container {
  max-height: 500px;
  overflow: hidden; 
}

/* Good: dynamic container expansion with scroll fallback */
.table-container {
  min-height: fit-content;
  overflow-y: auto;
  max-height: 80vh; /* or unset if page-level scroll is used */
}

2. Auto-scroll bottom expanded rows into view:
   Add an effect or click handler so that expanding a bottom row automatically scrolls the expanded sub-rows into the viewport:

<button
  onClick={() => {
    row.toggleExpanded();
    // Scroll into view if near the bottom
    setTimeout(() => {
      if (!row.getIsExpanded()) {
        const el = document.getElementById(`row-${row.id}`);
        el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    }, 50);
  }}
>
  {row.getIsExpanded() ? '👇' : '👉'}
</button>

---

Solution B: Virtualized Tables (@tanstack/react-virtual)

If using TanStack Table with @tanstack/react-virtual, drive the count with table.getRowModel().rows.length and attach rowVirtualizer.measureElement:

const { rows } = table.getRowModel();

const rowVirtualizer = useVirtualizer({
  count: rows.length, // Automatically updates when rows expand
  getScrollElement: () => tableContainerRef.current,
  estimateSize: () => 48,
  overscan: 5,
});

return (
  <div ref={tableContainerRef} style={{ overflow: 'auto', height: '600px' }}>
    <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
      {rowVirtualizer.getVirtualItems().map(virtualRow => {
        const row = rows[virtualRow.index];
        return (
          <tr
            key={row.id}
            data-index={virtualRow.index}
            ref={rowVirtualizer.measureElement} // Crucial: dynamically updates virtualizer height when sub-rows expand
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              transform: `translateY(${virtualRow.start}px)`,
              width: '100%',
            }}
          >
            {/* Render cells and sub-row indicators */}
          </tr>
        );
      })}
    </div>
  </div>
);