[STICKY] Tell me how you're using react-sortable-tree

[fritz-c]

A better understanding of how react-sortable-tree is being used will help me better prioritize features and shape the roadmap going forward. So if you're using this project, I'd love for you to leave a comment and tell me the following:

1. What are you using react-sortable-tree to accomplish?
2. Do you perceive any features that are lacking?
3. (Optional) What product(s) / project(s) are you using react-sortable-tree in?

[gmarathi-nisum-com]

Hi

Thankyou for the component. It is very usefull when we have hierarchical data.

1. Using to display hierarchical data information which has dynamic levels. Using search, butttons functionality(add,edit,delete using back-end api and setting tree state)

2. The features lacking can be specific to project requirements which needs to be customized in plugin/component level. Basic features have been implemented well.Thank you for that.

[fritz-c]

@gmarathi-nisum-com Thanks for the feedback!

Just out of curiosity, when communicating with your back-end api, do you send the whole tree structure each time, and have the server resolve the updated relationships, or do you send single move instructions based on the onMoveNode callback?

[gmarathi-nisum-com]

I am having add/edit and delete buttons on each node on conditional base. So on click of each button , i wil have access to particular node data,which can be send to back-en api. Then On success of API , I am refershing the Tree with master-data API.

[drheinheimer]

Thanks for this @fritz-c!

1. I'm using this to organize water planning scenarios, whereby scenarios may be nested and data will propagate to child scenarios. The benefit of RST is to be able to define & modify these hierarchical data dependencies, and as far as I could tell this is the only tool to do this.
2. Do you perceive any features that are lacking?
   One feature I added via generateNodeProps and nodeContentRenderer is the ability to "activate" a node by clicking on it (without small buttons). This could come with a default styling (outline?). I also recommend improving the default styling. In particular, you might add a "compact" mode, more similar to, say, jsTree, as right now the nodes are quite large.
3. You can see my project landing page to get an idea of the project (but app is broken - don't register). See RST part below (edit mode switch toggles the drag handle):
   

[fritz-c]

@rheinheimer Thanks for the feedback! I've been thinking about offering some pre-made options for the customNodeRenderer. Maybe a different npm package like react-sortable-tree-node-renderer-compact that you can import and just plug in. Or maybe I could make a theme prop so you could just plug in a theme named likereact-sortable-tree-theme-compact to set all customized parts at once and in a consistent style.

[JWaldenback]

@fritz-c
A more compact theme sounds fantastic! Do you have any plan of making this a reality soon?

[fritz-c]

@rheinheimer I just added a theme prop so the "compact" mode you mentioned could be accomplished. I created a template theme called react-sortable-tree-theme-file-explorer that is similar to the jsTree example. Let me know what you think!

@JWaldenback FYI

[destruc7i0n]

Been using this for a while and finally made my project public, so I thought I'd express my thoughts here!

1. I'm using this to allow users to easily create advancement trees (a new feature in Minecraft that is fully powered with JSON, ordered in a hierarchical, tree-like structure) with dragging and dropping. The added benefit of this library was all the tree-utils there are, came in very helpful with finally compiling the data the user entered into an advancement pack. I've also been employing a few of the features I'm not using (buttons, search matching) to meet my needs (preview of the in-game advancement frame, currently selected advancement).
2. What was really lacking for me was detecting when dragging an item. Currently, I have an action in canDrop constantly dispatching that there is a drag occurring and then finally stopping when onMoveNode is called. To decrease the amount of updates, I have a redux-debounce middleware debouncing them. I'd really love to be able to detect this and stop this "hacky" method!
3. The project is live at https://advancements.thedestruc7i0n.ca/

[fritz-c]

@destruc7i0n That looks like quite a useful tool. I’m glad the library helped out.

For the dragging issue, would something like a “onDragStateChanged” callback be a reasonable solution?

[destruc7i0n]

@fritz-c Something like that would sound quite useful :)

[drheinheimer]

@fritz-c Love the file explorer theme. That's exactly what was thinking. On the other hand, I decided I can make good use of that space with some tweaking of the CSS. Specifically, I now how different color borders for different classes of investment options (see screenshot; still working on styling). This is specified within the node renderer script, where styling is based on node content.

p.s. under normal circumstances I don't re-order the nodes, so like to keep the drag handles hidden
p.p.s. another idea is to make the whole node draggable, i.e. not just with the drag handle

[fritz-c]

@destruc7i0n
@wuweiweiwu pitched in and helped implement an onDragStateChanged callback (available in v1.7.0)! Check out the API in the README.

[destruc7i0n]

Awesome! Thanks @wuweiweiwu for getting that in 👍