Reorderable Custom Component

I customized dnd-kit's draggable tree item with a custom component to build a bill of materials system. Works wonderfully. The most important code however is doing height calculations on the top level div in the custom component or else drag will fail.

Here is the dumbed down source for src/Tree which contains what you need. It is not easy to spin this up by itself. Batteries are included but they are hidden. You'll need to alter its item props for your usage and useEffect and retool states to keep the tree updated. So some minor alternating of NestedSortable and TreeItem is needed

I also did a side draggable reorderable operation's list(Big Blue Plus Button) with dnd-kit.

I've programmed a ton in my life, but I am very green to web dev. The retool sample component made it very easy. Almost all my problems from initially not managing the Height and Width appropriately and using a 'auto' container.

4 Likes

Hi @FBCRandy, I've met more than a few customers asking how to build something like this. Now I have a great resource to point them to.

Thank you for sharing your implementation!