Search code examples
vaadinweb-component

Extending a Vaadin Grid to a custom component?

I have a custom component class for the Vaadin Grid: import { Grid, GridColumn } from '@vaadin/grid';

@customElement('test-vaadin-grid') export class TestVaadinGrid extends Grid {}

@customElement('test-vaadin-grid-column') export class TestVaadinGridColumn extends GridColumn {}

However the cell content for each table cell is blank for:

    <test-vaadin-grid .items="${items}">
         <test-vaadin-grid-column path="firstName"></test-vaadin-grid-column>
         <test-vaadin-grid-column path="lastName"></test-vaadin-grid-column>
         <test-vaadin-grid-column path="email"></test-vaadin-grid-column>
         <test-vaadin-grid-column path="profession"></test-vaadin-grid-column>
    </test-vaadin-grid>;

If you replace test-vaadin-grid with vaadin-grid then the cells are populated, why is this the case? I was expecting the table cells to be correctly populated with test-vaadin-grid.

Solution

  • At least in vaadin-grid-column.js, you can see that it's expecting the parent grid element to follow a specific naming pattern:

    
    _findHostGrid() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias, consistent-this
      let el = this;
      // Custom elements extending grid must have a specific localName
      while (el && !/^vaadin.*grid(-pro)?$/u.test(el.localName)) {
        el = el.assignedSlot ? el.assignedSlot.parentNode : el.parentNode;
      }
      return el || undefined;
    }