title: Why are table headers not displayed in responsive primeng table?
body: <p>I have a primeng datatable, it is properly rendered in normal mode. But, when I view in the mobile view, the table headers are not displayed. I have the responsive property of the table set to true. Please see the screenshot.</p>
  
  <p>I have the headers properly displayed for the datatable in mobile view in another screen. I have compared the code, they're similar except this table has a global filter.</p>
  
  <p>My components html code:</p>
  
  <pre><code>&lt;p-table
    #dt
    [columns]="cols"
    [value]="deals"
    [autoLayout]="true"
    [responsive]="true"
  &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="30"
          placeholder="Search"
          (input)="dt.filterGlobal($event.target.value, 'contains')"
        /&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" [pSortableColumn]="col.field"&gt;
          {{ col.header }}
          &lt;p-sortIcon [field]="col.field"&gt;&lt;/p-sortIcon&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
        &lt;td *ngFor="let col of columns"&gt;
          &lt;span *ngIf="col.header === 'Opportunity Id'"
            &gt;&lt;a routerLink="/proposal"&gt;{{ rowData[col.field] }}&lt;/a&gt;&lt;/span
          &gt;
          &lt;span *ngIf="col.header !== 'Opportunity Id'"&gt;{{
            rowData[col.field]
          }}&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  
  <p>My Components ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Deal } from '@app-interfaces/models/deal';
  
  @Component({
    selector: 'app-pending',
    templateUrl: './pending.component.html',
    styleUrls: ['./pending.component.scss']
  })
  export class PendingComponent implements OnInit {
    deals: Deal[];
    cols: any;
  
    constructor() { }
  
    ngOnInit() {
      this.cols = [
        { field: 'sfdcOpportunityId', header: 'Opportunity Id' },
        { field: 'proposalId', header: 'Proposal Id' },
        { field: 'salesPersonName', header: 'Sales Person Name' },
        { field: 'status', header: 'Status' },
        { field: 'customerName', header: 'Customer Name' },
        { field: 'revenue', header: 'Revenue' },
        { field: 'leaseType', header: 'Type' },
        { field: 'signedDate', header: 'Date' },
        { field: 'dcn', header: 'DCN' }
      ];
  
  
      this.deals = [
        {
          "sfdcOpportunityId": "0060z00001tsdfsdNmVtAAK",
          "proposalId": "32435565",
          "salesPersonName": "Kevin Reynolds",
          "status": "Pending",
          "customerName": "Commerce, Inc.",
          "revenue": "$1,360.00",
          "leaseType": "FSL",
          "signedDate": "2017-09-12",
          "dcn": "247279",
          "salesPersonFirstName": null,
          "salesPersonLastName": null,
          "proposalDate": null,
          "customerId": "0",
          "userType": "User"
        }
  
      ]
  
    }
  
  }
  </code></pre>
  
  <p>Any idea how to resolve this?</p>
  
  <p>Cheers,
  Nitin
  <a href="https://i.stack.imgur.com/8LpeG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LpeG.jpg" alt="Prime table in responsive mode"></a></p>