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 -

Here I have got a Code Sandbox for drag and drop rows -

Here I have got a Code Sandbox for drag and drop columns -

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 -

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

• javascript
• reactjs
• react-table

Share Improve this question Follow edited Oct 16, 2019 at 9:27 Sergey 1,07544 gold badges1515 silver badges3333 bronze badges asked Dec 17, 2018 at 3:25 tommy123tommy123 58711 gold badge1111 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 ponent 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