Add tree component

[idoprz]

Hi,

Please add tree component to the library. I want to have a tree as part of my webview and not in a TreeView. Use case can be a TreeView like panel with more controls like search control above the tree.

[daviddossett]

Thanks for raising this, @idoprz. We've received this request from other teams at Microsoft and usually recommend the native TreeView to avoid reinventing a fairly complex control. But I'm interested in learning more.

Could you tell me more about what sort of functionality you're looking for here?

cc @hawkticehurst

[shashkovdanil]

@daviddossett I need a tree component too. I can't use native treeview component, because it non-customizable (I can change only icon, text and description). I need to add different labels

[idoprz]

Hi,

Some tree use cases we have:

1. Currently there is only primary string and secondary string format. We need to present more details, like disabled nodes, use different controls inside nodes not just button, like toggle, badge, etc'.

2. Search / Filter tree -> filter out search results or API list etc. See here example of tree in a panel which has like a "toolbar".

[hawkticehurst]

Thanks for the references @idoprz!

To clarify a little more based on the images you sent would it be accurate to say you're looking for a component that is a sort of hybrid between a tree view and data grid that also has search functionality?

[idoprz]

You can see that near the search I also have buttons, like a toolbar. In some cases I need capabilities similar to grid data, but maybe more flexibility on the tree will be enough. In other cases it is 100% tree but need to have more controls like the search or a toolbar. Have in mind that after search I need to present the results. The results might not be suited to present in tree because the hierarchy might not be reflected correctly in filtered results. So adding "search" on top of TreeView is nice feature, but not sure will be enough. We have plenty of other use cases for controls and webviews if needed.

[daviddossett]

Agreed that the first image would probably fall under the data grid umbrella. The key difference being that it has nesting like a tree. We'll certainly be looking to expand the data grid functionality over time—this is very helpful input 🙏

@idoprz have you considered using the Quick Pick to handle search and filtering? It's unlikely that we'll recreate the TreeView in the toolkit given its complexity and existing native support. Instead, this is a situation where we could bring the discussion to VS Code itself to enhance the native API.

This is a prototype from a while back that showcases on way of leveraging the TreeView, View, and command APIs together to filter a tree. Not perfect, but variations of this are fairly common across the extensions landspace.

https://user-images.githubusercontent.com/25163139/139114524-27b6d8ab-357f-4171-9d3b-9f5037b3740d.mp4

[atanasster]

Hi,

I would love to see this added to the components, so it can be styled in accordance.

My use-case is where a tree view is used inside of a grid to display property types: https://github.com/ccontrols/instant-documentation-vscode

Currently using the fast-tree-view, and applying a few styles to make it look seamless inside of the vscode-webvoiew-ui components:

https://github.com/ccontrols/instant-documentation-vscode/blob/master/src/webview/fast-components.ts

[iddan]

Hey, I would love to see this added as well. My use case is a tree view to show custom search results. I created a poor-mans implementation just for demonstration purposes:

[javahacks]

A tree component was great. However I would also consider a more complex tree-table control as shown in the first use case here https://github.com/microsoft/vscode-webview-ui-toolkit/issues/255#issuecomment-942414503 .

Here you see what I have in mind in action. I believe there are many use cases where you have to show structured information in such a control (e.g. advanced debugger output).

[sketchbuch]

I would also like a tree widget, currently I need a tree similar to the file panel with a title/description and icon buttons that appear on hover like in the tree view that vscode uses so that commands can be run on the item. I also need to highlight something that is active and be able to expand/collapse all folders.

Here is an example of a tree I built myself for my web view:

[smorimoto]

Any updates on this? Right now we're embedding astexplorer as a webview, and to be honest, it looks weird when you see it in VSCode. I think it would also be useful to display the AST... 🙂

[seanpoulter-foci]

To propose another use case, we'd like to build a UI similar to a test runner that shows a file type icon on the left and a status pass/fail/progress/unknown on the right.

We don't believe this is possible with the current TreeView API.