How to use drag and drop functionality both columns and rows in my React Table - ReactJS
It's not that hard to make it, but still no convenient way yet, I had a try and let's see the result in sandbox: https://codesandbox.io/s/quizzical-leakey-o5h8z
Then let's see what's going on in Table.js
1.When you start dragging, you do not know which direction it is going, so I just hide the snippet (by setting it to empty div)
2.When you first drag it into another cell I got to know the direction, and then lock the direction inside dragState.direction
3.When you drag it into an cell (including first time in step 2), you need to show the changed data, like rows = offsetIndex(dragState.row, dragState.dropIndex, rows), notice it is different depends on dragState.direction
4.We highlight the row/column we are dragging, with opacity: ....
5.Finally on dragEnd we notify parent component what have changed
It's not good enough yet, specially when the drag is cancled. So don't rely on these code too much, find your own way based on this idea