Primeng 9 Table, horizontal scroll issue

Question

I am trying to implement full page scroll in primeng table similar to one given at https://www.primefaces.org/primeng/v9-lts/#/table/scroll. But I am not getting the horizontal scroll bar. Even the headers and columns are misaligned as shown below :

Please advise. My code given below :-

<p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="{width:'300px'}">

  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" style="width:150px">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

The prime ng related packages that are included in my project:

"primeflex": "1.1.0",
"primeicons": "^2.0.0",
"primeng": "^9.1.3",

score 1 · Answer 1 · answered Jan 05 '21 at 23:58

1

The reason was because "node_modules/primeng/resources/primeng.css" entry was missing in angular.json/styles section.

answered Jan 05 '21 at 23:58

Hassan Arafat

61
5

score 0 · Answer 2 · answered Aug 18 '22 at 21:13

Hello I was having the same trouble this is from the official doc

link: http://primefaces.org/primeng/table/scroll

<div class="card">
    <h5>Vertical</h5>
    <p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
        <ng-template pTemplate="header">
            <tr>
                <th style="min-width:200px">Name</th>
                <th style="min-width:200px">Country</th>
                <th style="min-width:200px">Company</th>
                <th style="min-width:200px">Representative</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-customer>
            <tr>
                <td style="min-width:200px">{{customer.name}}</td>
                <td style="min-width:200px">{{customer.country.name}}</td>
                <td style="min-width:200px">{{customer.company}}</td>
                <td style="min-width:200px">{{customer.representative.name}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>

Primeng 9 Table, horizontal scroll issue

2 Answers2