Simple Tree Grid Example for Hilla

Question

Consider I have near 0% experience with typescript and now a little Hilla experience (which is going great!) please be gentle with me and provide a simple Tree Grid example.

I was hoping to do something easy like:

export class GroceryView extends View {
  display a lovely tree view of master detail data.
}

But the examples on vaadin and hilla web sites started going into which was confusing...

export class Example extends LitElement {}

I have the grid working ok.

• Looked at the various document sources and github example projects.
• I have the basic grid working ok via the View implementation.

Answer 1

The View class in Hilla is actually an extension of LitElement. So if a documentation example uses LitElement, you can copy the contents of that class to your view and expect it to work.

The main difference between View and LitElement is that a View renders its template in its light DOM of the element, whereas LitElement by default renders its template in its shadow DOM. This is because View defines createRenderRoot() which returns this instead of this.attachShadow().

You should be able to copy-paste the first example in the docs to your GroceryView: https://vaadin.com/docs/latest/components/tree-grid

I notice now, that the examples are not showing all the needed classes in them, mainly the DataService and the Person domain object. You can copy those from the docs repo:

• https://github.com/vaadin/docs/blob/latest/frontend/demo/domain/DataService.ts
• https://github.com/vaadin/docs/blob/latest/src/main/java/com/vaadin/demo/domain/Person.java

Answer 2

Not sure now if I need the tree grid I have manged to display the details list by calling the detailing backend getCareersById() and then looping to create HTML. I could not find any master/detail or tree grid examples that use a list of values from backend.

    careersRenderer: GridColumnBodyLitRenderer<Consultant> = (item, _model, column) => {
        return html`
        <div class="w-full flex-wrap bg-contrast-5 py-s px-l">
          ${until(getCareersById(item.careers).then(opts => repeat(opts, (career) => html`
              <h5>${career?.title}</h5>
              <p>${career?.description}</p>
            `)))}
        </div>
        `;
      };