PrimeNG - Keep horizontal layout on PTable in any device - css

Question

My Ptable looks like this when i see it on desktop/iPad
And when i set my device to something like iPhone X, it looks like this
I would like it to have the horizontal layout on every device. I know its not going to look very nice but still, i need to keep it looking the same everywhere.
Here's the code:
<p-table #dt [value]="pedidos" [rows]="10" [responsive]="true" [resizableColumns]="true"
[paginator]="true" [rowsPerPageOptions]="[10,20,30,50,100]" (sortFunction)="customSort($event)"
[customSort]="true" columnResizeMode="expand" [columns]="selectedColumns" [reorderableColumns]="true"
[globalFilterFields]="['nroPedido','nroOrdenSap', 'nrocliente', 'cliente', 'estado', 'fechaEstado', 'totalLocal', 'total']">
<ng-template pTemplate="caption">
<div class="grid-container">
<div class="grid-x">
<div class="medium-9 cell">
<div class="input-group">
<span class="input-group-label">
<i class="fa fa-search"></i>
</span>
<input type="text" class="input-group-field" size="50"
(input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"
placeholder="{{Etiquetas.Buscar}}">
</div>
</div>
<div class="medium-3 cell">
<div style="text-align:left">
<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
selectedItemsLabel="{0} {{Etiquetas.ColumnasSeleccionadas}}" [style]="{minWidth: '200px'}"
defaultLabel="{{Etiquetas.ElijaColumnas}}">
</p-multiSelect>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr *ngIf="pedidos">
<th pResizableColumn [ngStyle]="{'width': this.esMobile ? '10%' : '20%'}">
{{this.esMobile ? '' : 'Acciones'}}
</th>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [ngStyle]="{'width': col.width}"
pResizableColumn pReorderableColumn>
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-pedido let-columns="columns">
<tr>
<td>
<button *ngIf="pedido.editar" mat-icon-button matTooltip={{Etiquetas.Editar}}
routerLink="{{pedido.codigo}}">
<mat-icon color="primary">edit</mat-icon>
</button>
<button *ngIf="!pedido.editar" mat-icon-button matTooltip={{Etiquetas.Ver}}
routerLink="{{pedido.codigo}}">
<mat-icon color="primary">remove_red_eye</mat-icon>
</button>
</td>
<td *ngFor="let col of columns">
<span *ngIf="col.field !== 'estado' && col.field !== 'fechaEstado'">
{{ col.type ? col.type.transform(pedido[col.field]) : pedido[col.field] }}
</span>
<span *ngIf="col.field == 'fechaEstado'">
{{ pedido[col.field] }}
</span>
<span *ngIf="col.field == 'estado'" [ngClass]="cStatusClass(pedido.idEstado)"
style="float:center;text-align:center;display:block">
{{ col.type ? col.type.transform(pedido[col.field]) : pedido[col.field] }}
</span>
</td>
</tr>
</ng-template>
</p-table>
Is there a property or maybe something i should change on CSS to make this happen?

Answer 1

Just needed to change this property on the HTML code: [responsive]="false"