How to remder Array in vaadin grid from Hilla application?

Question

What is the best approach to display an array in a the cell of vaadin grid?

I model a list of values like this in springboot.

private List<String> responsibilities;

If responsibilities contains ["Cut grass", "Wash dishes", "Clean floor"] I would like to render this as a bullet list in the cell:

• Cut grass
• Wash dishes
• Clean floor

Sorry my typescripts skills a poor.

Checked docs and examples and had a try with cell rendering but was not very obvious how to setup the array display.

This attempt gives exception ERROR: Invalid binding pattern!

import '@vaadin/grid';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import type { GridColumnBodyLitRenderer } from '@vaadin/grid/lit.js';
import { html } from 'lit';
import { Binder, field } from '@hilla/form';
import { customElement, state } from 'lit/decorators.js';
import { View } from '../../views/view';
import Career from 'Frontend/generated/com/example/application/models/Career';
import CareerModel from 'Frontend/generated/com/example/application/models/CareerModel';
import { getCareers } from 'Frontend/generated/CareerEndpoint';

@customElement('career-view')
export class CareerView extends View {

    @state()
    private careers: Career[] = [];
    private binder = new Binder(this, CareerModel);

    async firstUpdated() {
        this.careers = await getCareers();
    }

    render() {
      return html`
        <div>
          <vaadin-grid theme="wrap-cell-content" .items=${this.careers}>
            <vaadin-grid-column path="title"> </vaadin-grid-column>
            <vaadin-grid-column path="aliases"> </vaadin-grid-column>
            <vaadin-grid-column path="description"> </vaadin-grid-column>
            <vaadin-grid-column
               header="Responsibility"
                  ${columnBodyRenderer(this.responsibilityRenderer, [])}
            ></vaadin-grid-column>
            <vaadin-grid-column path="experience"> </vaadin-grid-column>
          </vaadin-grid>
        </div>
      `;
     }

    responsibilityRenderer: GridColumnBodyLitRenderer<Career> = (this.careers) => {
        return html`
          <ul>
            ${careers.responsibilities.map(r => html`
              <li>${r}</li>
            `)}
          </ul>
        `;
      };

}
 

Answer 1

Note the fiddling with typescript undefined messages using undefined and '?' at various locations. Data displays ok now no console errors.

Thanks to Marcus & Tatu for the help!

import '@vaadin/grid';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import type { GridColumnBodyLitRenderer } from '@vaadin/grid/lit.js';
import { html } from 'lit';
import { Binder, field } from '@hilla/form';
import { customElement, state } from 'lit/decorators.js';
import { View } from '../../views/view';
import Career from 'Frontend/generated/com/example/application/models/Career';
import CareerModel from 'Frontend/generated/com/example/application/models/CareerModel';
import { getCareers } from 'Frontend/generated/CareerEndpoint';

@customElement('career-view')
export class CareerView extends View {

    @state()
    private careers: (Career | undefined)[] = [];

    async firstUpdated() {
        this.careers = await getCareers();
    }

    render() {
      return html`
        <div>
          <vaadin-grid theme="wrap-cell-content" .items=${this.careers}>
            <vaadin-grid-column path="title"> </vaadin-grid-column>
            <vaadin-grid-column path="aliases"> </vaadin-grid-column>
            <vaadin-grid-column path="description"> </vaadin-grid-column>
            <vaadin-grid-column
               header="Responsibility"
                  ${columnBodyRenderer(this.responsibilityRenderer, [])}
            ></vaadin-grid-column>
            <vaadin-grid-column path="experience"> </vaadin-grid-column>
          </vaadin-grid>
        </div>
      `;
     }

    responsibilityRenderer: GridColumnBodyLitRenderer<Career> = (item, _model, column) => {
        return html`
           ${item?.responsibilities?.map(r => html`
              <li>${r}</li>
            `)}
        `;
      };
}

Answer 2

You are on the right track with using a cell renderer. See the docs here: https://vaadin.com/docs/latest/components/grid/#content

TypeScript code is allowed in Lit bindings, thus you can e.g. use array.map function to iterate over array and generate list or repeated elements.

Your renderer method would look something like this:

responsibilityRenderer: GridColumnBodyLitRenderer<Person> = (person) => {
    return html`
      <ul>
        ${person.responsibilities.map(r => html`
          <li>${r}</li>
        `)}
      </ul>
    `;
  };