[FIXED] Why are table headers not displayed in responsive primeng table?

Issue

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.

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.

My components html code:

<p-table
  #dt
  [columns]="cols"
  [value]="deals"
  [autoLayout]="true"
  [responsive]="true"
>
  <ng-template pTemplate="caption">
    <div style="text-align: right">
      <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
      <input
        type="text"
        pInputText
        size="30"
        placeholder="Search"
        (input)="dt.filterGlobal($event.target.value, 'contains')"
      />
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{ col.header }}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr>
      <td *ngFor="let col of columns">
        <span *ngIf="col.header === 'Opportunity Id'"
          ><a routerLink="/proposal">{{ rowData[col.field] }}</a></span
        >
        <span *ngIf="col.header !== 'Opportunity Id'">{{
          rowData[col.field]
        }}</span>
      </td>
    </tr>
  </ng-template>
</p-table>

My Components ts file:

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"
      }

    ]

  }

}

Any idea how to resolve this?

Cheers,
Nitin
Prime table in responsive mode

Solution

I have found the answer. You need to add the header once again for it to be displayed in the mobile view. I was under the wrong impression that the headers from the header template would be used to display them as headers even in the mobile view.

So I have modified the code to:

<td *ngFor="let col of columns">
     <span class="ui-column-title">{{ col.header }}</span> 
     <span *ngIf="col.header === 'Opportunity Id'"
      ><a routerLink="/proposal">{{ rowData[col.field] }}</a></span
    >
    <span *ngIf="col.header !== 'Opportunity Id'">{{
      rowData[col.field]
    }}</span>
  </td>

Answered By – Nitin Avula

Answer Checked By – Mary Flores (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published