Reordering table columns with react via drag and drop

Question

I have an html table that should be able to reorder rows as well as columns.

Reordering rows is pretty straight forward but reordering columns is pretty hard since the cells of a column do not share the same parent element.

<table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

How do I implement column-dragging with react?

Did you find a solution for this? Im stuck with the exact same issue. — morne, Feb 16 '17 at 09:58
This might work. https://github.com/schrodinger/fixed-data-table-2 — morne, Feb 16 '17 at 10:31

score 1 · Answer 1 · answered Nov 21 '16 at 21:46

1

You should add additional layer of abstraction between data and view - where column indexes will be used. For example:

var data : [["a","b","c"],["a2","b2","c2"]];
var columns = [2,1,0];

function getData(row, col) {
   return data[row][columns[col]];
}

Then when you drag columns - you just change indexes inside columns var.

answered Nov 21 '16 at 21:46

Oleg Imanilov

2,591
1
13
26

Thanks for your answer. But my problem is, that I am not able to drag multiple elements at the same time, since they do not share a common root node. Your answer targets performance issues. My question is more DOM/React oriented. – HaNdTriX Nov 23 '16 at 18:14

score 1 · Answer 2 · answered Dec 20 '16 at 04:27

I think you'll have to implement a custom DragLayer in order to get this to do what you want it to do - that way, you'll have full control over what the drag preview looks like, and can make it render out a column instead of just the single cell you would get from the basic preview.

Then you can just make it so that if a column is being dragged all of its cells get display: none or something so that they disappear, and your custom DragLayer then shows the user the column rendered in a new table as your preview.

He has a pretty good tutorial on how to write a custom DragLayer here: http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html which you can follow along for help.

Reordering table columns with react via drag and drop

2 Answers2