0

tengo un problema con Angular, en el detalle del front, donde tengo una tabla y los siguientes campos, el detalle es que las celdas se me distorsionan y no se que pueda hacer, he visto la documentación de Primeface de angular en tabla y ya intente pero la información de mis registros se me desfasa por completo.

introducir la descripción de la imagen aquí

El código es el siguiente:

<p-table #dt [value]="institucions" [columns]="cols" responsiveLayout="scroll"
             [rows]="10" [globalFilterFields]="['institucion','representante']" 
             [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" 
             [showCurrentPageReport]="true" currentPageReportTemplate="Mostrando {first} de {last} de {totalRecords} registros" 
             [(selection)]="selectedInstitucions" selectionMode="multiple" [rowHover]="true" 
             dataKey="id" [scrollable]="true"  scrollHeight="580px" scrollDirection="both" styleClass="p-datatable-sm, p-datatable-gridlines">
                <ng-template pTemplate="caption">
                    <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                        <h5 class="m-0 highlighted">Lista de instituciones</h5>
                        <span class="block mt-2 md:mt-0 p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Buscar..." />
                        </span>
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 3em;">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th style="flex: 1;" pSortableColumn="id">No.<p-sortIcon field="id"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="rfc">RFC<p-sortIcon field="rfc"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="institucion">Institución<p-sortIcon field="institucion"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="representante">Representante<p-sortIcon field="representante"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="area">Área<p-sortIcon field="area"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="sector">Sector<p-sortIcon field="sector"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="estatus">Estatus<p-sortIcon field="estatus"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="telefono">Teléfono<p-sortIcon field="telefono"></p-sortIcon></th>
                        <th style="flex: 1;" pSortableColumn="correo">Correo<p-sortIcon field="correo"></p-sortIcon></th>
                        <th style="flex: 1;">Acciones</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-institucion>
                    <tr>
                        <td style="width: 3em;">
                            <p-tableCheckbox [value]="institucion"></p-tableCheckbox>
                        </td>
                        <td style="flex: 1;">
                            {{institucion.No}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.rfc}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.institucion}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.representante}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.area}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.sector}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.estatus}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.telefono}}
                        </td>
                        <td style="flex: 1;">
                            {{institucion.correo}}
                        </td>
                        <td style="flex: 1;">
                            <div class="flex">
                                <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="openNewFormEmpre(institucion,true)" pTooltip="Editar"></button>
                                <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(institucion)" pTooltip="Eliminar" tooltipPosition="left"></button>
                            </div>
                        </td>
                        
                    </tr>
                </ng-template>
            </p-table>

He intentado varias cosas con estilos pero no me hace la diferencia, si me pudieran ayudar con este aspecto se los agradecería muchisimo.

1 respuesta 1

0

Lo resolvi dejando los siguientes parametros de p-table:"

responsiveLayout="scroll"
[rowHover]="true" 
[scrollable]="false"  
scrollHeight="500px" 
scrollDirection="both"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.