PrimeNG TurboTable with custom width does not work properly

Question

I am trying to use a PrimeNG turbotable with custom size (500px) and I expected the columns width to be set automatically however it does not work. I get a horizontal scrollbar and the total width seems to be fixed at 767 pixels. If I try to set the column width manually it gets ignored. If i don't set the table width and I try to put it inside a DIV that is 500px wide I still get the same result (horizontal scrollbar).

Below is the (very simple) code:

        <p-table #dt [value]="statusChangesData" [paginator]="true" [alwaysShowPaginator]="false" [rows]="2" [style]="{'width':'500px'}">
            <ng-template pTemplate="caption" >
                <div class="tableCaption">
                    <span translate>Status changes</span>
                </div>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr>
                    <td [attr.colspan]="3">
                        <span translate>There are no data into the table</span>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th style="width:200px" [pSortableColumn]="'date'"><span translate>Date</span><p-sortIcon [field]="'date'"></p-sortIcon></th>
                    <th style="width:200px" [pSortableColumn]="'status'"><span translate>Status</span><p-sortIcon [field]="'status'"></p-sortIcon></th>
                    <th style="width:100px" [pSortableColumn]="'userId'"><span translate>User ID</span><p-sortIcon [field]="'userId'"></p-sortIcon></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-col>
                <tr>
                    <td>{{col.date}}</td>
                    <td>{{col.status}}</td>
                    <td>{{col.userId}}</td>
                </tr>
            </ng-template>
        </p-table>

and this is what it looks like:

Turbo Table

As you can see both the header and the paginator respect the width I set (500px) but the body of the table does not.

I have tried every suggestion I can find in stack overflow including setting the style like this: [style]="{'width':'200px'} or using [autoLayout]="true" but nothing seems to work. I am using primeNG 7.0.0.

PS. I don't really care to set each column width manually. I just don't want the horizontal scrollbar.

Answer 1

I copied your code from above and pasted it in a new Stackblitz project to test it. I even specified the 7.0.0 version of PrimeNG specifically, to make sure there are not any issues with different versions. (I have found that to be the case when I have used PrimeNG.) I also made up some data to show.

I am not seeing the issues you are talking about. Here is what my resulting grid looks like (ignore the fact that Stackblitz is not finding the primeicons.)

It is staying perfectly 500px wide and all columns are obeying the fixed widths you specified in the header row (<th> tags.) When I removed the fixed widths you provided in your <th> tags, all of the columns are auto-adjusting and fitting within the 500px table.

I have this table in its own component and it is not wrapped in a <div> or any other tags. You can check it out on the Stackblitz link I provided above.

I wonder if there is something about the rest of the page this is contained in that is causing the problem?