A new tree view similar to file Explorer view

Hi all, I’m trying to implement a custom tree view that looks exactly similar to the current file Explorer view. I have inherited my tree view classes from theia/core/tree classes:

export class MyNavigatorWidget extends TreeWidget
export class MyNavigatorTree extends TreeImpl
export class MyNavigatorModel extends TreeModelImpl
export type MyFolderNode = SelectableTreeNode & ExpandableTreeNode;
export type MyFileNode = SelectableTreeNode;

I have created the tree node objects (folder & file nodes) starting from root and the tree with indentations for children is shown in the UI.

  1. No icons are shown

  2. No lines connecting parent and children are shown

  3. Expand/collapse not working

  4. Selection state not shown

Can anyone help me to achieve the above 4 features? Please note: The tree view look and feel shall be exactly the same as file Explorer View. thanks in advance.

[original thread by rs]


Here is how i’m creating the node that represents a folder:

var myFolderNode = <MyFolderNode> <unknown>(
        id: folderId,
        name: displayName,
        visible: true,
        parent: undefined,
        children: [],
        icon: FOLDER\_ICON


Here is how i’m creating a file node:

var myFileNode = <MyFileNode> (
                id: itemPath,
                name: fileName,
                visible: true,
                icon: FILE_ICON

Could you share reproducible repo please?

You can reuse the navigator widget/model to create another view? i.e. the same widget but different ids and logic to resolve children?


theia/preferences has selection and expand/collapse enabled. I refered to that extension as it is simpler.

[Lucas Koehler]

Regarding ‘No icons are shown’:
Did you override TreeWidget’s renderIcon method? By default it always return null.

[Lucas Koehler]

And regarding “Expand/collapse not working”: Did you check TreeWidget’s method isExpandable? There you can see that your tree nodes must conform to type ExpandableTreeNode (or you override this method).
If you look at ExpandableTreeNode’s is function you can see that it requires a expanded property which your node definitions don’t have. Maybe this is the reason?


Thank you, @lucas-koehler for your suggestions. It worked !