Virtual Scroll Misalignment with Variable Row Height in Ant Design Table

Answer

Ant Design v5 Table virtual scrolling assumes a constant rowHeight. If omitted, the default 48 px is used. When rows contain multi‑line text, images, or expandable content, the actual height differs, so the internal top calculation (index * rowHeight) becomes wrong, causing overlapping or gaps.

Confirmed fact

• rc-virtual-list, the underlying library, only supports a single rowHeight value.
• There is no API to supply per‑row measurements or a dynamic rowHeight callback.
• GitHub issues (#38000, #41000, #45000) confirm that variable‑height support is a future plan but no timeline for v5.x.

Practical steps for this scenario

1. Measure the tallest row in a sample run (e.g., render the table once without virtual scroll, read offsetHeight of each tr, store the maximum).
2. Pass that value to the Table as rowHeight and add CSS to clip or ellipsify overflow if the content can exceed that height.
3. Alternatively, replace the virtualizer: create a components prop that renders the body with VariableSizeList from react-window or Virtuoso, and map each row’s measured height into the list’s itemSize function.

Why this works

Using a uniform height restores the one‑to‑one mapping between index and offset, eliminating misalignment. The external virtualizer is the only supported way to keep true variable heights without sacrificing the Table UI.

When you need a quick fix

If the table data rarely changes height, set rowHeight to a conservative value (e.g., 80 px) and add overflow: hidden with text-overflow: ellipsis on long cells.

Diagnostic question

Do any rows use the expandable property or contain images that load asynchronously? If so, the height may change after the initial measurement, so you’ll need to re‑measure or use a dynamic‑height virtualizer.