p-table (data) not responsive on mobile device.

[ben1967]

Hi,

I use p-table component, on the PC/labtop it runs great 100%. On mobile Samsung 4,3" the columns are truncated and columns are below each other and because of this it looks very ugly.
The caption and summary of the p-table have the normal size.

Can you help me with this ?
Thanks.

HTML code:

Code: Select all

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <p-table [columns]="cols" [value]="personPrimeNGs" resizableColumns="true" scrollable="true" scrollHeight="200px" [totalRecords]="totalRecords"
        selectionMode="single" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)"
        [rows]="aantalRijenGeladen" [paginator]="true" [pageLinks]="4" [responsive]="true" [reorderableColumns]="true" (sortFunction)="customSort($event)"
        (onLazyLoad)="onloadLogsLazy($event)" [lazy]="false"
        [customSort]="true" [rowsPerPageOptions]="[50,100,150]">
        <ng-template pTemplate="caption">
            Lijst van medewerkers
        </ng-template>
        <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" pReorderableColumn pResizableColumn [pSortableColumn]="col.field">
                    
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">

                <td *ngFor="let col of columns" class="ui-resizable-column">
                    <span class="ui-column-title">{{col.header}}</span>
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary">
            Er zijn {{personPrimeNGs?.length}} medewerkers
        </ng-template>
    </p-table>
    </div>
</div>