Grid

Usage
Flow Usage

Grid is a component for showing tabular data.

Open in a
new tab
@state()
private items: Person[] = [];

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

render() {
  return html`
    <vaadin-grid .items="${this.items}">
      <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>
  `;
}

Content

A basic Grid uses plain text to display information in rows and columns. Rich content can be used to provide additional information in a more legible fashion. Components such as input fields and Button are also supported.

Open in a
new tab
@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"
        flex-grow="0"
        auto-width
        ${columnBodyRenderer(this.employeeRenderer, [])}
      ></vaadin-grid-column>
      <vaadin-grid-column path="profession" auto-width></vaadin-grid-column>
      <vaadin-grid-column
        header="Status"
        auto-width
        ${columnBodyRenderer(this.statusRenderer, [])}
      ></vaadin-grid-column>
    </vaadin-grid>
  `;
}

private employeeRenderer: GridColumnBodyLitRenderer<Person> = (person) => {
  return 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>
  `;
};

private statusRenderer: GridColumnBodyLitRenderer<Person> = ({ status }) => {
  return html`
    <span theme="badge ${status === 'Available' ? 'success' : 'error'}">${status}</span>
  `;
};

Component Renderer vs Lit Renderer (Flow Only)

As demonstrated in the previous example, custom content can be rendered using component renderers or Lit renderers.

Component Renderer

Component renderers are easy to build, but slow to render. For a given column, they generate a component for each item in the dataset. The rendered components are fully controllable on the server side.

For each rendered cell, Grid creates a corresponding component instance on the server side. A dataset of 100 items and 10 columns using component renderer adds up to 1,000 components that need to be managed. The more components you use in a component renderer, the greater the impact on performance.

Component renderers are very flexible and easy to use, but should be used with caution. They are better suited as editors, since only a single row can be edited at a time. They can also be used for detail rows.

Lit Renderer

Lit renderers render quickly, but require you to write HTML. To use components with Lit renderers, you need to use their HTML format. Lit templates are immutable, meaning that the state of the components cannot be managed on the server side. However, the template can have different representations, depending on the state of the item.

The only data sent from the server, other than the template itself (which is sent only once), is the extra name property of each item.

Lit templates still enable event handling on the server side but you cannot, for example, disable or change the text of a button from the event handler. For these types of situations, use editors instead.

With Lit renderers, the server does not keep track of the components in each cell. It only manages the state of the item in each row. The client side does not need to wait for the server to send missing information about what needs to be rendered; it can use the template and stamp away all the information it needs.

See more in-depth documentation on using Lit renderers with Grid.

Dynamic Height

Grid has a default height of 400 pixels. It becomes scrollable when its items overflow the allocated space.

In addition to setting any fixed or relative value, the height of a grid can be set by the number of items in the dataset, meaning that the grid will grow and shrink based on the row count.

Note that this disables scrolling and should not be used for large data sets, in order to avoid performance issues.

Open in a
new tab
<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"
    ${columnBodyRenderer(this.manageRenderer, [])}
  ></vaadin-grid-column>
</vaadin-grid>

Selection

Selection is not enabled by default. Grid supports single and multi-select. Single select the user to select exactly one item, while multi-select enables multiple items to be selected.

Single Selection Mode

In single selection mode, the user can select and deselect rows by clicking anywhere on the row.

Open in a
new tab
@state()
private items: Person[] = [];

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

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

render() {
  return html`
    <vaadin-grid
      .items="${this.items}"
      .selectedItems="${this.selectedItems}"
      @active-item-changed="${(e: GridActiveItemChangedEvent<Person>) => {
        const item = e.detail.value;
        this.selectedItems = item ? [item] : [];
      }}"
    >
      <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>
  `;
}

Multi-Select Mode

In multi-select mode, the user can use a checkbox column to select and deselect rows.

Open in a
new tab
@customElement('grid-multi-select-mode')
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[] = [];

  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 path="firstName"></vaadin-grid-column>
        <vaadin-grid-column path="lastName"></vaadin-grid-column>
        <vaadin-grid-column path="email"></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

Columns

Column alignment, freezing (fixed position), grouping, headers and footers, visibility, and width can be configured. Users can be enabled to resize and reorder columns.

Column Alignment

Three different column alignments are supported: left (default), center, and right.

Right align is useful when comparing numeric values, as it helps with readability and scannability. Tabular numbers (if the font offers them) or a monospace font could be used to further improve digit alignment.

Open in a
new tab
<vaadin-grid .items="${this.items}">
  <vaadin-grid-column path="displayName" header="Name"></vaadin-grid-column>
  <vaadin-grid-column
    header="Due"
    ${columnBodyRenderer(() => html`<span>${this.randomDate()}</span>`, [])}
  ></vaadin-grid-column>
  <vaadin-grid-column
    header="Amount"
    text-align="end"
    ${columnBodyRenderer(
      () => html`
        <span style="font-variant-numeric: tabular-nums">${this.randomAmount()}</span>
      `,
      []
    )}
  ></vaadin-grid-column>
</vaadin-grid>

Column Freezing

Columns and column groups can be frozen – made “sticky” – to exclude them from scrolling a grid horizontally. This can be useful for keeping the most important columns always visible in a grid with many columns. Freezing columns at the end of the grid is useful, for example, for keeping row actions always visible.

Open in a
new tab
<vaadin-grid-column
  frozen
  header="Name"
  auto-width
  flex-grow="0"
  ${columnBodyRenderer(this.nameRenderer, [])}
></vaadin-grid-column>
<vaadin-grid-column
  frozen-to-end
  auto-width
  flex-grow="0"
  ${columnBodyRenderer(this.actionRenderer, [])}
></vaadin-grid-column>

Although it is technically possible to freeze any column, this feature should primarily be used to freeze columns at the start or end of the grid, leaving the remaining columns between them unfrozen.

Column Grouping

It is possible to group columns together. Grouped columns share a common header and footer. Use this feature to better visualize and organize related or hierarchical data.

Open in a
new tab
@customElement('grid-column-grouping')
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[] = [];

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

  render() {
    return html`
      <vaadin-grid .items="${this.items}">
        <vaadin-grid-column-group header="Name">
          <vaadin-grid-column path="firstName"></vaadin-grid-column>
          <vaadin-grid-column path="lastName"></vaadin-grid-column>
        </vaadin-grid-column-group>
        <vaadin-grid-column-group header="Address">
          <vaadin-grid-column path="address.street"></vaadin-grid-column>
          <vaadin-grid-column path="address.city"></vaadin-grid-column>
          <vaadin-grid-column path="address.zip"></vaadin-grid-column>
          <vaadin-grid-column path="address.state"></vaadin-grid-column>
        </vaadin-grid-column-group>
      </vaadin-grid>
    `;
  }
}

Column Headers & Footers

Each column has its own customizable header and footer. A basic column header shows the name in plain text. Footers are empty and thus hidden by default. Both can contain rich content and components.

Open in a
new tab
@state()
private items: Person[] = [];

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

render() {
  return html`
    <vaadin-grid .items="${this.items}">
      <vaadin-grid-column
        header="Name"
        path="displayName"
        ${columnFooterRenderer(this.displayNameFooterRenderer, [])}
      ></vaadin-grid-column>
      <vaadin-grid-column
        ${columnHeaderRenderer(this.subscriberHeaderRenderer, [])}
        ${columnBodyRenderer(this.subscriberRenderer, [])}
        ${columnFooterRenderer(this.subscriberFooterRenderer, [])}
      ></vaadin-grid-column>
      <vaadin-grid-column
        path="membership"
        ${columnHeaderRenderer(this.membershipHeaderRenderer, [])}
        ${columnFooterRenderer(this.membershipFooterRenderer, [])}
      ></vaadin-grid-column>
    </vaadin-grid>
  `;
}

private displayNameFooterRenderer = () => {
  return html`<span>200 total members</span>`;
};

private subscriberHeaderRenderer = () => {
  return html`
    <vaadin-horizontal-layout style="align-items: center;">
      <span>Subscriber</span>
      <vaadin-icon
        icon="vaadin:info-circle"
        title="Subscribers are paying customers"
        style="height: var(--lumo-font-size-m); color: var(--lumo-contrast-70pct);"
      ></vaadin-icon>
    </vaadin-horizontal-layout>
  `;
};

private subscriberRenderer: GridColumnBodyLitRenderer<Person> = (person) => {
  return html`<span>${person.subscriber ? 'Yes' : 'No'}</span>`;
};

private subscriberFooterRenderer = () => {
  return html`<span>102 subscribers</span>`;
};

private membershipHeaderRenderer = () => {
  return html`
    <vaadin-horizontal-layout style="align-items: center;">
      <span>Membership</span>
      <vaadin-icon
        icon="vaadin:info-circle"
        title="Membership levels determines which features a client has access to"
        style="height: var(--lumo-font-size-m); color: var(--lumo-contrast-70pct);"
      ></vaadin-icon>
    </vaadin-horizontal-layout>
  `;
};

private membershipFooterRenderer = () => {
  return html`<span>103 regular, 71 premium , 66 VIP</span>`;
};

Column Visibility

Columns and column groups can be hidden. You can provide the user with a menu for toggling column visibilities, for example using Menu Bar.

Allowing the user to hide columns is useful when only a subset of the columns are relevant to their task, and if there are a lot of columns.

Open in a
new tab
@state()
private items: Person[] = [];

@state()
private contextMenuItems: (ContextMenuItem & { key: string })[] = [
  { text: 'First name', checked: true, key: 'firstName' },
  { text: 'Last name', checked: true, key: 'lastName' },
  { text: 'Email', checked: true, key: 'email' },
  { text: 'Phone', checked: true, key: 'phone' },
  { text: 'Profession', checked: true, key: 'profession' },
];

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

render() {
  return html`
    <vaadin-horizontal-layout style="align-items: baseline">
      <strong style="flex: 1;">Employees</strong>
      <vaadin-context-menu
        open-on="click"
        .items="${this.contextMenuItems}"
        @item-selected="${(e: ContextMenuItemSelectedEvent) => {
          const value = e.detail.value as ContextMenuItem & { key: string };
          this.contextMenuItems = this.contextMenuItems.map((item) =>
            item.key === value.key ? { ...item, checked: !value.checked } : item
          );
        }}"
      >
        <vaadin-button theme="tertiary">Show/Hide Columns</vaadin-button>
      </vaadin-context-menu>
    </vaadin-horizontal-layout>

    <vaadin-grid .items="${this.items}">
      <vaadin-grid-column
        path="firstName"
        .hidden="${!this.contextMenuItems[0].checked}"
      ></vaadin-grid-column>
      <vaadin-grid-column
        path="lastName"
        .hidden="${!this.contextMenuItems[1].checked}"
      ></vaadin-grid-column>
      <vaadin-grid-column
        path="email"
        .hidden="${!this.contextMenuItems[2].checked}"
      ></vaadin-grid-column>
      <vaadin-grid-column
        path="address.phone"
        .hidden="${!this.contextMenuItems[3].checked}"
      ></vaadin-grid-column>
      <vaadin-grid-column
        path="profession"
        .hidden="${!this.contextMenuItems[4].checked}"
      ></vaadin-grid-column>
    </vaadin-grid>
  `;
}

Column Reordering & Resizing

Enabling the user to reorder columns is useful when they wish to compare data that is not adjacent by default. Grouped columns can only be reordered within their group.

Resizing is helpful when a column’s content does not fit and gets cut off or varies in length.

Open in a
new tab
@customElement('grid-column-reordering-resizing')
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[] = [];

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

  render() {
    return html`
      <vaadin-grid .items="${this.items}" column-reordering-allowed>
        <vaadin-grid-column-group header="Name">
          <vaadin-grid-column path="firstName" resizable></vaadin-grid-column>
          <vaadin-grid-column path="lastName" resizable></vaadin-grid-column>
        </vaadin-grid-column-group>
        <vaadin-grid-column-group header="Address">
          <vaadin-grid-column path="address.street" resizable></vaadin-grid-column>
          <vaadin-grid-column path="address.city" resizable></vaadin-grid-column>
          <vaadin-grid-column path="address.zip" resizable></vaadin-grid-column>
          <vaadin-grid-column path="address.state" resizable></vaadin-grid-column>
        </vaadin-grid-column-group>
      </vaadin-grid>
    `;
  }
}

Column Width

All columns are the same width by default. You can set a specific width for any column, or allow the Grid to automatically set the width based on the contents.

Column widths can be fixed or non-fixed (default). Fixed width columns do not grow or shrink as the available space changes, while non-fixed width columns do.

In the following example, the first and last columns have fixed widths. The second column’s width is set to be based on the content, while the third column takes up the remaining space.

Open in a
new tab
@customElement('grid-column-width')
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[] = [];

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

  render() {
    return html`
      <vaadin-split-layout>
        <vaadin-grid .items="${this.items}" style="width: 100%;">
          <vaadin-grid-selection-column></vaadin-grid-selection-column>
          <vaadin-grid-column path="firstName" width="7em" flex-grow="0"></vaadin-grid-column>
          <vaadin-grid-column path="profession" auto-width flex-grow="0"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
          <vaadin-grid-column
            width="6em"
            flex-grow="0"
            header="Has Sub"
            ${columnBodyRenderer(this.subscriptionRenderer, [])}
          ></vaadin-grid-column>
        </vaadin-grid>
        <div></div>
      </vaadin-split-layout>
    `;
  }

  private subscriptionRenderer: GridColumnBodyLitRenderer<Person> = (item) => {
    return html`${item.subscriber ? 'Yes' : 'No'}`;
  };
}

Sorting

Any column can be made sortable. Enable sorting to allow the user to sort items alphabetically, numerically, by date, etc.

Open in a
new tab
<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>

You can also sort columns that contain rich and/or custom content by defining which property to sort by. For example, you can have a column containing a person’s profile picture, name and email sorted by the person’s last name.

Open in a
new tab
@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"
        ${columnBodyRenderer(this.employeeRenderer, [])}
      ></vaadin-grid-sort-column>
      <vaadin-grid-column
        ${columnHeaderRenderer(this.birthdayHeaderRenderer, [])}
        ${columnBodyRenderer(this.birthdayRenderer, [])}
      ></vaadin-grid-column>
    </vaadin-grid>
  `;
}

private employeeRenderer: GridColumnBodyLitRenderer<Person> = (person) => {
  return 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>
  `;
};

private birthdayHeaderRenderer = () => {
  return html`<vaadin-grid-sorter path="birthday">Birthdate</vaadin-grid-sorter>`;
};

private birthdayRenderer: GridColumnBodyLitRenderer<Person> = (person) => {
  const birthday = parseISO(person.birthday);
  return 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>
  `;
};

Sorting helps users find and analyze the data, so it’s generally recommended to enable it for all applicable columns, except in cases where the order of items is an essential part of the data itself (such as prioritized lists).

Filtering

Filtering allows the user to quickly find a specific item or subset of items. You can add filters to Grid columns or use external filter fields.

Open in a
new tab
<vaadin-grid .items="${this.items}">
  <vaadin-grid-filter-column
    header="Name"
    path="displayName"
    flex-grow="0"
    width="230px"
    ${columnBodyRenderer(this.nameRenderer, [])}
  ></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>

Place filters outside the grid when:

The filter is based on multiple columns.
A bigger field or more complex filter UI is needed, which wouldn’t comfortably fit in a column.

Open in a
new tab
@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"
          flex-grow="0"
          width="230px"
          ${columnBodyRenderer(this.nameRenderer, [])}
        ></vaadin-grid-column>
        <vaadin-grid-column path="email"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>
    </vaadin-vertical-layout>
  `;
}

Item Details

Item details are expandable content areas that can be displayed below the regular content of a row, used to display more information about an item. By default, an item’s details are toggled by clicking on the item’s row.

Open in a
new tab
@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}"
        @active-item-changed="${(e: GridActiveItemChangedEvent<Person>) =>
          (this.detailsOpenedItem = [e.detail.value])}"
        .rowDetailsRenderer="${guard(
          [],
          () => (root: HTMLElement, _: Grid, 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>
    `;
  }
}

The default toggle behavior can be replaced by programmatically toggling the details visibility, for example, from a button click.

Open in a
new tab
@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}"
        ${gridRowDetailsRenderer<Person>(
          (person) => 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>
          `,
          []
        )}
      >
        <vaadin-grid-column path="displayName" header="Name"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
        <vaadin-grid-column
          ${columnBodyRenderer<Person>(
            (person) => 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>
            `,
            []
          )}
        ></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

You can use Context Menu to provide shortcuts to the user. It appears on right (default) or left click. In a mobile browser, a long press opens the menu.

Please note that using a context menu should not be the only way of accomplishing a task. The same functionality needs to be accessible elsewhere in the UI as well.

See Context Menu for more information.

Open in a
new tab
private renderMenu: ContextMenuLitRenderer = (context, menu) => {
  const { sourceEvent } = context.detail as { sourceEvent: Event };
  const grid = menu.firstElementChild as Grid<Person>;

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

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

  return 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>
  `;
};

render() {
  return html`
    <vaadin-context-menu ${contextMenuRenderer(this.renderMenu, [])}>
      <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 Grid).getEventContext(e).section !== 'body') {
    e.stopPropagation();
  }
}

Drag and Drop

Grid supports drag and drop, for example to reorder rows and to drag rows between grids.

Drop Mode

The drop mode of a grid determines where a drop can happen. Vaadin offers 4 different drop modes:

Drop Mode	Description
On Grid	Drops can occur on the grid as a whole, not on top of or between individual rows. Use this option when the order is unimportant.
Between	Drops can happen between rows. Use this mode when the order is important.
On Top	Drops can take place on top of rows. This is useful when creating relationships between items or moving an item into another item, for example placing a file inside a folder.
On Top or Between	Drops can occur on top of or between rows.

Drop Mode

Description

On Grid

Drops can occur on the grid as a whole, not on top of or between individual rows. Use this option when the order is unimportant.

Between

Drops can happen between rows. Use this mode when the order is important.

On Top

Drops can take place on top of rows. This is useful when creating relationships between items or moving an item into another item, for example placing a file inside a folder.

On Top or Between

Drops can occur on top of or between rows.

Row Reordering

You can use drag and drop to reorder rows.

Open in a
new tab
@customElement('grid-row-reordering')
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 draggedItem?: Person;

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

  render() {
    return html`
      <vaadin-grid
        .items="${this.items}"
        ?rows-draggable="${true}"
        drop-mode="between"
        @grid-dragstart="${(event: GridDragStartEvent<Person>) => {
          this.draggedItem = event.detail.draggedItems[0];
        }}"
        @grid-dragend="${() => {
          delete this.draggedItem;
        }}"
        @grid-drop="${(event: GridDropEvent<Person>) => {
          const { dropTargetItem, dropLocation } = event.detail;
          // only act when dropping on another item
          if (this.draggedItem && dropTargetItem !== this.draggedItem) {
            // remove the item from its previous position
            const draggedItemIndex = this.items.indexOf(this.draggedItem);
            this.items.splice(draggedItemIndex, 1);
            // re-insert the item at its new position
            const dropIndex =
              this.items.indexOf(dropTargetItem) + (dropLocation === 'below' ? 1 : 0);
            this.items.splice(dropIndex, 0, this.draggedItem);
            // re-assign the array to refresh the grid
            this.items = [...this.items];
          }
        }}"
      >
        <vaadin-grid-column
          header="Image"
          flex-grow="0"
          auto-width
          ${columnBodyRenderer(this.avatarRenderer, [])}
        ></vaadin-grid-column>
        <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>
    `;
  }

  private avatarRenderer: GridColumnBodyLitRenderer<Person> = (person) => html`
    <vaadin-avatar
      img="${person.pictureUrl}"
      name="${person.firstName} ${person.lastName}"
      alt="User avatar"
    ></vaadin-avatar>
  `;
}

Drag Rows Between Grids

Rows can be dragged from one grid to another, for example to move, copy or link items from different datasets.

Open in a
new tab
@state()
private draggedItem?: Person;

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

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

async firstUpdated() {
  const { people } = await getPeople({ count: 10 });
  this.grid1Items = people.slice(0, 5);
  this.grid2Items = people.slice(5);
}

private startDraggingItem = (event: GridDragStartEvent<Person>) => {
  this.draggedItem = event.detail.draggedItems[0];
};

private clearDraggedItem = () => {
  delete this.draggedItem;
};

render() {
  return html`
    <div class="grids-container">
      <vaadin-grid
        .items="${this.grid1Items}"
        ?rows-draggable="${true}"
        drop-mode="on-grid"
        @grid-dragstart="${this.startDraggingItem}"
        @grid-dragend="${this.clearDraggedItem}"
        @grid-drop="${() => {
          const draggedPerson = this.draggedItem as Person;
          const draggedItemIndex = this.grid2Items.indexOf(draggedPerson);
          if (draggedItemIndex >= 0) {
            // remove the item from its previous position
            this.grid2Items.splice(draggedItemIndex, 1);
            // re-assign the array to refresh the grid
            this.grid2Items = [...this.grid2Items];
            // re-assign the array to refresh the grid
            this.grid1Items = [...this.grid1Items, draggedPerson];
          }
        }}"
      >
        <vaadin-grid-column
          header="Full name"
          ${columnBodyRenderer(this.fullNameRenderer, [])}
        ></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>

      <vaadin-grid
        .items="${this.grid2Items}"
        ?rows-draggable="${true}"
        drop-mode="on-grid"
        @grid-dragstart="${this.startDraggingItem}"
        @grid-dragend="${this.clearDraggedItem}"
        @grid-drop="${() => {
          const draggedPerson = this.draggedItem as Person;
          const draggedItemIndex = this.grid1Items.indexOf(draggedPerson);
          if (draggedItemIndex >= 0) {
            // remove the item from its previous position
            this.grid1Items.splice(draggedItemIndex, 1);
            // re-assign the array to refresh the grid
            this.grid1Items = [...this.grid1Items];
            // re-assign the array to refresh the grid
            this.grid2Items = [...this.grid2Items, draggedPerson];
          }
        }}"
      >
        <vaadin-grid-column
          header="Full name"
          ${columnBodyRenderer(this.fullNameRenderer, [])}
        ></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>
    </div>
  `;
}

Drag and Drop Filters

Drag and drop filters determine which rows are draggable and which rows are valid drop targets, respectively. The filters function on a per row basis.

Open in a
new tab
@customElement('grid-drag-drop-filters')
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;
  }

  @query('vaadin-grid')
  private grid!: Grid;

  @state()
  private draggedItem?: Person;

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

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

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

  async firstUpdated() {
    const { people } = await getPeople();
    this.items = people;
    this.managers = this.items.filter((item) => item.manager);
    // avoid using this method
    this.grid.clearCache();
  }

  private dataProvider = async (
    params: GridDataProviderParams<Person>,
    callback: GridDataProviderCallback<Person>
  ) => {
    const { page, pageSize, parentItem } = params;
    const startIndex = page * pageSize;
    const endIndex = startIndex + pageSize;

    /*
    We cannot change the underlying data in this demo so this dataProvider uses
    a local field to fetch its values. This allows us to keep a reference to the
    modified list instead of loading a new list every time the dataProvider gets
    called. In a real application, you should always access your data source
    here and avoid using grid.clearCache() whenever possible.
    */
    const result = parentItem
      ? this.items.filter((item) => item.managerId === parentItem.id)
      : this.managers.slice(startIndex, endIndex);

    callback(result, result.length);
  };

  render() {
    return html`
      <vaadin-grid
        .dataProvider="${this.dataProvider}"
        .itemIdPath="${'id'}"
        .expandedItems="${this.expandedItems}"
        @expanded-items-changed="${(event: GridExpandedItemsChangedEvent<Person>) => {
          this.expandedItems = event.detail.value;
        }}"
        ?rows-draggable="${true}"
        drop-mode="on-top"
        @grid-dragstart="${(event: GridDragStartEvent<Person>) => {
          this.draggedItem = event.detail.draggedItems[0];
        }}"
        @grid-dragend="${() => {
          delete this.draggedItem;
        }}"
        @grid-drop="${(event: GridDropEvent<Person>) => {
          const manager = event.detail.dropTargetItem;
          if (this.draggedItem) {
            // in a real application, when using a data provider, you should
            // change the persisted data instead of updating a field
            this.draggedItem.managerId = manager.id;
            // avoid using this method
            this.grid.clearCache();
          }
        }}"
        .dragFilter="${(model: GridItemModel<Person>) => {
          const item = model.item;
          return !item.manager; // only drag non-managers
        }}"
        .dropFilter="${(model: GridItemModel<Person>) => {
          const item = model.item;
          return (
            item.manager && // can only drop on a supervisor
            item.id !== this.draggedItem?.managerId // disallow dropping on the same manager
          );
        }}"
      >
        <vaadin-grid-tree-column
          path="firstName"
          item-has-children-path="manager"
        ></vaadin-grid-tree-column>
        <vaadin-grid-column path="lastName"></vaadin-grid-column>
        <vaadin-grid-column path="email"></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

Inline Editing (Java Only)

Grid can be configured to allow inline editing. Editing can be either buffered and non-buffered. Buffered means changes must be explicitly committed, while non-buffered automatically commit changes on blur (when a field loses focus).

Buffered

Open in a
new tab
Grid<Person> grid = new Grid<>(Person.class, false);
Editor<Person> editor = grid.getEditor();

Grid.Column<Person> firstNameColumn = grid
        .addColumn(Person::getFirstName).setHeader("First name")
        .setWidth("120px").setFlexGrow(0);
Grid.Column<Person> lastNameColumn = grid.addColumn(Person::getLastName)
        .setHeader("Last name").setWidth("120px").setFlexGrow(0);
Grid.Column<Person> emailColumn = grid.addColumn(Person::getEmail)
        .setHeader("Email");
Grid.Column<Person> editColumn = grid.addComponentColumn(person -> {
    Button editButton = new Button("Edit");
    editButton.addClickListener(e -> {
        if (editor.isOpen())
            editor.cancel();
        grid.getEditor().editItem(person);
    });
    return editButton;
}).setWidth("150px").setFlexGrow(0);

Binder<Person> binder = new Binder<>(Person.class);
editor.setBinder(binder);
editor.setBuffered(true);

TextField firstNameField = new TextField();
firstNameField.setWidthFull();
binder.forField(firstNameField)
        .asRequired("First name must not be empty")
        .withStatusLabel(firstNameValidationMessage)
        .bind(Person::getFirstName, Person::setFirstName);
firstNameColumn.setEditorComponent(firstNameField);

TextField lastNameField = new TextField();
lastNameField.setWidthFull();
binder.forField(lastNameField).asRequired("Last name must not be empty")
        .withStatusLabel(lastNameValidationMessage)
        .bind(Person::getLastName, Person::setLastName);
lastNameColumn.setEditorComponent(lastNameField);

EmailField emailField = new EmailField();
emailField.setWidthFull();
binder.forField(emailField).asRequired("Email must not be empty")
        .withValidator(new EmailValidator(
                "Please enter a valid email address"))
        .withStatusLabel(emailValidationMessage)
        .bind(Person::getEmail, Person::setEmail);
emailColumn.setEditorComponent(emailField);

Button saveButton = new Button("Save", e -> editor.save());
Button cancelButton = new Button(VaadinIcon.CLOSE.create(),
        e -> editor.cancel());
cancelButton.addThemeVariants(ButtonVariant.LUMO_ICON,
        ButtonVariant.LUMO_ERROR);
HorizontalLayout actions = new HorizontalLayout(saveButton,
        cancelButton);
actions.setPadding(false);
editColumn.setEditorComponent(actions);

Non-Buffered

In the example below, double-click a row to start editing. Press Escape, or click on a different row to stop editing.

Open in a
new tab
Grid<Person> grid = new Grid<>(Person.class, false);
Grid.Column<Person> firstNameColumn = grid
        .addColumn(Person::getFirstName).setHeader("First name")
        .setWidth("120px").setFlexGrow(0);
Grid.Column<Person> lastNameColumn = grid.addColumn(Person::getLastName)
        .setHeader("Last name").setWidth("120px").setFlexGrow(0);
Grid.Column<Person> emailColumn = grid.addColumn(Person::getEmail)
        .setHeader("Email");

Binder<Person> binder = new Binder<>(Person.class);
Editor<Person> editor = grid.getEditor();
editor.setBinder(binder);

TextField firstNameField = new TextField();
firstNameField.setWidthFull();
addCloseHandler(firstNameField, editor);
binder.forField(firstNameField)
        .asRequired("First name must not be empty")
        .withStatusLabel(firstNameValidationMessage)
        .bind(Person::getFirstName, Person::setFirstName);
firstNameColumn.setEditorComponent(firstNameField);

TextField lastNameField = new TextField();
lastNameField.setWidthFull();
addCloseHandler(lastNameField, editor);
binder.forField(lastNameField).asRequired("Last name must not be empty")
        .withStatusLabel(lastNameValidationMessage)
        .bind(Person::getLastName, Person::setLastName);
lastNameColumn.setEditorComponent(lastNameField);

EmailField emailField = new EmailField();
emailField.setWidthFull();
addCloseHandler(emailField, editor);
binder.forField(emailField).asRequired("Email must not be empty")
        .withValidator(new EmailValidator(
                "Please enter a valid email address"))
        .withStatusLabel(emailValidationMessage)
        .bind(Person::getEmail, Person::setEmail);
emailColumn.setEditorComponent(emailField);

grid.addItemDoubleClickListener(e -> {
    editor.editItem(e.getItem());
    Component editorComponent = e.getColumn().getEditorComponent();
    if (editorComponent instanceof Focusable) {
        ((Focusable) editorComponent).focus();
    }
});

Alternatively, use Grid Pro for more streamlined inline-editing, or CRUD for editing in a separate side panel or dialog.

Styling Rows and Columns

You can style individual cells based on the data, for example, to highlight changes or important information.

Open in a
new tab
interface PersonWithRating extends Person {
  customerRating: number;
}

@customElement('grid-styling')
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: PersonWithRating[] = [];

  private ratingFormatter = new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  async firstUpdated() {
    const { people } = await getPeople();
    this.items = people.map((person) => ({ ...person, customerRating: Math.random() * 10 }));
  }

  render() {
    return html`
      <vaadin-grid .items="${this.items}" .cellClassNameGenerator="${this.cellClassNameGenerator}">
        <vaadin-grid-column path="firstName"></vaadin-grid-column>
        <vaadin-grid-column path="lastName"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
        <vaadin-grid-column
          header="Customer rating (0-10)"
          ${columnBodyRenderer(this.ratingRenderer, [])}
        ></vaadin-grid-column>
      </vaadin-grid>
    `;
  }

  private ratingRenderer: GridColumnBodyLitRenderer<PersonWithRating> = (person) => html`
    <span>${this.ratingFormatter.format(person.customerRating)}</span>
  `;

  private cellClassNameGenerator(column: GridColumn, model: GridItemModel<PersonWithRating>) {
    const item = model.item;
    let classes = '';
    // make the customer rating column bold
    if (column.header?.startsWith('Customer rating')) {
      classes += ' font-weight-bold';
    }
    // add high-rating class to customer ratings of 8 or higher
    if (item.customerRating >= 8.0) {
      classes += ' high-rating';
      // add low-rating class to customer ratings of 4 or lower
    } else if (item.customerRating <= 4.0) {
      classes += ' low-rating';
    }
    return classes;
  }
}

Theme Variants

Grid variants can reduce the white space inside the grid, adjust border and row highlight visibility, and control cell content overflow behavior.

Variants can be combined together freely.

Compact

The compact theme variant makes a grid more dense by reducing the header and row heights, as well as the spacing between columns.

It is useful for displaying more information on-screen without having to scroll. It can also help improve scannability and comparability between rows.

Open in a
new tab
<vaadin-grid .items="${this.items}" theme="compact">
  <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>

No Border

The no-border theme variant removes the outer border of the grid.

Open in a
new tab
<vaadin-grid .items="${this.items}" theme="no-border">
  <vaadin-grid-column
    header="Image"
    flex-grow="0"
    auto-width
    ${columnBodyRenderer(this.avatarRenderer, [])}
  ></vaadin-grid-column>
  <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>

No Row Border

This theme variant removes the horizontal row borders. It is best suited for small datasets. Parsing larger sets may be difficult unless paired with the row-stripes theme variant.

Open in a
new tab
<vaadin-grid .items="${this.items}" theme="no-row-borders">
  <vaadin-grid-column
    header="Image"
    flex-grow="0"
    auto-width
    ${columnBodyRenderer(this.avatarRenderer, [])}
  ></vaadin-grid-column>
  <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 Borders

You can add vertical borders between columns by using the column-borders theme variant. Data sets with a lot of columns packed tightly together, or where content gets truncated, can benefit from the additional separation that vertical borders bring.

Open in a
new tab
<vaadin-grid .items="${this.items}" theme="column-borders">
  <vaadin-grid-column
    header="Image"
    flex-grow="0"
    auto-width
    ${columnBodyRenderer(this.avatarRenderer, [])}
  ></vaadin-grid-column>
  <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>

Row Stripes

The row-stripes theme produces a background color for every other row. It can have a positive effect on scannability.

Open in a
new tab
<vaadin-grid .items="${this.items}" theme="row-stripes">
  <vaadin-grid-column
    header="Image"
    flex-grow="0"
    auto-width
    ${columnBodyRenderer(this.avatarRenderer, [])}
  ></vaadin-grid-column>
  <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>

Wrap Cell Content

Overflowing cell content is clipped or truncated by default. This variant makes the content wrap instead.

Open in a
new tab
@customElement('grid-wrap-cell-content')
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[] = [];

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

  render() {
    return html`
      <vaadin-grid .items="${this.items}" theme="wrap-cell-content">
        <vaadin-grid-column
          header="Image"
          flex-grow="0"
          auto-width
          ${columnBodyRenderer(this.avatarRenderer, [])}
        ></vaadin-grid-column>
        <vaadin-grid-column path="firstName"></vaadin-grid-column>
        <vaadin-grid-column path="lastName"></vaadin-grid-column>
        <vaadin-grid-column
          header="Address"
          ${columnBodyRenderer(this.addressRenderer, [])}
        ></vaadin-grid-column>
      </vaadin-grid>
    `;
  }

  private avatarRenderer: GridColumnBodyLitRenderer<Person> = (person) => html`
    <vaadin-avatar
      img="${person.pictureUrl}"
      name="${person.firstName} ${person.lastName}"
      alt="User avatar"
    ></vaadin-avatar>
  `;

  private addressRenderer: GridColumnBodyLitRenderer<Person> = ({ address }) => html`
    <span>${address.street} ${address.city} ${address.zip} ${address.state}</span>
  `;
}

Cell Focus

Cells can be focused by clicking on a cell or with the keyboard.

The following keyboard shortcuts are available:

Tab

Switches focus between sections of the grid (header, body, footer)

←, ↑, →, ↓

Moves focus between cells within a section of the grid

Page Up

Moves cell focus up by one page of visible rows

Page Down

Moves cell focus down by one page of visible rows

Home

Moves focus to the first cell in a row

End

Moves focus to the last cell in a row

The cell focus event can be used to get notified when the user changes focus between cells.

By default, the focus outline is only visible when using keyboard navigation. For demonstration purposes, the example below uses custom styles to also show the focus outline when clicking on cells.

Open in a
new tab
render() {
  return html`
    <vaadin-grid
      theme="force-focus-outline"
      .items="${this.items}"
      @cell-focus="${(e: GridCellFocusEvent<Person>) => {
        const eventContext = this.grid.getEventContext(e);
        const section = eventContext.section || 'Not available';
        const row = eventContext.index != undefined ? eventContext.index : 'Not available';
        const column = eventContext.column?.path || 'Not available';
        const person = eventContext.item;
        const fullName =
          person?.firstName && person?.lastName
            ? `${person.firstName} ${person.lastName}`
            : 'Not available';

        this.eventSummary = `Section: ${section}\nRow: ${row}\nColumn: ${column}\nPerson: 

Documentation

Documentation

Grid

Content

Component Renderer vs Lit Renderer (Flow Only)

Component Renderer

Lit Renderer

Dynamic Height

Selection

Single Selection Mode

Multi-Select Mode

Columns

Column Alignment

Column Freezing

Column Grouping

Column Headers & Footers

Column Visibility

Column Reordering & Resizing

Column Width

Sorting

Filtering

Item Details

Context Menu

Drag and Drop

Drop Mode

Row Reordering

Drag Rows Between Grids

Drag and Drop Filters

Inline Editing (Java Only)

Buffered

Non-Buffered

Styling Rows and Columns

Theme Variants

Compact

No Border

No Row Border

Column Borders

Row Stripes

Wrap Cell Content

Cell Focus