Table with scrollable tbody example

[damianobarbati]

I really can't figure out how to have this working with a table with a basic structure:

<table>
    <thead>
        <row />
    </thead>
    <tbody> <== virtual!
        <row />
        <row />
        <row />
    </tbody>
</table>

1) Since I have the DOM element of tbody only after componentDidMount of table component ( therefore inside a component lifecycle ) how can I pass that down to the VirtualList?

2) Will virtualList use the containerEl to wrap elements? Thus avoiding the Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.

Is there any working example with tables?

Thanks for the great work!

[developerdizzle]

Hey @damianobarbati, I'll try to answer your questions:

1. You should be able to model your table component like so:

   const MyList = ({
   virtual,
   itemHeight,
   }) => (
   <table>
   <thead>
     ...
   </thead>
   <tbody style={virtual.style}>
     {virtual.items.map(item => (
       <tr key={item.id} style={{height: itemHeight}}>
         ...
       </tr>
     ))}
   </tbody>
   </table>
   );

   I'm not 100% sure about the CSS of table and tbody elements, though, so there might be some complication there.

2. The container element is only used to calculate the scroll position. If you don't have your <table> inside a scrollable element, you can just leave it out. As for your warning, can you post the full JSX of your component(s) ?

I don't have a working example with tables, unfortunately, but it's something I'd like to add.