Primeng header misalign from body table

Question

Having a scrollable table with a scrollHeight set and after that changing the scrollHeight, the scrollbar should be aligned with the table header automatically. The table data is not changed. (I have a scrollable table with header in a resizable dialog, and when dialog resizes, the scrollHeight of the table changes accordingly, but the scrollbar of the table is not aligned to the new scrollHeight)

updating primeng to 7.1.4 version.

<p-table [columns]="cols" [value]="cars" scrollable="true" [scrollHeight]="scrollHeight">
    <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>

Correct display of the scrollbar on a scrollable table when changing the scrollHeight dynamically without chaning the data.

score 0 · Answer 1 · answered Jul 28 '20 at 15:44

It seems to be an ongoing problem, there is a workaround here: https://github.com/primefaces/primeng/issues/5354. But still seems unsolved. The workaround is to add these styles:

.ui-table-scrollable-header-box {
  margin-right: 17px !important;
}

.ui-table-scrollable-body {
  margin-right: 17px !important;
}

score 0 · Answer 2 · answered May 20 '21 at 19:14

0

My workaround :

p-table { cdk-virtual-scroll-viewport { overflow-y: scroll !important; } }

answered May 20 '21 at 19:14

danbord

3,605
3
33
49

score 0 · Answer 3 · answered Oct 12 '21 at 08:54

0

Best solution which worked like charm for me:

.ui-table .ui-table-scrollable-body-table {
   min-height: 1px !important;
}

answered Oct 12 '21 at 08:54

sid7747

690
7
15

score 0 · Answer 4 · answered Dec 16 '21 at 17:40

In my case, if we add a width in header column than must add same width for body on that column

<p-table scrollHeight="calc(100vh - 280px)" [scrollable]="true" [paginator]="true" [rows]="100" [responsive]="true">
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 50px;"> Header One </th>
            <th> Header Two </th>
            <th> Header Three </th>
            <th style="width: 150px;"> Header Four </th>
            <th> Header Five </th>
        </tr>
    </ng-template>
        <ng-template pTemplate="body">
        <tr>
            <td style="width: 50px;"> Body One </td>
            <td> Body Two </td>
            <td> Body Three </td>
            <td style="width: 150px;"> Body Four </td>
            <td> Body Five </td>
        </tr>
    </ng-template>
</p-table>

Ali Khangholi · Answer 5 · 2022-07-25T06:34:08.273

I've managed to solve this issue by doing the following: 1- add display: grid !important; to .p-datatable css class 2- add display: block; to .p-datatable>.p-datatable-thead>tr>th and .p-datatable>.p-datatable-tbody>tr>th

at the end you will have some structure like this:

.p-datatable {
.p-datatable-thead{
    >tr{
        >th{
            display: block;
        }
    }
}
.p-datatable-tbody{
    >tr{
        >th{
            display: block;
        }
    }       
}}

Primeng header misalign from body table

5 Answers5