How to use drag and drop functionality both columns and rows in my React Table - ReactJS

Question

I have created a table in React Table. I want to add both drag and drop functionality on columns and rows. How can I do this?

Here is my CodeSandbox Sample - https://codesandbox.io/s/2wp7jk23kr

Here I have got a Code Sandbox for drag and drop rows - https://codesandbox.io/s/1844xzjvp7

Here I have got a Code Sandbox for drag and drop columns - https://codesandbox.io/s/5vxlnjrw1n

Being a beginner In React, I'm not able to integrate this three sandboxes. Can someone fork a good example on CodeSandbox on how to add both drag and drop functionality on columns and rows?

Please use my React Table data columns - https://codesandbox.io/s/2wp7jk23kr

Answer 1

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