When I view my Ptable on desktop or iPad, it looks like this:
https://i.stack.imgur.com/ONqZV.png
However, when I switch to a device like an iPhone X, it changes to this layout:
https://i.stack.imgur.com/H2q7j.png
I want the horizontal layout to display consistently on all devices, even though it may not look ideal. It's important for me to maintain the same appearance across different screens.
Below is the code snippet:
<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 specific property or CSS modification that can help me achieve this consistent horizontal layout across all devices?