Tabla de datos de materiales de Angular 6 con encabezado fijo y paginador

Joel, miembro de este staff, nos hizo el favor de redactar esta sección porque conoce a la perfección dicho tema.

Solución:

En los ejemplos en el sitio de material, encontré que el encabezado se puede arreglar agregando adhesivo a matHeaderRowDef:

Para el paginador agregué una clase a mat-paginator:

con una clase basada en la respuesta en el enlace que @frederik proporcionó en los comentarios

.mat-paginator-sticky 
  bottom: 0px;
  position: sticky;
  z-index: 10;

Intente actualizar el material angular en su proyecto porque el pegajoso attribute se añadió en 6.2.3.

Según el Material 8.1

1. Para el encabezado adhesivo, debemos dar valores fijos como se muestra en muchas respuestas aquí

2. Para el paginador pegajoso o el paginador fijo inferior.

Podemos envolver la tabla dentro de un div con max-height o height CSS Property y poner el paninator fuera de ese div.

Ejemplo de código HTML.

CSS

  table 
    width: 100%;
  

  .table-container 
    max-height: calc(100vh - 155px); // or height: calc(100vh - 155px); depending on your need  change
    overflow: auto;
  

---

---

Utiliza Nuestro Buscador