Is it possible to use this with a HTML table and dynamic row height?

[ohnoah]

Does anyone have an example of using a table and dynamic heights together? Is it possible? The table example seems to assume a constant row height.

[kokoc30]

Yes. The official TanStack Table v8 Virtualized Rows example combines @tanstack/react-virtual with dynamic-height <tr> elements. Virtual's simpler Table demo uses fixed heights.

Carry these pieces over together:

• Give each rendered row data-index={virtualRow.index} and a ref that calls rowVirtualizer.measureElement(node).
• Treat estimateSize as an initial estimate; let the rendered content determine the row's actual height.
• Set the body's height from getTotalSize() and position each virtual row at its measured start.
• Copy the layout styles as well: that example uses table tags with CSS grid/flex layout and explicit, matching cell widths. It does not rely on native table auto-layout to align the absolutely positioned rows.

The row measurement connection is:

<tr
  data-index={virtualRow.index}
  ref={node => rowVirtualizer.measureElement(node)}
>
  {/* cells */}
</tr>

Use the linked example for positioning and container styles. Retain its Firefox caveat: it skips custom row-height measurement there because table borders are measured differently.