Filtering nested json data in table

UI Components for Angular
Post Reply
smayer
Posts: 5
Joined: 26 Mar 2020, 17:26

26 Mar 2020, 17:37

I have a table displaying nested json data. Every solution I've found to implement filtering for this type of dataset seems to use p-columns but I can't find any documentation on it and I need multiple rows per data item.

<p-table #dt [value]="datas | groupBy: 'name' | pairs" [columns]="cols" [resizableColumns]="true" [autoLayout]="true" (sortFunction)="customSort($event)" [customSort]="true">
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="pi pi-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field" >
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<p-multiSelect *ngSwitchCase="'name'" [options]="products" defaultLabel="All Products" (onChange)="dt.filter($event.itemValue, 'data[1][0].name', 'in')" appendTo="body"></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data let-columns="columns">
<tr [pSelectableRow]="data">
<td colspan="7">
{{data[1][0].name}}
</td>
</tr>
<tr [pSelectableRow]="data">
<td></td>
<td>{{data[1][0].description}}</td>
<td>{{data[1][0].sold}}</td>
...
</tr>
<tr [pSelectableRow]="data">
<td></td>
<td>{{data[1][1].description}}</td>
<td>{{data[1][1].sold}}</td>
...
</tr>
<tr [pSelectableRow]="data">
...
</tr>
</ng-template>
</p-table>

I'd like to avoid flattening the data if possible. Is there any way to get filtering working for this?

Alternatively, if I do flatten the data is there any way to maintain the 3 row "grouping" of my data?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests