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 el 9 mar. 2020 a las 22:40

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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