Version:

Install ​

npm i @vaadin-component-factory/vcf-lookup-field

Import ​

javascript
import '@vaadin-component-factory/vcf-lookup-field/src/vcf-lookup-field';

Variants ​

Single select ​

html
<vcf-lookup-field header="Benutzer auswählen">
  <vaadin-grid slot="grid" theme="column-borders">
    <vaadin-grid-sort-column path="username" header="Benutzername" resizable></vaadin-grid-sort-column>
    <vaadin-grid-sort-column path="familyName" header="Nachname" resizable></vaadin-grid-sort-column>
    <vaadin-grid-sort-column path="prename" header="Vorname" resizable></vaadin-grid-sort-column>
    <vaadin-grid-sort-column path="birthdate" header="Geburtsdatum"></vaadin-grid-sort-column>
  </vaadin-grid>
  <vaadin-combo-box slot="field" theme="lookup-dialog" clear-button-visible item-value-path="username" item-label-path="username" label="Benutzer" allow-custom-value></vaadin-combo-box>
</vcf-lookup-field>
javascript
document.querySelector('vcf-lookup-field > vaadin-grid').items = items;
document.querySelector('vcf-lookup-field > vaadin-combo-box').items = items;