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.

Did you try to put all the table inside a div with `position : relative; width : 50%;` and then set the width of the table to 100%. — Σωτήρης Ραφαήλ, Mar 13 '19 at 12:02

score 3 · Answer 1 · answered Mar 14 '19 at 09:34

3

In case someone has a similar problem try setting the min-width of the table to 0:

::ng-deep .ui-table .ui-table-wrapper table {
    min-width: 0px;
}

answered Mar 14 '19 at 09:34

Haritos30

200
2
9

1

Also if someone wants to appear a horizontal scrollbar automated under a specific width is setting the min-width to specific value of px – Sfalagkiaris Mar 14 '19 at 09:36

score 1 · Accepted Answer · answered Mar 14 '19 at 03:04

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?

You are right, the problem wasn't the primeNG table, someone had defined a min-width for the `.ui-table` in one of the parent css files. Thank you for helping me understand the root cause of the problem. — Haritos30, Mar 14 '19 at 09:17

PrimeNG TurboTable with custom width does not work properly

2 Answers2