React-data-grid: [Idea] Drag column to reorder

[malonecj]

Description

Implement column header dragging to reorder a column

Requirements

• Create a new example in https://github.com/adazzle/react-data-grid/tree/master/examples/scripts similar to https://github.com/adazzle/react-data-grid/blob/master/examples/scripts/example02-resizable-cols.js where each column has a draggable property set to true.
• Modify https://github.com/adazzle/react-data-grid/blob/master/src/HeaderCell.js to listen for onDragStart, onDrag, onDragEnd events. Triggering onDragStart, onDrag should should show the column header being dragged. OnDragEnd should bubble up to the HeaderRow, and Header components, and finally trigger an onColumnReorder event in ReactDataGrid component which will modify the order of state.columnMetrics.column. Alternatively you could try implementing a drag and drop library like http://gaearon.github.io/react-dnd/

[ducwings]

+1

[bebop14]

+1

[diogofcunha]

This was released in 1.0.37.

An example can be found in here.

[joshparolin]

@diogofcunha - Row reordering was released, but was _column_ reordering?

[dkwin]

Just wanted to chime in on this, any update on column reordering?

[AmrKafina]

Still nothing here? Would really like to see this.

[martinnov92]

Hello, since we need this to work in the company I work for I tried to implement this feature (I used draggable rows as an inspiration), here is the pull request https://github.com/adazzle/react-data-grid/pull/702

I hope it will get pass through the code review, but I know they might be a problem with my tests as it were my first tests I was writing :D.

You can clone my fork of react data grid and try it, it is example 24 - Draggable header cell.

Thank you

[martinnov92]

Here is little clip, where I show you how it works, the second part with popup is not in this pull request, but it is easy to implement it on your own.
https://drive.google.com/file/d/0B04DA-ziLi_GSEJLUnBkMVU3QVU/view

[JimLynchCodes]

Hi. Nice lib! But I'm getting errors with the React.createClass being deprecated. Is there any way I can use this with ES6 React?

[jpdriver]

hey @JimTheMan -- that's an issue to do with React versions; you can track that discussion here https://github.com/adazzle/react-data-grid/issues/744

[JimLynchCodes]

Thanks. Unfortunately, this feature uses React dnd and provides no way of passing in an "HTML5Backend". Is there not a way to use this grid in an app that separately uses React dnd?

[martinnov92]

Hello @JimTheMan if I am understanding your question correctly you would like to use grid without React DnD context, right? What you can do to remove backend for ReactDnD is to copy and paste this two files in your project (DraggableHeaderCell and DraggableContainer) https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons/src/draggable-header, then remove DragAndDrop Context from this file https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid-addons/src/draggable-header/DraggableContainer.js#L29 (in case you are already using React DnD in your app), then wrap your data grid in DraggableContainer and then it should work as expected. I know it is not the best way how to do it tho :/ Hope it helps

[JimLynchCodes]

@martinnov92 Interesting, but what do you mean by "copy and paste these files into your project"? I can put them anywhere in my project?

[martinnov92]

@JimTheMan you can put them anywhere as long as you can import them :D I put them in the folder where I got my grid wrapped and tweaked so it suits my needs and there I import the DraggableContainer, hope it makes sense.

[JimLynchCodes]

@martinnov92 Thanks. Hackish, but it worked! :)

[arttay]

Hey guys, kinda old (I know) but the company I work for it evaluating table libraries and draggable column is number 2 on our list of things to have. Has there been any updates?