However, there isn't really anything like this supported in Streamlit today. Probably the most similar library is the Streamlit Sortables library which allows drag-and-drop of elements between containers. But it isn't really the same as doing it wihtin a tree.
Request
Drag-and-drop tree that lets users drag a treeNode to insert after the other treeNode or insert into the other parent TreeNode.
Property: draggable that specifies whether this Tree or the node is draggable. Use icon: false to disable drag handler icon
I noticed the antd design library also has the following callback functions. I'm not sure if these also need to be created, but want to raise for visibility:
onDragEnd Callback function for when the onDragEnd event occurs function({event, node}) -
onDragEnter Callback function for when the onDragEnter event occurs function({event, node, expandedKeys}) -
onDragLeave Callback function for when the onDragLeave event occurs function({event, node}) -
onDragOver Callback function for when the onDragOver event occurs function({event, node}) -
onDragStart Callback function for when the onDragStart event occurs function({event, node}) -
onDrop Callback function for when the onDrop event occurs function({event, node, dragNode, dragNodesKeys})
It would be amazing to have this feature introduced into Streamlit's community, and StreamlitAntdComponents seems like the right place for this.
Problem
I'd like to provide a way for my users to quickly reorder tree elements using a drag-and-drop interface. Ant Design has draggable trees defined here https://ant.design/components/tree#tree-demo-draggable
However, there isn't really anything like this supported in Streamlit today. Probably the most similar library is the Streamlit Sortables library which allows drag-and-drop of elements between containers. But it isn't really the same as doing it wihtin a tree.
Request
draggablethat specifies whether this Tree or the node is draggable. Use icon: false to disable drag handler iconfunction({event, node})-onDragEnter Callback function for when the onDragEnter event occurs
function({event, node, expandedKeys})-onDragLeave Callback function for when the onDragLeave event occurs
function({event, node})-onDragOver Callback function for when the onDragOver event occurs
function({event, node})-onDragStart Callback function for when the onDragStart event occurs
function({event, node})-onDrop Callback function for when the onDrop event occurs
function({event, node, dragNode, dragNodesKeys})It would be amazing to have this feature introduced into Streamlit's community, and StreamlitAntdComponents seems like the right place for this.
Thanks for creating this library!