Блог

Моя Ptable выглядит так, когда я вижу ее на рабочем столе / iPad

И когда я устанавливаю на своем устройстве что-то вроде iPhone X, это выглядит так

Я бы хотел, чтобы на каждом устройстве была горизонтальная компоновка. Я знаю, что это будет выглядеть не очень красиво, но все же мне нужно, чтобы он везде выглядел одинаково.

Вот код:

 <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' amp;amp; 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>
  

Есть ли свойство или, может быть, что-то, что я должен изменить в CSS, чтобы это произошло?

Просто нужно изменить это свойство в коде HTML: [responsive]="false"