Add react-bootstrap-table2-drag

[jehartzog]

As requested in #193, #665, and #493 (and also requested for RBST1).

The API isn't final, but it currently works where it will issue your callback with the fromIndex and toIndex, allowing you to mutate the data and pass updated data to RBST2.

Looking for some feedback/guidance before I finish this up.

Possible/needed improvements:

• Implement a hover handler that has RBST2 internally re-order the rows based where the row is being dragged to.
• Add tests
  - [ ] Add optional re-order animation using react-flip-toolkit

[jehartzog]

I just realized the last 2 of those issues were asking for column resorting.

This PR is aimed at adding the ability to drag/drop rows and call a callback that allows you to update the order of your data. However this does put a lot of the base work into making column re-ordering possible, so it wouldn't be too hard to add that in.

[AllenFang]

@jehartzog soooo coool, I will have a look into this when I have time, thanks your contribution :)

[jehartzog]

@AllenFang Thanks. I'm not 100% done with it, but the basic framework is there with a fully functional example. Since it's a pretty big feature addition (full new plugin) I would like your feedback before I continue working on it.

I tried to copy the style/usage that you already used in RBST2, but it was a little challenging to follow how everything fit together from just reading source. I do like how you dynamically create context based on the plugins/props being used, but the actual method to do that involves a lot of different parts working together, and not having done something like that myself it was slow going to replicate.

[AllenFang]

@jehartzog sure, I think you already made a good contribution, I will spend some time and give u some feedback, in this period, you can just have a rest haha.

[rohankk2]

Has this feature been added ?

If yes could you provide an example on how to use it ?

Thanks a lot :)

[jehartzog]

@rohankk2 Fork the branch and load the storybook, an example was provided with the PR.

It has not yet been merged into the main project, so if you can't wait then you will need to run off a forked version. Also be aware this is basically a draft version so the interface/functions may change before the final version 😬

[ghost]

i am also waiting for an example, please provide so i can integrate

[AllenFang]

hi all, I will look into this PR in this weekend and hope we can release in next week if everything is ok ;)

Sorry for lately review

[jehartzog]

No problem, I'll be around this weekend so should be able to respond quickly.

For those peeps asking for example, please read this comment, the PR has a full example included.

[AllenFang]

@jehartzog may I ask u a question, when I try the dnd story, how do it work? I tried drag lots of times, but it's not work lol

[jehartzog]

@AllenFang For now all it does is log the to/from indexes to console, I didn't actually add the logic for re-ordering or other features, as I wanted to make sure to establish the more general API before adding more features.

[jehartzog]

@AllenFang I just added an example of how I used re-ordering for my project.

Also I added another item on todo list, on my project I implemented react-flip-toolkit to animate the re-ordering and it worked extremely well and was simple to implement. I can pull those changes into this PR if desired, I'd probably add react-flip-toolkit as peer dependency so that portion is optional.

[AllenFang]

I didn't actually add the logic for re-ordering or other features, as I wanted to make sure to establish the more general API before adding more features.

that's good. For me, there's a functionality question: In this design, user can only drag via a cell/column, is it possible to reorder by drag on row?

[AllenFang]

the context order is important. please move to Line 274

The important thing here for the order of constructing context is about the whether a context change raw data or not, so you see: CellEdit, Filter, Search, Sort and Pagination, these context must change raw data in different perspective. Therefore, we need to wrap these context firstly,

[jehartzog]

Fixed!

[AllenFang]

👍

[kylegoetz]

Is this going to be merged into the project?

[jehartzog]

that's good. For me, there's a functionality question: In this design, user can only drag via a cell/column, is it possible to reorder by drag on row?

In my own project, I wrapped the entire row as a generic drag target, just as you mentioned it's much better for usability. I don't know offhand how to do this with a RBST2 plugin approach but will look into it.

[AllenFang]

@jehartzog, yes, I think we can support reorder the row by column or row :)

btw, I'm not very familiar dnd. what's the different for react-dnd and react-flip-toolkit?

[jehartzog]

react-flip-toolkit is optional, it is a general use react animation framework. If you're doing row re-ordering via drag and drop, it's a perfect fit to display to the user the result of the reorder.

Check out this for an example of what it can do. While the example is simple, it easily supports animating entire rows with minimal lag.

There is a performance penalty when you get into large number of rows, which is why it should be optional. But for most use cases people will want to have it.

[AllenFang]

I see, feel free to add react-flip-toolkit as dependency. :) . because dnd module is separated from core of react-bootstrap-table-next, so it's great to add it to me.

[jehartzog]

@AllenFang I started playing with it, adding the animations should be a different PR since I have to make a number of edits to the core package. This is because in order for the animations to work, you need to wrap the entire row in a Flipped wrapper, which currently API does not support. I may throw up a different PR later with the animation stuff added as an optional feature, but let's not include that is part of this PR.

[AllenFang]

@jehartzog sure, I think it's time to open a branch for working on these stuffs. Let me create it and let's switch these PRs to it.

[AllenFang]

let's go for feat/dnd branch :)

[jehartzog]

@padronlv We are using this functionality in production and it works nicely. Most of the code to get it working is already in this PR, thanks for reminding me to take another look at it. I'll review it since it's been a few months and ask for it to be merged once I'm sure it's in a working state.

[florentinH]

I am using this library in a project, and this feature would be quite useful for me. Any news here?
i have to use react-flip-toolkit as dependency ?

[tapasdas091]

i want to use drag and drop inside column in this react bootstrap please help me as soon as posibile

[tapasdas091]

I didn't actually add the logic for re-ordering or other features, as I wanted to make sure to establish the more general API before adding more features.

that's good. For me, there's a functionality question: In this design, user can only drag via a cell/column, is it possible to reorder by drag on row?

i need to add drag and drop in column. not able to implemant. please help me out of thsi problem

[chaitujil]

@AllenFang Any particular reason that this PR is not merged into the master branch?

[jehartzog]

It was fully functional back when I was adding this to our app, since then it's been working great in our production app.

A couple weeks ago I checked out the branch to see if the examples still worked, and saw they were broken for some reason. I'd be happy to update them so they work again, but would like to hear that somebody who can review & merge is watching so that the contribution actually gets used 😁 .

[chaitujil]

@jehartzog Thanks for your response. I moved on to use snapify to drag and drop by grid rows. I use react-bootstrap-table-next heavily in my project for its convenient sorting, filtering and pagination capabilities. It would be great if you can integrate this feature in that library.

[tapasdas091]

@jehartzog i want to use column reordering (Drag and Drop) in react-bootstrap-table. Please help me out of this problem. Thank You

[alexanderwhatley]

Hi any updates on this? This feature would be really helpful for my company.

[rsweetland]

I just downloaded and fired up the Drag and Drop example in Storybook. No errors in the console, but the rows don't seem to be draggable. Could I be missing a step?

Also, maybe we could take up a bounty for you guys to integrate this? I would happily chip in.

[jehartzog]

Back when I did this, I believed that this branch was working just fine. I don't know what changed, or perhaps I was somehow using a stale node_modules, but the DropTarget was not correctly picking up the dragDropManager from the React context provided. It was therefore silently failing and returning null. I tried figuring out what was going on with this for a while but couldn't isolate it.

I switched gears and checked back to the production app that has been using this successfully for a year+ now, and realized that react-dnd was fixed to 2.6.0. I downgraded in this branch and now it's working again.

I'd really like to get this merged in, and will help clean it up and get it caught up to master. Perhaps the reason it sat without comment from a maintainer for a year is the sad bug I just fixed, but hopefully now that it's working again we can move forward.

GIF for proof 😀 :

[GeorgeTournas]

Hello @jehartzog . I want to test and run this drag feature but I am a bit confused about how to do it. I forked this branch as you mentioned here #673 (comment) but I don't know how to run. Can you please give me some more detailed info on how to run it locally on my PC?
Thank you in advance

[jehartzog]

Run npm i, then look at package.json for storybook script. I think it's npm run storybook.

[katekuehl]

Are there any plans to make this part of the main library?

[reygcalantaol]

Not Found - GET https://registry.npmjs.org/react-bootstrap-table2-drag - Not found when trying to install the module

[amitsetty]

Same issue as above,

npm ERR! 404 'react-bootstrap-table2-drag@latest' is not in the npm registry. 

[amitsetty]

What's the current status/roadmap for this? Is it supposed to be working? @jehartzog @AllenFang

[jehartzog]

@amitsetty You need to install from directly from github if you want to use this. I've offered many times to get this merged in to main repo, but no response from owner in years.

[amitsetty]

just npm install the github branch and use that? @jehartzog

[KaidiMohammed]

Hello, It's very useful feature, is there any plan to merge this branch ? thanks

[jabberwo]

Wishing we had this feature -- especially for column re-ordering!

[jknapp25]

@AllenFang I see there hasn't been a new release since May 31 and 30 PR's currently open. Do you have a plan to get more maintainers or hand this project off? Do others have write access to the repo?

[HZSamir]

@jehartzog Could I please trouble you for a short working code? Your storybook example seems to specify react-bootstrap-table2-drag but it doesn't exist. Where then to import dragFactory and dragFormatter from?

[jehartzog]

@Unforgiven-wanda #673 (comment)