0

Estoy usando una tabla de angular-material y su paginación. Pero tengo un problema de la visualizacion de los mismos, porque la tabla aparece de un tamaño mucho menor a la paginacion. Como se puedever en la siguiente imagen:

introducir la descripción de la imagen aquí

Los datos son traidos de un ws y son paginados correctamentes. El problema es visual, como se ve en la foto la tabla queda bastante acotada y la paginacion de un tamaño mucho mayor. El code html del componente que renderiza es el siguiente:

<div class="mat-elevation-z6">
  <table mat-table [dataSource]="listaObraSociales">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

      <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Nombre </th>
      <td mat-cell *matCellDef="let element"> {{element.title}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[2, 5, 10]" showFirstLastButtons></mat-paginator>
  <!-- la siguiente linea es solo para debug  -->
  <!-- {{listaObraSociales|json}} -->
</div>

Resuelto Me falto agregar el estilo css en el archivo .css del componente

table {
width: 100%;
}

1 respuesta 1

1

La tabla y el paginador son objetos independientes en la jerarquía del documento HTML, prueba a ponerle un width del 100% a la tabla y a estableceerr de forma explicita el ancho de cada columna según consideres, por ejemplo:

<table mat-table [dataSource]="listaObraSociales" style="width: 100%;">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell fxFlex="20" *matHeaderCellDef> No. </th>
      <td mat-cell fxFlex="20" *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

      <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell fxFlex *matHeaderCellDef> Nombre </th>
      <td mat-cell fxFlex *matCellDef="let element"> {{element.title}} </td>
    </ng-container>

Según el código anterior el ID ocupará el 20% del espacio de la tabla y el nombre el espacio restante (80% en este caso).

Asumo que estás utilizando @angular/flex-layout en tu proyecto, suele ser habitual con Angular Material.

1
  • Gracias! Me faltaba agregar el css y muy buen aporte lo de fxFlex Commented el 9 mar. 2020 a las 22:40

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.