Sticky columns (left + right) and overflow handling with Virtualizer + TableLayout

[RobHannay]

Context

We're using Virtualizer with a custom TableLayout subclass inside ResizableTableContainer to build a virtualized, resizable table with both left-sticky and right-sticky columns (e.g., a frozen checkbox + name on the left, and an actions menu pinned to the right edge).

We've got it working, but the solution required several workarounds that feel like they'd benefit from first-class support. Sharing our approach here in case it's useful to others or to discuss whether any of this could be built into the library.

What we needed

1. Left-sticky columns — always rendered, pinned to the left edge of the scroll viewport
2. Right-sticky columns — always rendered, pinned to the right edge of the scroll viewport
3. Overflow visible on rows/body/header — so that position: sticky on cells can reference the table scroll container, not an intermediate wrapper

What we did

1. Custom TableLayout subclass

We subclass TableLayout and override:

• isStickyColumn(node) — the base always returns false. We check the node's key (or look up the column by index for body cells) against a set of sticky column keys passed via layoutOptions.
• buildBody, buildRow, buildHeaderRow, buildTableHeader — we set layoutInfo.allowOverflow = true on each result. Without this, the VirtualizerItem wrappers get overflow: hidden, which creates scroll containers that trap position: sticky inside them. Sticky cells can't reach the table's scroll container.

2. Right-sticky via CSS (position: sticky; right: 0)

This was the hardest part. The Virtualizer only supports left-based sticky positioning (position: sticky; left: X on VirtualizerItem wrappers). For left-sticky columns this works perfectly. But for right-sticky, left: X where X = viewportWidth - columnWidth breaks when content is wider than the viewport — the column appears in the middle of the content rather than at the far right.

The fundamental problem: non-sticky VirtualizerItem wrappers use position: absolute (out of flow), so the right-sticky wrapper's inline-flow position ends up immediately after the left-sticky columns, not at the far-right of the row.

Our solution: Override [role="row"] to use display: flex. This makes all VirtualizerItem cell wrappers into flex items. Absolute-positioned (non-sticky) items are unaffected. Sticky items participate in flex layout. We then use CSS on the right-sticky wrapper:

[role="presentation"]:has(> .right-sticky-cell) {
  margin-left: auto !important;  /* push to far-right in flex */
  left: auto !important;         /* override Virtualizer's inline left */
  right: 0 !important;           /* true right-sticky behavior */
  z-index: 20 !important;        /* above other columns */
}

margin-left: auto in flex pushes the element to the row's far-right edge — beyond the viewport when there's horizontal scroll. position: sticky; right: 0 then pins it to the viewport's right edge. This also fixes the inline-block baseline gap (4px) that otherwise requires line-height: 0 on rows.

3. isStickyColumn node resolution for body cells

For header cells, node.key directly matches the column key. For body cells, node.key is a generated composite key. We fall back to looking up the column by node.colIndex ?? node.index from the virtualizer's collection. This works but feels fragile — we've seen intermittent cases where the column index lookup fails for body cells, causing sticky columns to be virtualized away.

What would help from React Aria

1. Right-sticky column support in TableLayout — a stickyColumn direction option (left/right) or a stickyColumnSide(node) override that returns "left" | "right", so the Virtualizer can set right: 0 instead of left: X on the wrapper.

2. allowOverflow default for table sections — or a layout option to control this. Currently every buildBody/buildRow/buildHeaderRow/buildTableHeader override exists solely to set allowOverflow = true. Without it, sticky columns are trapped inside their parent wrappers.

3. Stable column identification in isStickyColumn — the node passed for body cells doesn't directly expose the column key. A node.columnKey or similar property would make the sticky check reliable without index-based lookups.

4. Content-aware column sizing — ResizableTableContainer distributes widths via a flex-like algorithm (static pixels + fr units) with no content measurement. In non-virtualized tables, table-layout: auto grows columns to fit content. A width: "auto" or width: "fit-content" option that measures the rendered column content and feeds it back as the column width would be very useful.

Questions

• Is the display: flex on rows approach safe long-term, or could it break with future Virtualizer changes?
• Is there a simpler way to achieve right-sticky that we're missing?
• Any plans for built-in right-sticky or content-aware sizing support?

[RobHannay]

Here's our full TableLayout subclass for reference: https://gist.github.com/RobHannay/b11b6a3396e6b125a98101282c17f773