[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.

[drheinheim]

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 :)

[drheinheim]

@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 👍

[alarinn]

We use an open source framework called i2b2. It allows clinical data to be searched by researchers to better understand what population sample to use. I added a React JS component to allow for Smart Searching. They can enter a search term and a list of results are displayed. They can then select the hierarchy icon and below the result your sortable tree is displayed, I enable drag and drop so they can drag the appropriate node over to an existing Group box that is used to build the where clause in their search. Here's a screenshot of the main page. If only I can figure out a way to enable dragging out but not within the tree. The tree data is static final so the tree should not change but allow for current functionality (basically i2b2 allows drag and drop but not within the tree results).

[derekreilly1990]

We are using react-sortable-tree for building a kind of drag and drop execution process, where we can drag in blocks of commands to build the 'program' and we will build an execution runtime afterwards

We are missing some things which we would like, for one example, when we drop a node on our tree from our external list, we would like access to the node properties after the drop, so we can dispatch a redux action with the correct data for the node we just dropped.

[wuweiweiwu]

@Delboyeire can you open an issue, we can continue the discussion there.

you can use the onMoveNode or the onChange callback for your use case

[sufius]

We are using your fantastic tool as a virtual file tree for Playmobox - an online code editor.

Click on following link for a demo video: https://www.youtube.com/watch?v=pOAWTmbcTLU

Editor: https://www.playmobox.com

[dukoo]

We are using sortable tree to create configuration for mobile app - some kind of hierarchic view:) Right now the most lacking funcitonality for me is to add element to the bottom (as the last element) tree by dragging from an other tree of from an external source. Right now it requires to drag over existing tree and it causes to expand currently nodes, which is unwanted.

[cdes]

I'm using it to create a design tool (for nodes tree). I'm trying to replicate Figma's node tree behavior. One of the main things that is difficult is customizing the look and behavior.

Things I had to workaround so far:

1. First node has an indent lineBlock. Couldn't figure out how to hide it from the theme... so I've removed it by CSS.
2. Couldn't figure out how to hide the vertical line from the theme. I've removed it by CSS.

Things I'm still mulling over:

1. Keeping the "source?" of the draggable intact while dragging.
2. Preventing "parenting and de-parenting" by dragging left, and enable it only when moved on top of a new parent or if it's the last node in its group.
3. Change the styling of the parenting (probably related to 1 & 2).
4. Figure out how to set "rules of dropping" so that certain elements can only be dropped inside other certain elements.
5. Add icons.

[RenanStigliani]

Your styling looks very clean and close to what I'd like to implment myself, any chance of you releasing it?

[Mahesh9959-mahi]

Hi, How can we use move to top & move to bottom icons to a React-sortable tree

[cdes]

Your styling looks very clean and close to what I'd like to implment myself, any chance of you releasing it?

Thanks, it's clean in looks but not in implementation XD. It's a hack on top of a hack on top of a hack.

[cdes]

Any way, here you go

https://github.com/cdes/react-sortable-tree-theme-figma

[H0uss3m]

@cdes you mentioned that you used react-sortable-tree on playmobox project I want to ask you if you used it in react 18 + typescript kind of project cuz i have a problem in implanting this package on my project

[cdes]

@H0uss3m I'm not the one with playmobox. You can ask @sufius. Also, I was using it with react 17 if I remember correctly.

[sufius]

Salam ya @H0uss3m I still didnt use it with react 18 and TS, im sorry. good luck