Simple TreeWidget implementation example

Hi, I’m looking for a very simple example of a TreeWidget implementation, does anyone know a git repo that has one? I checked FileTreeWidget and OutlineViewWidget in theia repo but I’m don’t understand how the content and labels are provided to the tree. I’m familiar to the JFace way with content and label providers, is it similar?

[original thread by Hanksha]

We actually reworking this area right now: in regards how labels are customized.

Usually you have to customize 3 parts:

  • tree itself, something like FileTree.resolveChildren - it is a function which resolves child nodes for given. Before you should define your model btw, i.e. something like FileNode and DirNode
  • before name, description and icon will be part of your nodes, but it is turned out to be expensive to store and compute for big models, so with they are only computed on demand for visible nodes. One has to implement LableProviderContribution for own tree model, look at FileTreeLabelProvider in PR for example
  • last part is a widget to have some custom rendering, look at FileTreeWidget for example

Everything should be bound together via child DI container, see createFileTreeContainer and how it is used. You can also explore createTreeContainer to see what else can be customized for trees.


Ok thanks I’ll check these out


@anton-kosyakov Another question, can those tree implementations be reused outside of a TreeWidget? Like a dialog or having 2 tree side by side in a widget view.

They cannot be, but you can create a composite widget which embeds 2 tree widgets, or a dialog widget which embeds a tree widget, see for example the file dialog how it embeds the file tree.


Alright I’ll check that thanks!


I found this a very good starting point for a tree view plugin

This may also help but I didnt try it

the first link is a plugin, not Theia extension, it cannot use widgets

second is VS Code extension, it cannot us widgets as well


What’s the correct way to set the root of the tree?
I tried something like this:

    const members = [
        name: "member 1",
        children: [
            name: "child1",
            children: []
            name: "child2",
            children: []
      /* ... more data */
    ] as FamilyMember[];
    this.model.root = {
      id: "family-tree-root",
      name: "Family Tree Root",
      children: => FamilyMemberNode.toNode(member)),
      visible: true,
      parent: undefined
    } as CompositeTreeNode;


When I do that FamilyTree.resolveChildren is called for the root node, but nothing renders in the widget


I checked the model in FamilyTreeWidget.renderTree and it has the children correctly set

as FamilyMember[]; looks suspicious

do const members: FamilyMember[] = [] and if there is some compilation errors then you should fix it

strange that your nodes don’t have id