Code: Select all
<p-table
#dt
[columns]="selectedColumns"
[value]="logs"
sortMode="single"
sortField="timeStamp"
sortOrder="-1"
[paginator]="true"
[rows]="10"
[resizableColumns]="true"
[reorderableColumns]="true"
[responsive]="true">
<ng-template pTemplate="caption">
<div class="row container-fluid" >
<div class="col-md-2">
<p-multiSelect
[options]="cols"
[(ngModel)]="selectedColumns"
optionLabel="header"
selectedItemsLabel="{0} columns selected"
[style]="{width: '100%'}"
defaultLabel="Choose Columns">
</p-multiSelect>
</div>
<div class="col-md-3">
<input type="text" pInputText size="50" placeholder="Search" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn pReorderableColumn>
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-log let-columns="columns">
<tr>
<td *ngFor="let col of columns" [ngSwitch]="col.field" class="ui-resizable-column">
<pre lang="xml" *ngIf="col.field == 'properties'; else normal">
{{log[col.field]}}
</pre>
<ng-template #normal>
{{log[col.field]}}
</ng-template>
</td>
</tr>
</ng-template>
</p-table>