Is it possible to virtualize nested horizontal elements

[lukesmurray]

I'm working on a horizontal table implementation that has a large number of columns and a small number of rows.
I'm trying to virtualize the columns but running into issues.

My table has the following structure.

{/* the outer div is the parent ref */}
<div ref={parentRef} style={{ overflow: "auto" }}>
  <table>
    <tbody>
      <tr>
        {/* I explicitly define the cells here but these are virtualized */}
        <th>row 1 header</th>
        <td>row 1, col 1 data</td>
        <td>row 1, col 2 data</td>
      </tr>
      <tr>
         {columnVirtualizer.virtualItems.map((virtualCol) => {...})
      </tr>
    </tbody>
  </table>
</div>;

This is what I want the output to look like

Unfortunately the actual output is very jittery. I'm curious if anyone else has tried to virtualize table cells horizontally and if so I would love some pointers. I'm also curious if what I'm doing is fundamentally incorrect since the parentRef is not a direct parent of the table cells.