Primeng: [TurboTable] / p-table: Misaligned header on a scrollable table with column widths set

[jw61]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
See my Plunk: http://plnkr.co/edit/e9vRWsaCLRgLIrOvboCF?p=preview

Current behavior
If you set the width of the th elements on a table without a scroll bar, it sets the width of the columns on the whole table. But if you do this for a scrollable table, then it only sets with widths of the header row and not the columns beneath.

And it doesn't work if you try setting the width of the td elements to the same as the th elements, because if there are two few elements for the scroll bar to appear, the header and the body columns are still not lined up, especially to the right of the table.

Expected behavior
Setting just the width of the th elements should be enough to correctly line up the header and body columns where scrolling is disabled, where scrolling is enabled and where scrolling is enabled but too few elements are present to make the scroll bar visible.

Minimal reproduction of the problem with instructions
See my Plunk: http://plnkr.co/edit/e9vRWsaCLRgLIrOvboCF?p=preview

• Create a scrollable table with four columns
• Set the width of the first th element to 10% and the remaining th elements to 30%
• The column headers do not line up with the body columns

What is the motivation / use case for changing the behavior?
Making the table look nice!

Please tell us about your environment:
Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.1

• Angular version: 5.2.1

• PrimeNG version: 5.2.0-rc.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome: 63

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript 2.4.2

• Node (for AoT issues): node --version =
  Node: 8.9.4

[cagataycivici]

You need to use colgroup;

<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" [style.width]="col.width">
        </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>

[ClaireStream]

Adding the colgroup did not fix the issue for me.

Any other tips or workaround ?

[jw61]

@ClaireStream Adding the colgroup did work for me (Thanks, cagataycivici).
But where I went wrong initially was I missed out the colgroup tag. I had <ng-template pTemplate="colgroup"... and I had <col *ngFor..., but I missed out the actual <colgroup> tags.

[ClaireStream]

I checked and I do have the <ng-template pTemplate="colgroup" let-columns>, then the <colgroup>... and then the <col>.... My colgroup template is identical to yours, the only difference I see is in the header template, I have [pSortableColumn] in the th tag, and a p-sortIcon after the column name.

Maybe it's another table parameter causing the issue (the multi sort ?). I did see an improvement when I set the width of my columns manually, but there still is a space/gap, smaller but it's there. But thanks for your response !

[eliadeini]

Hi @cagataycivici ,
I have the same problem and the colgroup solution didn't help:
I used [scrollable] and the headers are misaligned in a very ugly way.
Anyway, I found out that if I resize the columns manually, one by one by the order from left to right, it aligns the columns and header correctly.
It looks like the columns in the table's body should be initialize correctly.

Is it possible to have a fix for that?
Maybe, as a workaround, there is a way to resize the columns from the code after the table's creation?

[m-git-hub]

Hi @cagataycivici,
I had the same problem before using ,
Now this is working fine for me. Still in one case there is problem, as soon as table has scroll bar. If table don't have scroll bar, column width is working fine.

[m-git-hub]

Hi,
Now I found one quick solution for this problem,
you can add below css into your main css file. Then you will not have this problem.

.ui-table-scrollable-header {
overflow-y: scroll;
}

Hope it could solve your problem.

[amir-mehrizi]

hi everyone. i had the same problem and i studied the all issues carefully and finally i fix the problem. you can use the CSS class and you can see that the problem is perfectly done.
something that is really important and crucial is, you must write all codes in CSS style together.

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

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

///// this code below is for width of the scroll bar
::-webkit-scrollbar {
width: 10px;
}
.ui-table-scrollable-header {
overflow-y: scroll;
}

i think that this helps you.

[niran-manandhar]

.ui-table-scrollable-header-table {
width: calc(100% + 10px);
/match the added scrollbar/
}

[souravs-2pirad]

I faced the same problem.
Instead of removing the padding: 17px from the header,
I added 17px to the body always using "overflow-y: scroll" on the body.

Here is my solution code :

// Fix for header misalignment when number of rows is less
:host ::ng-deep .p-datatable-scrollable-body {
    overflow-y: scroll;
}