Primeng expandable column headers don't show

Question

I have an expandable row in Angular2 using Primeng2 but the column headers for the expandable columns aren't showing.

This is my table with the expandable rows:

   <p-dataTable [value]="activetrucks" expandableRows="true" [(selection)]="selectedtruck">
  <p-header>
    List of Active trucks

  </p-header>
  <p-column expander="true"></p-column>
  <p-column field="owner_id" header="Transporter"></p-column>
  <p-column field="reg_no" header="Truck number"></p-column>
  <p-column field="truck_category" header="Truck type" ></p-column>

  <template let-user pTemplate="rowexpansion">  //headers dont show
    <div class="ui-grid ui-grid-responsive ui-fluid"> 
      <p-dataTable [value]="stages" [paginator]="true" [pageLinks]="3">
        <p-header>
          The different stages
        </p-header>
        <p-column field="status" header="Status"></p-column>  
        <p-column field="created_at" header="Done by"></p-column>
        <p-column field="created_by" header="Date"></p-column>

        <p-column styleClass="col-button">
          <template let-truck="rowData" pTemplate="body">
            <button type="button" pButton (click)="onremoveTruck(truck)" icon="fa-remove"></button>
          </template>
        </p-column>

      </p-dataTable>
    </div>
  </template>

</p-dataTable>

In the expand row the headers dont show as shown in picture below.

What could be wrong?

Answer 1

Create or edit a css file with this content:

th .ui-column-title {
    display: inline !important;
}

And edit your component file:

import {ViewEncapsulation} from '@angular/core';

@Component({
  ...
  styleUrls: ['file.css'],
  encapsulation: ViewEncapsulation.None
})

Answer 2

I faced a similar issue and was able to resolve it by removing the [responsive] property from the table definition.

I have posted an answer here

Answer 3

Solving the problem in 2022

"@angular/core": "~13.2.0",
"primeng": "^13.1.0",

Just add to your p-table prop responsiveLayout="scroll":

<p-table responsiveLayout="scroll">

As I understand it, this is to override the default responsive behavior and the table will be normal.