Master Page

HTML

<vaadin-vertical-layout theme="padding spacing" style="align-items: stretch;">
  <mate-filter-panel id="filterPanel">
    <vaadin-text-field label="Username" id="usernameFilter"></vaadin-text-field>
    <vaadin-text-field label="Vorname" id="prenameFilter"></vaadin-text-field>
    <vaadin-text-field label="Nachname" id="familyNameFilter"></vaadin-text-field>
  </mate-filter-panel>
  <hr/>
  <mate-toolbar title-text="Users" for-grid="grid">
    <vaadin-button id="deleteButton">Löschen</vaadin-button>
  </mate-toolbar>
  <vaadin-grid id="grid" theme="column-borders" style="flex-grow: 1;">
    <mate-grid-addon id="gridAddon"></mate-grid-addon>
    <vaadin-grid-selection-column></vaadin-grid-selection-column>
    <vaadin-grid-sort-column id="username" header="Username" path="username" resizable>
      <mate-grid-details-column-addon></mate-grid-details-column-addon>
    </vaadin-grid-sort-column>
    <vaadin-grid-sort-column id="birthdate" header="Geburtstag" resizable>
    </vaadin-grid-sort-column>
    <vaadin-grid-sort-column id="gender" header="Geschlecht" resizable>
    </vaadin-grid-sort-column>
    <vaadin-grid-sort-column header="Vorname" path="prename" resizable></vaadin-grid-sort-column>
    <vaadin-grid-sort-column header="Nachname" path="familyName"></vaadin-grid-sort-column>
  </vaadin-grid>
</vaadin-vertical-layout>

Javascript

Assuming allItems array is loaded from the backend without lazy loading:

const grid = document.getElementById('grid');
grid.items = allItems;

grid.rowDetailsRenderer = (root, grid, model) => root.innerHTML = `<div><h6>More Information for ID ${model.item.id}</h6></div>`;
document.querySelector('#birthdate').renderer = (root, column, model) => root.textContent = model.item.birthdate.toLocaleString('de-DE', {year: 'numeric', month: '2-digit', day: '2-digit'});
document.querySelector('#gender').renderer = (root, column, model) => root.textContent = model.item.gender == DummyGender.Female ? 'Weiblich' : model.item.gender == DummyGender.Male ? 'Männlich' : 'Divers';

const gridAddon = document.getElementById('gridAddon');
gridAddon.rowProvider = item => {
  if (!item) return {};
  return { disabled: item.username.startsWith('s'), hasDetails: item.gender === DummyGender.Female };
};

gridAddon.primaryActionColumnProvider = item => {
  if (!item) return {};
  return { tooltipText: `Aktionen für ${item.username}`, children: [ { text: 'Bearbeiten' }, { text: 'Löschen', disabled: true, tooltipText: 'Du kannst dieses Element nicht löschen' }, { text: 'Children', children: [ { text: 'Test', tooltipText: 'My tooltip' }, { text: 'Male', hidden: item.gender != DummyGender.Male } ] } ] };
};

const filterPanel = document.getElementById('filterPanel');
const arrayFilter = (selector, itemProperty) => {
  const filterInputValue = document.getElementById(selector).value;
  return item => {
    if (!filterInputValue || filterInputValue.length < 1) {
      return true;
    }
    const itemValue = item[itemProperty];
    if (!itemValue || itemValue.length < 1) {
      return false;
    }
    return itemValue.toLowerCase().includes(filterInputValue.toLowerCase());
  };
};
filterPanel.addEventListener('search-click', e => {
  grid.items = allItems.filter(arrayFilter('usernameFilter', 'username')).filter(arrayFilter('prenameFilter', 'prename')).filter(arrayFilter('familyNameFilter', 'familyName'));
  grid.clearCache();
});
filterPanel.addEventListener('reset-click', e => {
  document.getElementById('usernameFilter').value = '';
  document.getElementById('prenameFilter').value = '';
  document.getElementById('familyNameFilter').value = '';
  grid.items = allItems;
  grid.clearCache();
});

const deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('click', e => {
  if (grid.selectedItems) {
    grid.selectedItems.forEach(item => allItems.splice(allItems.indexOf(item), 1));
    grid.clearCache();
  }
});

For lazy loading examples see Grid component examples.