Difficulty with table

I have a table with fixed headers and a scrolling body. I implemented this by putting the following on tbody:

  .cf-document-list-body {
    display: block;
    max-height: 65vh;
    overflow: auto;
}

I would like to use ReactList to render the rows of this table.

In my itemsRenderer, I have:

    return <table>
        <HeaderRow columns={columns} headerClassName={headerClassName}/>
        <tbody className={bodyClassName} ref={ref}>
          {renderedItems}
        </tbody>
        <FooterRow columns={columns} />
    </table>;

I am passing scrollParentGetter to be a function that returns the tbody ref.

This produces the following HTML:

<div style="position: relative; height: 75511px;">
  <div style="transform: translate(0px, 0px);">
    <table>
      <!-- table contents are correct -->
    </table>
  </div>
</div>

This messes up my scrolling, and produces a giant div on the page that’s 75511px tall. I think that what needs to happen is the two wrapper divs need to be in the element that has fixed height. In my case, that’s the tbody, but it’s invalid HTML to put divs in a tbody.

I’m doing this for an open-source project, in case you want to see the full code: https://github.com/department-of-veterans-affairs/caseflow/pull/2019.

I’m not sure what the best way to fix this is. Why is it necessary to use these two wrapper divs? Why not just throw everything in the tbody, and then just add and remove elements according to their visibility, as determined by looking the tbody scroll and bounding rect attributes?

Or is there a different way you’d envisioned people doing this with tables?

[NickHeiner]

Actually, would you be amenable to a PR to implement this functionality? Instead of the divs for spacing, it would use something like:

<tr style={{height: `${unrenderedPreviousElementsHeight}px`}} aria-hidden />
{* actual <tr>s for data *}
<tr style={{height: `${unrenderedPostElementsHeight}px`}} aria-hidden />

[NickHeiner]

I’ve been working on this a bit, but it is not ready to show off yet.

I am not using position: fixed, so I can’t help you there.