CODEWITHSUNDEEP
angularprimengprimeng-datatable
Nitin Avula
Nitin Avula

Reputation: 349

Why are table headers not displayed in responsive primeng table?

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

Upvotes: 4

Views: 8770

Answers (5)

rmuetzner
rmuetzner

Reputation: 39

For PrimeNG 12, just add responsiveLayout="scroll" in your as following to show the table header:

<p-table #table
         responsiveLayout="scroll"
         ...

Upvotes: 2

SecurityObscurity
SecurityObscurity

Reputation: 439

Keep in mind that

<span class="ui-column-title">Title</span>

has been changed to

<span class="p-column-title">Title</span>

Upvotes: 2

Phil Huhn
Phil Huhn

Reputation: 4101

I am using PrimeNG 10 library. When the p-table is responsive it only displays the body. This appears to be by Primefaces design per the following table.css file:

@media screen and (max-width: 40em) {
  .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th,
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
    display: none !important;
  }
  ...

The why is most likely that the ui-column-title/p-column-title span tag is replacing the header value.

Upvotes: 3

Gerson Huarcaya
Gerson Huarcaya

Reputation: 569

just add ui-column-title in the td of your table:

<td><span class="ui-column-title">Names</span>{{ person.names }}</td>

Upvotes: 6

Nitin Avula
Nitin Avula

Reputation: 349

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>

Upvotes: 3

Related Questions