Tree view component

💬 Feature Requests
1

Hey there,

I would like to issue a feature request! We would love to have a sortable tree component which allows to create a nested structure like this: GitHub - frontend-collective/react-sortable-tree: Drag-and-drop sortable component for nested data and hierarchies

Thanks!

2

Have a tree view component - much like the one used in Retool "left panel"?

Thanks

Jeremy

3 Likes
3

I think this would be a hugely valuable addition - the ability to see a tree like structure of resources in a left hand navigation pane is useful in so many instances. The left pane tree you created is great (maybe just needs drag and drop reordering, but that's just being greedy!). How far down the roadmap before you wrap that in a component wrapper?

4

Hey @mecloran! We have an internal feature request ticket just for this :blush: No plans on the horizon just yet, but I added your +1 and will keep this thread updated!

5

I have no idea what I'm doing - but managed to pull in the Ant Design tree with the following settings and code - hoping it might be helpful to someone else.

I set the model to this:
{
"packages": {{getTreeData.data}},
"selected" : "",
"selectedType" : ""
}

Code:

.ant-tree-switcher-line-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .ant-tree-title { text-overflow:ellipses; white-space: nowrap; }

6

Hi @mecloran ,

Looks great.
Can you tell me more about how you integrated this code in retool?

Thanks!

Olivier

1 Like
7

Any progress on this component - would still love to have it!

8

It's not currently being worked on, but I'll add your note to the internal ticket! :slight_smile: Thank you for taking the time to request this.

9

Please add a +1 for me here!

1 Like
10

+1 pls

11

+1

12

+1 as well. This seems like a fairly ubiquitous element in internal tooling and I am surprised this is not given more consideration.

13

Another +1 :+1:

14

+1

15

+1

16

+1

17

Is there any chance a tree view component could be added, a container that operates like a list view but supports a nested/indented structure? i.e. something that could be used to create components similar to a file/folder dialog, supporting expanding/collapsing, reorganizing items, etc.?

18

There are a few ways that we can view and select data that is in a tree form in the UI, but all of them are incomplete and lack options. I am talking about something like this React library A simple React tree menu component

What we already have are the checkbox tree, but there is no option to limit selections to only ONE component. So, a ratio button tree would be nice. There is also a cascader that would work pretty well except that it appears to only put out the labels rather than a pair of label:data like the other dropdown boxes do.

Either of these (or preferably both!) would make it much easier for us to deal with data in a tree form.

Thanks a bunch!

19

This Retool blog article describes their new tree view as part of the IDE. I like to have that as tree view as a reusable/customizable component. Is that what you mean?

20

Yeah! I’d love to have that tree view as a reusable component! That would be huge for my use case. It’s quite nice that they have used the tree in the API view… now let us have it!