Grid

@state()
private items?: Person[];

async firstUpdated() {
  const { people } = await getPeople();
  this.items = people;
}

render() {
  return html`
    <vaadin-grid .items="${this.items}">
      <vaadin-grid-selection-column></vaadin-grid-selection-column>
      <vaadin-grid-column
        header="Employee"
        .renderer="${this.employeeRenderer}"
        flex-grow="0"
        auto-width
      ></vaadin-grid-column>
      <vaadin-grid-column path="profession" auto-width></vaadin-grid-column>
      <vaadin-grid-column
        header="Status"
        .renderer="${this.statusRenderer}"
        auto-width
      ></vaadin-grid-column>
    </vaadin-grid>
  `;
}

private employeeRenderer = (root: HTMLElement, _: HTMLElement, model: GridItemModel<Person>) => {
  const person = model.item;
  render(
    html`
      <vaadin-horizontal-layout style="align-items: center;" theme="spacing">
        <vaadin-avatar
          img="${person.pictureUrl}"
          name="${person.firstName} ${person.lastName}"
          alt="User avatar"
        ></vaadin-avatar>
        <vaadin-vertical-layout style="line-height: var(--lumo-line-height-m);">
          <span> ${person.firstName} ${person.lastName} </span>
          <span
            style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
          >
            ${person.email}
          </span>
        </vaadin-vertical-layout>
      </vaadin-horizontal-layout>
    `,
    root
  );
};

private statusRenderer = (root: HTMLElement, _: HTMLElement, model: GridItemModel<Person>) => {
  const person = model.item;
  render(
    html`
      <span theme="badge ${person.status === 'Available' ? 'success' : 'error'}"
        >${person.status}</span
      >
    `,
    root
  );
};

<vaadin-grid .items="${this.invitedPeople}" all-rows-visible>
  <vaadin-grid-column header="Name" path="displayName" auto-width></vaadin-grid-column>
  <vaadin-grid-column path="email"></vaadin-grid-column>
  <vaadin-grid-column path="address.phone"></vaadin-grid-column>
  <vaadin-grid-column header="Manage" .renderer="${this.manageRenderer}"></vaadin-grid-column>
</vaadin-grid>

<vaadin-grid .items="${this.items}">
  <vaadin-grid-sort-column path="id"></vaadin-grid-sort-column>
  <vaadin-grid-sort-column path="displayName" header="Name"></vaadin-grid-sort-column>
  <vaadin-grid-sort-column path="email"></vaadin-grid-sort-column>
  <vaadin-grid-sort-column path="profession"></vaadin-grid-sort-column>
  <vaadin-grid-sort-column path="birthday"></vaadin-grid-sort-column>
</vaadin-grid>

@state()
private items: Person[] = [];

async firstUpdated() {
  const { people } = await getPeople();
  this.items = people;
}

render() {
  return html`
    <vaadin-grid .items="${this.items}">
      <vaadin-grid-sort-column
        header="Employee"
        path="lastName"
        .renderer="${this.employeeRenderer}"
      ></vaadin-grid-sort-column>
      <vaadin-grid-column
        .renderer="${this.birthdayRenderer}"
        .headerRenderer="${this.birthdayHeaderRenderer}"
      ></vaadin-grid-column>
    </vaadin-grid>
  `;
}

private employeeRenderer = (root: HTMLElement, _: HTMLElement, model: GridItemModel<Person>) => {
  const person = model.item;
  render(
    html`
      <vaadin-horizontal-layout style="align-items: center;" theme="spacing">
        <vaadin-avatar
          img="${person.pictureUrl}"
          name="${person.firstName} ${person.lastName}"
          alt="User avatar"
        ></vaadin-avatar>
        <vaadin-vertical-layout style="line-height: var(--lumo-line-height-m);">
          <span> ${person.firstName} ${person.lastName} </span>
          <span
            style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
          >
            ${person.email}
          </span>
        </vaadin-vertical-layout>
      </vaadin-horizontal-layout>
    `,
    root
  );
};

private birthdayHeaderRenderer = (root: HTMLElement) => {
  render(html`<vaadin-grid-sorter path="birthday">Birthdate</vaadin-grid-sorter>`, root);
};

private birthdayRenderer = (root: HTMLElement, _: HTMLElement, model: GridItemModel<Person>) => {
  const person = model.item;
  const birthday = parseISO(person.birthday);
  render(
    html`
      <vaadin-vertical-layout style="line-height: var(--lumo-line-height-m);">
        <span> ${format(birthday, 'P')} </span>
        <span
          style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
        >
          Age: ${differenceInYears(Date.now(), birthday)}
        </span>
      </vaadin-vertical-layout>
    `,
    root
  );
};

<vaadin-grid .items="${this.items}">
  <vaadin-grid-filter-column
    header="Name"
    path="displayName"
    .renderer="${this.nameRenderer}"
    flex-grow="0"
    width="230px"
  ></vaadin-grid-filter-column>
  <vaadin-grid-filter-column path="email"></vaadin-grid-filter-column>
  <vaadin-grid-filter-column path="profession"></vaadin-grid-filter-column>
</vaadin-grid>

@state()
private filteredItems: PersonEnhanced[] = [];

private items: PersonEnhanced[] = [];

async firstUpdated() {
  const people = (await getPeople()).people.map((person) => ({
    ...person,
    displayName: `${person.firstName} ${person.lastName}`,
  }));
  this.items = this.filteredItems = people;
}

render() {
  return html`
    <vaadin-vertical-layout theme="spacing">
      <vaadin-text-field
        placeholder="Search"
        style="width: 50%;"
        @value-changed="${(e: TextFieldValueChangedEvent) => {
          const searchTerm = ((e.detail.value as string) || '').trim();
          const matchesTerm = (value: string) => {
            return value.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0;
          };

          this.filteredItems = this.items.filter(({ displayName, email, profession }) => {
            return (
              !searchTerm ||
              matchesTerm(displayName) ||
              matchesTerm(email) ||
              matchesTerm(profession)
            );
          });
        }}"
      >
        <vaadin-icon slot="prefix" icon="vaadin:search"></vaadin-icon>
      </vaadin-text-field>
      <vaadin-grid .items="${this.filteredItems}">
        <vaadin-grid-column
          header="Name"
          .renderer="${this.nameRenderer}"
          flex-grow="0"
          width="230px"
        ></vaadin-grid-column>
        <vaadin-grid-column path="email"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>
    </vaadin-vertical-layout>
  `;
}

@customElement('grid-item-details')
export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items: Person[] = [];

  @state()
  private detailsOpenedItem: Person[] = [];

  async firstUpdated() {
    const people = (await getPeople()).people.map((person) => ({
      ...person,
      displayName: `${person.firstName} ${person.lastName}`,
    }));
    this.items = people;
  }

  render() {
    return html`
      <vaadin-grid
        theme="row-stripes"
        .items="${this.items}"
        .detailsOpenedItems="${this.detailsOpenedItem as any}"
        @active-item-changed="${(e: GridActiveItemChangedEvent<Person>) =>
          (this.detailsOpenedItem = [e.detail.value])}"
        .rowDetailsRenderer="${guard(
          [],
          () => (root: HTMLElement, _: GridElement, model: GridItemModel<Person>) => {
            const person = model.item;

            render(
              html`<vaadin-form-layout .responsiveSteps="${[{ minWidth: '0', columns: 3 }]}">
                <vaadin-text-field
                  label="Email address"
                  .value="${person.email}"
                  colspan="3"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="Phone number"
                  .value="${person.address.phone}"
                  colspan="3"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="Street address"
                  .value="${person.address.street}"
                  colspan="3"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="ZIP code"
                  .value="${person.address.zip}"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="City"
                  .value="${person.address.city}"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="State"
                  .value="${person.address.state}"
                  readonly
                ></vaadin-text-field>
              </vaadin-form-layout>`,
              root
            );
          }
        )}"
      >
        <vaadin-grid-column path="displayName" header="Name"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

@customElement('grid-item-details-toggle')
export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items: Person[] = [];

  @state()
  private detailsOpenedItems: Person[] = [];

  async firstUpdated() {
    const people = (await getPeople()).people.map((person) => ({
      ...person,
      displayName: `${person.firstName} ${person.lastName}`,
    }));
    this.items = people;
  }

  render() {
    return html`
      <vaadin-grid
        theme="row-stripes"
        .items="${this.items}"
        .detailsOpenedItems="${this.detailsOpenedItems as any}"
        .rowDetailsRenderer="${guard(
          [],
          () => (root: HTMLElement, _: GridElement, model: GridItemModel<Person>) => {
            const person = model.item;

            render(
              html` <vaadin-form-layout .responsiveSteps="${[{ minWidth: '0', columns: 3 }]}">
                <vaadin-text-field
                  label="Email address"
                  .value="${person.email}"
                  colspan="3"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="Phone number"
                  .value="${person.address.phone}"
                  colspan="3"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="Street address"
                  .value="${person.address.street}"
                  colspan="3"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="ZIP code"
                  .value="${person.address.zip}"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="City"
                  .value="${person.address.city}"
                  readonly
                ></vaadin-text-field>
                <vaadin-text-field
                  label="State"
                  .value="${person.address.state}"
                  readonly
                ></vaadin-text-field>
              </vaadin-form-layout>`,
              root
            );
          }
        )}"
      >
        <vaadin-grid-column path="displayName" header="Name"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
        <vaadin-grid-column
          .renderer="${guard(
            [],
            () => (root: HTMLElement, _: GridColumnElement, model: GridItemModel<Person>) => {
              const person = model.item;
              render(
                html`<vaadin-button
                  theme="tertiary"
                  @click="${() => {
                    const isOpened = this.detailsOpenedItems.includes(person);
                    this.detailsOpenedItems = isOpened
                      ? this.detailsOpenedItems.filter((p) => p != person)
                      : [...this.detailsOpenedItems, person];
                  }}"
                  >Toggle details
                </vaadin-button>`,
                root
              );
            }
          )}"
        ></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

The inline `.renderer` function is encapsulated by the `guard` directive for performance reasons.
See the https://lit.dev/docs/templates/directives#guard[official Lit documentation] for more details.

private contextMenuRenderer =
  () => (root: HTMLElement, elem: ContextMenuElement, context: ContextMenuRendererContext) => {
    const { sourceEvent } = context.detail as { sourceEvent: Event };
    const grid = elem.firstElementChild as GridElement<Person>;

    const eventContext = grid.getEventContext(sourceEvent);
    const person = eventContext.item!;

    const clickHandler = (_action: string) => () => {
      // console.log(`${action}: ${person.firstName} ${person.lastName}`);
    };

    render(
      html`<vaadin-list-box>
        <vaadin-item @click="${clickHandler('Edit')}">Edit</vaadin-item>
        <vaadin-item @click="${clickHandler('Delete')}">Delete</vaadin-item>
        <hr />
        <vaadin-item @click="${clickHandler('Email')}">Email (${person.email})</vaadin-item>
        <vaadin-item @click="${clickHandler('Call')}">Call (${person.address.phone})</vaadin-item>
      </vaadin-list-box>`,
      root
    );
  };

render() {
  return html`
    <vaadin-context-menu .renderer="${guard([], this.contextMenuRenderer)}">
      <vaadin-grid .items="${this.items}" @vaadin-contextmenu="${this.onContextMenu}">
        <vaadin-grid-column path="firstName"></vaadin-grid-column>
        <vaadin-grid-column path="lastName"></vaadin-grid-column>
        <vaadin-grid-column path="email"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>
    </vaadin-context-menu>
  `;
}

onContextMenu(e: MouseEvent) {
  // Prevent opening context menu on header row.
  if (
    ((e.currentTarget as GridElement).getEventContext(e) as GridEventContext<Person>).section !==
    'body'
  ) {
    e.stopPropagation();
  }
}