Information request: Is variable row height a possibility?

[janvandenberg]

First of all, I want to express my sincere gratitude to all the contributors of react-arborist. This library is truly awesome and it looks like it can be incredibly helpful in my project.

I'm wondering if there's a way to create variable row heights in react-arborist. My node leaves are sometimes bigger than the allotted height. Right now I can only cut off my text, but I was wondering if there is another way? I've attempted to implement this using a row renderer, but I haven't been successful so far. Since the absolute positioning of the siblings don't take my custom height into consideration.

[CHE1RON]

That would be a great thing to have! 👍

[gpalomar]

Is there a planned date for this functionality? I really need it in my project 😃

[jameskerr]

If you are asking for a dynamic height that adjusts based on the contents of the node, that is not a goal for this project. But if you want to provide the height of each node statically, we could do that. The goal with this project was to virtualize the rows so that you can have many items in the tree. Virtualization is fast because we can do math to calculate where a row should be positioned.

I use react-window for the virtualization and they do have an option for mixed-height rows. You can see what I mean over at their docs

https://react-window.vercel.app/#/examples/list/variable-size

One day, we could use that instead of FixedSizeList. Not high on the priority list though.

[CHE1RON]

What about #238, at least in the interim? Right now, our team maintains a private fork of react-arborist, applying some of the existing PRs, and so far it works great 🤔

[SnakeAmadeus]

I just played around with statically declared variable height rows in my project. Visually, it worked pretty well with a custom row renderer using RowRendererProps. However, I found it broke the DnD functionality because the positions of drop cursors are based on the tree.visibleNodes.length * tree.rowHeight defined in DropContainer. This mechanism is built upon the assumption that every visible row in the view is fixed-sized. So for anyone who wants a temporary solution without the DnD support, it is possible by defining your own RowRendererProps.