react-sortable-hoc with table

Question

I'm trying to use react-sortable-hoc with bulma tables, so the SortableItem would be a tr. The problem is this: For a table row to obtain styling in bulma it needs to have some parent table-element with the class table. When trying to move the tr, because it's placed just before the end of the body-element, it doesn't have the table-parent anymore, all styling is lost and the row collapses.

How would I solve this? I have seen other drag-and-drop libraries (not react-specific) solving this kind of problem with essentially screenshotting the element and moving an img instead... it would already help me if I could manipulate how exactly the tr is appended to the body. Is there another lightweight dnd-react-library that could do this if I can't work it out with react-sortable-hoc? Thanks in advance for any help.

Answer 1

I was able to solve this in the end using combination of the provided events (updateBeforeSortStart and onSortStart). The approach goes like this:

1. Fetch the node in updateBeforeStart, save the styles for all of its children using window.getComputedStyle
2. In onSortStart, fetch the row (this is hardcoded as document.querySelector(body > tr:last-of-type), which is a bit ugly and apply the style to all of its children

This was outlined here and was slightly modified by me.