How to deal with "Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. " when using react-window to render table rows

Question

I'm using react-window to create virtual tables with react-table 7 (and material UI tables).

I'm embedding FixedSizeList instead TableBody. Something like this:

   <TableBody {...getTableBodyProps()}>
    <FixedSizeList
      height={listHeight}
      itemCount={rows.length}
      itemSize={rowHeight}
    >
     {RenderRow}
    </FixedSizeList>)
   </TableBody>

and RenderRow returns the TableRows. Something like this:

 const RenderRow = React.useCallback(  ({ index, style }) =>
 {
     const row = rows[index];
     prepareRow(row);
     const rowProps = row.getRowProps();
     return (<TableRow
              {...row.getRowProps({
               style,
              })} />);
 }

Because of how react-window works, it creates a couple of divs to implement the list scrolling, dynamically embedding the needed TableRows as required, causing a react js warning to be output.

webpack-internal:///490:506 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>

Just ignoring this warning, isn't something I want to do, as it may cause other warning not to be noticed. (nor do I want to use a release build while testing)

So is it possible to either prevent this warning from being emitted? Or is it possible to use react-window for table rows, without getting this warning?

Update: Trying the setting innerElementType to tbody suggestion.

This changes the inner div that FixedSizeList renders.

from:

<div style="position: relative; height: 96px; overflow: auto; will-change: transform; direction: ltr;">
<div style="height: 96px; width: 100%;">

to

<div style="position: relative; height: 96px; overflow: auto; will-change: transform; direction: ltr;">
<tbody style="height: 96px; width: 100%;">

So the are now included inside tbody.

So I guess I also need to use outerElementType to change the outer div, to deal with the div in table warning, but I can't think of anything valid that will work...

If I didn't want to include a thead I could set outerElementType to table and innerElementType to tbody

Answer 1

FixedSizeList accepts an innerElementType prop to let you specify the HTML tag to use instead of div. As far as I can tell from reading the code, it more or less needs to be a tag string.

You'd probably want this innerElementType to be tbody, which would mean re-working the parent elements a bit; I'm guessing you would not want to continue using TableBody.