React-table: Draggable Re-ordering of Columns in react-table

[mattlockyer]

Hi I posted a demo of this here: https://gist.github.com/mattlockyer/2ece67a544c4e062411328144dabc9da

It works by the way so more of a suggestion, sorry I didn't go the fork route, I didn't have time to integrate the solution with your lib.

I like your module, much less

Would be cool to include that in your awesome module, thanks!

[tannerlinsley]

Very cool! Would you be able to implement this in a fork of our Codepen example?

[mattlockyer]

Sure I'll also clean it up a bit. Just discovered your event hooks ;)

On Wed, May 10, 2017, 2:31 PM Tanner Linsley [e-mail]
wrote:

Very cool! Would you be able to implement this in a fork of our Codepen
example http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/256#issuecomment-300618567,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATnPHDd-JSXJUXSA8-k8LcTuy8V7SSNks5r4iyfgaJpZM4NV5Ah
.

>

Matt Lockyer

http://www.mattlockyer.com

[mattlockyer]

Hi,

I couldn't figure out the header index in the props and the stateless component was a bit tricky to work around. Have a look at my Gist and this: http://codepen.io/mattlockyer/pen/LydeLj?editors=0010

You know the API better than me, I simply could not find a header's index in the columns it belonged to using column or instance objects :(

Good Luck!

[tannerlinsley]

Will let you know how this goes

[Kimel1]

Any news?

[Jucesr]

Hi

I took @mattlockyer example and made a HOC. I made a little changes.With the original I was just able to drag and drop just one time.

You can see the code here: https://codesandbox.io/s/5vxlnjrw1n

[CynderR]

Hey guys,
Im very new to react, but i wanted to get columns swapping working in my app. I worked with the code and got a working example running (with the help of @mattlockyer gist).
As im new to react, i had some issues with re rendering the view and im sure someone here would have a better implementation. (and if you are willing to help me out i have a SO question about it)

Its a bit of a hack but column ordering is working in chrome and firefox (only tested on linux mind you) (https://codepen.io/CynderR/pen/qMXVLg?editors=0011
I comment the code to point out the odd spots that i think need work.

And here is it implemented using a fork of react-tables for you @tannerlinsley https://codepen.io/CynderR/pen/eLEKZO?editors=0011 . Its not perfect (Only headerGroups currently work, "first name", "last name" and age break the table) but i think the dom query selector that is causing the issue would not be needed as draggable="true" could be set conditionally on element creation.

[pramodkumar-dcpl]

Hi

I took @mattlockyer example and made a HOC. I made a little changes.With the original I was just able to drag and drop just one time.

You can see the code here: https://codesandbox.io/s/5vxlnjrw1n

Really nice sample.. Thanks

[alexandrudanpop]

There was a problem in the re-ordering algo for the previous examples, to fix it try: https://codesandbox.io/embed/nw7661lrnl

[Dmitrijus1989]

how can i save that order to DB , and render it the same order after refresh ?

[vrathnayake]

You can try to save the order on the client side (in local storage for eg) and repopulate after a refresh

[anacampesan]

I just came up with a very simple solution to this:

• Add the following props to your th element:

<th
  {...column.getHeaderProps()}
  {...column.getHeaderProps(column.getSortByToggleProps())}

  // THESE
  data-column-index={i}
  draggable="true"
  onDragStart={onDragStart}
  onDragOver={e => e.preventDefault()}
  onDrop={onDrop}
>
  {column.render('Header')}
</th>

• Then, add these vars and functions to your component:

 let columnBeingDragged = null;

  const onDragStart = e => {
    columnBeingDragged = e.target.dataset.columnIndex;
  };

  const onDrop = e => {
    e.preventDefault();
    const newPosition = e.target.dataset.columnIndex;
    const currentCols = visibleColumns.map(c => c.id);
    const colToBeMoved = currentCols.splice(columnBeingDragged, 1);
    currentCols.splice(newPosition, 0, colToBeMoved[0]);
    setColumnOrder(currentCols);
  };

Styles and improvements are up to you. :)

My gist: https://gist.github.com/anacampesan/aaf842c47506ad5d87842e7c82196482

[mg629]

Thank you @anazard , your simple solution worked perfect for me. Saved me a lot of time.

[ViieeS]

@anacampesan thanks for the snippet. The link is dead now, because the author's profile was renamed (and poor github mechanics).

For any who is interested, actual link is https://gist.github.com/anacampesan/aaf842c47506ad5d87842e7c82196482. The solution is based on this example

my two cents:

  const onDragStart = (e) => {
    columnBeingDragged = +e.currentTarget.dataset.columnIndex;
  };

  const onDrop = (e) => {
    e.preventDefault();
    const newPosition = +e.currentTarget.dataset.columnIndex;
    const currentCols = visibleColumns.map(c => c.id);
    const colToBeMoved = currentCols.splice(columnBeingDragged, 1);

    currentCols.splice(newPosition, 0, colToBeMoved[0]);
    setColumnOrder(currentCols);
  };

[anacampesan]

Glad it helped @ViieeS
And yeah, I've updated my username not long ago.