kutlugsahin/react-smooth-dnd

Does it support html tables?

kumardennis opened this issue · 3 comments

It seems that i cant make it work with HTML tables (as i cant just a div outside tr). Could anyone suggest any solutions for it?

this is the same problem i just ran into ... not what i was expecting

You can use the render function to determine what Draggable and or Container get rendered as. In this case if you were to have draggable table body rows

<Container
   render={(ref) => (
     <tbody ref={ref}>
       <Draggable
         render={() => (
           <tr><td>some data</td></tr>
         )}
       />
     </tbody>
   )}
</Container>

Might contain typ0s

Also dont forget when rendering explicity through draggable change its display type to display: table-row as this will mess up your table UI as draggable overwrites it to display: block .

Dont forget to pass ref to the tbody and change display of <tr/> to table-row

<Container render={(ref) => ( <tbody ref={ref}> <Draggable render={() => ( <tr style={{display:'table-row'}}><td>some data</td></tr> )} /> </tbody> )} </Container>