I am trying to have the suggestions from the PrimeNG autocomplete field display in a table with a header.
The biggest things are only displaying the table header for the first row and possibly eliminating the padding between the tables. I am also hoping for a more optimal way to handle this because right now each suggestion is contained in its own table and I can see that being costly with a lot of suggestions being displayed in the drop down.
<p-autoComplete [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
[(ngModel)]="customer" [suggestions]="customerResults"
(completeMethod)="searchCustomers($event)" field="name">
<ng-template let-value let-i="index" pTemplate="item">
<p-dataTable [value]="customerResults.slice(i, i+1)">
<p-headerColumnGroup *ngIf="i === 0">
<p-row>
<p-column header="Id"></p-column>
<p-column header="Name"></p-column>
</p-row>
</p-headerColumnGroup>
<p-column field="id"></p-column>
<p-column field="name"></p-column>
</p-dataTable>
</ng-template>
</p-autoComplete>
