title: Unable to filter the nested object in Angular 7 using Primeng Turbo Table
body: <p>I was trying to display nested objects returned from web api in json format into the turbo table i.e p-table, a Primeng component. After successful displayed all the data, I tried with column filter, in which I managed to filter out the parent object but now struggling to filter the child or nested objects in the array. </p>
  
  <p>Below is that I've done so far. </p>
  
  <p><strong>SubscriptionlistComponent.ts</strong></p>
  
  <pre><code>loadAllSubscriptions(): any {
  this.spinner.show();
  
  this.subscriptionService.getAllSubscriptions().subscribe(data =&gt; {
    //subscription.lstSubscription = data;
    this.subscriptionLst = data;
    //console.log(this.subscriptionLst);
    //this.lstsubscriptions = this.filter.valueChanges.pipe(
    //  startWith(''),
    //  map(text =&gt; this.search(text, this.pipe, this.datepipe))
    //);
  
    this.totalSubscriptions = data.length;
    this.spinner.hide();
  });
  
  FilterUtils['custom'] = (value, filter): boolean =&gt; {
    if (filter === undefined || filter === null || filter.trim() === '') {
      return true;
    }
  
    if (value === undefined || value === null) {
      return false;
    }
  
    return parseInt(filter) &gt; value;
  }
  
  this.cols = [
    { field: 'DateTime', header: 'Date' },
    { field: 'Driver', subfield: 'FirstName', header: 'Driver' },
    { field: 'paymentMode', subfield : 'Title', header: 'Mode' },
    { field: 'startDate', header: 'Start Date' },
    { field: 'endDate', header: 'End Date' },
    { field: 'Amount', header: 'Amount' }
  ];
  }
  </code></pre>
  
  <p><strong>And this is my component.html code</strong></p>
  
  <pre><code>&lt;div class="content-section implementation ui-fluid"&gt;
    &lt;p-table #dt [columns]="cols" [value]="subscriptionLst" 
    [paginator]="true" [rows]="10"&gt;
      &lt;ng-template pTemplate="caption"&gt;
       &lt;div style="text-align: right"&gt;
       &lt;i class="fa fa-search" style="margin:4px 4px 0 0"&gt;&lt;/i&gt;
      &lt;input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  &lt;ng-template pTemplate="header" let-columns&gt;
    &lt;tr&gt;
      &lt;th *ngFor="let col of columns"&gt;
        {{col.header}}
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th *ngFor="let col of columns" [ngSwitch]="col.field"&gt;
        &lt;input *ngSwitchCase="'DateTime'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')"&gt;
        &lt;div *ngSwitchCase="'Driver'" [ngSwitch]="col.subfield"&gt;
          &lt;input *ngSwitchCase="'FirstName'" pInputText type="text" (input)="dt.filter($event.target.value, col.subfield, 'contains')"&gt;
        &lt;/div&gt;
        &lt;div *ngSwitchCase="'paymentMode'" [ngSwitch]="col.subfield"&gt;
          &lt;input *ngSwitchCase="'Title'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')"&gt;
        &lt;/div&gt;
        &lt;input *ngSwitchCase="'startDate'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')"&gt;
        &lt;input *ngSwitchCase="'endDate'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')"&gt;
        &lt;input *ngSwitchCase="'Amount'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')"&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/ng-template&gt;
  &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
    &lt;tr [pSelectableRow]="rowData"&gt;
      &lt;td *ngFor="let col of columns"&gt;
        &lt;div *ngIf="col.subfield;then nested_object_content else normal_content"&gt;&lt;/div&gt;
          &lt;ng-template #nested_object_content&gt;
            {{rowData[col.field][col.subfield]}}
          &lt;/ng-template&gt;
          &lt;ng-template #normal_content&gt;
            {{rowData[col.field]}}
          &lt;/ng-template&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/ng-template&gt;
   &lt;/p-table&gt;
  &lt;/div&gt;
  </code></pre>