React-sortable-tree: Configure the tree to size itself according to its contents (disable virtualization?)

[tailsu]

As far as I can tell, it's impossible to configure the tree to size itself according to its contents. It always requires a fixed height container. That, of course, makes sense when the tree is virtualized.

I would like to get a tree that sizes itself to its contents and when the content overflows the page, then the page scrollbars appear. As I understand it, I need to eviscerate the virtualization functionality. Is there a better way, like a switch or something?

[fritz-c]

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.

[tailsu]

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!

[fritz-c]

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.

[fritz-c]

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

[robhadfield]

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

[adyz]

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