join grid column not available in vaadin hilla using Lit?

Question

in vaadin hilla grouping column header is working fine whereas joining column under one header not working. vaadin 14 had option for joining 2 columns which is lacking in hilla. if anyone has any solution for this?

 private static Grid<String> createGrid() {
        Grid<String> grid = new Grid<>();
        grid.setId("grid1");
        grid.addThemeVariants(GridVariant.LUMO_COLUMN_BORDERS);
        grid.appendHeaderRow();
        List<Grid.Column<String>> columns = addColumns(grid);
        HeaderRow.HeaderCell header = grid.prependHeaderRow()
                .join(columns.get(0), columns.get(1));
        header.setText("first + second");
        grid.prependHeaderRow()
                .join(columns.toArray(new Grid.Column[columns.size()]))
                .setText("joined");

        grid.setItems("1", "2", "3");
        return grid;

Answer 1

There is no direct support for joining table body cells in vaadin-grid, it was not even in Vaadin 14 version. There is just option to join header cells.

If you want to show complex data in body cell, e.g. join data from multiple properties, you need to use renderer

import { columnBodyRenderer } from "@vaadin/grid/lit.js"

Use it in vaadin-grid

<vaadin-grid ...>
   <vaadin-grid-column
      ${columnBodyRenderer(contactRenderer, [])}
   ></vaadin-grid-column>
...
</vaadin-grid>

And define rendered function

const contactRenderer: GridColumnBodyLitRenderer<Contact> = (contact) => {
    return html`
       <span>
          ${contact.firstName} ${contact.lastName}
       </span>
    `;
  };