Configure the tree to size itself according to its contents (disable virtualization?) about react-sortable-tree HOT 6 CLOSED

I got this request enough that I implemented a fix in v0.1.9. By setting the isVirtualized prop to false, you can draw the tree without react-virtualized.

One thing to note, though. The following functionality worked under the assumption that the tree container would be fixed-height and scrollable, and therefore doesn't work without virtualization:

• Auto-scrolling while dragging
• Scrolling to the searchFocusOffset

from react-sortable-tree.

I'm afraid I tied a lot of stuff into the virtualization, such as scrolling when hovering near the edges and scrolling during search. I understand the use for a non-virtualized component is perhaps even greater than that of a virtualized one, but I went with virtualization due to my need to handle large amounts of information at a time.

What I can suggest is a hack on your end to expand the container to the height of your rows. You would change the height with a callback for onVisibilityToggle, something like:

({ treeData }) => {
    changeMyContainerHeight(treeData.length * myTreeRowHeight)
}

You'd also have to decide the initial height based on your tree data.

from react-sortable-tree.

OK, I get the gist of it. I'll also have to account for collapsed nodes and not add their children into the total height. Thanks for the help!

from react-sortable-tree.

Ah, right, I forgot about that. You could probably use the walk API, set to ignore collapsed nodes, to count it without having to create a recursive function yourself.

from react-sortable-tree.

Not enough praise in this repo for my liking. Well played @fritz-c 👍🏼

from react-sortable-tree.

@fritz-c

Awesome stuff with this project!

At the moment this component does not work virtualized since there is an issue with react 17 and I've set isVirtualized to false since I don't really need virtualization for the moment.

This being said, how can I perform a search that can simulate the virtualized experience -- be able to highlight a node, and, if possible, to trigger a scroll to that node.

I've prepared a boilerplate that has the tree and search form instantiated similar to the one in your stories folder

https://codesandbox.io/s/test-react-sortable-tree-issue-yxv23

Is there any way to get the list of found nodes? I've tried the searchFinishCallback but this seems to be fired only on the first render. Is this normal?

from react-sortable-tree.