lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
952 stars 77 forks source link

Add autoExpand option to auto expand tree on load. #192

Closed AuresaNyctea closed 1 year ago

AuresaNyctea commented 1 year ago

Is your feature request related to a problem? Please describe. My client has a feature request to start the tree we're using expanded upon the initial load. So that they don't have to always open each node of the tree to see everything.

Describe the solution you'd like A prop to expand upon load inside the project would be very useful to me.

Describe alternatives you've considered I have tried using a debounced useEffect to call expandAll on the tree after it loads but it looks clunky to have it flash open and if the load is slow for any reason the expandAll call will be lost. I can't call it more than once because if a user wants to collapse the tree after load they should be able to.

Thanks

lukasbach commented 1 year ago

Hi!

With the current implementation, I don't think that is easily doable. Implementing expandAll was already kind off difficult with the way how rct loads items, since it strictly only fetches items when they are displayed, this only really is possible in a way by rendering the tree and waiting for all levels to load.

At the same time I think this is the most useful way anyways, since this means data becomes visible as it becomes available. This means each layer only expands once its children have loaded, is this what you mean with the flash open rendering?

Alternatively, you could await the data structure yourself before rendering the tree, and then rendering the initial tree with a view state prop that includes all folders as preopened, which would render the tree with everything open during initial render. Or you could hide the tree or display a loader instead with CSS, and display the tree once everything has loaded, if its just the gradual load-in rendering that is an issue for you.