1

In our project we want to use the Angular Material table with the paginator component. Everything works fine if we stick to the layouts which are used in the examples. The example closest to our desired layout is this one: https://material.angular.io/components/table/examples#table-http

However, compared to the example, in our layout we don't know the height of our parent component. We cannot set min-height and max-height to a fixed number. While the paginator should use whatever height it needs (-> auto), the table should grow/shrink and handle the overflow by providing a scrollbar.

The solution is probably close to the following:

<div style="height: 100%; display: flex; flex-direction: column">
  <table mat-table style="flex: 1 1 0px"> ... </table>
  <mat-paginator style="flex: none"> ... </mat-paginator>
</div>

While this works fine if the table really needs all available space, it also consumes the available height if there are no rows to display in the table. I don't know the height of the paginator as it depends upon the density setting introduced with Angular 15. Therefore, I cannot set max-height of my table to something like calc(100% - $paginatorHeight). Is there a flexbox property which tells my table to only grow up to its content? Or is there any other styling option suitable for my use case?

Christian Meier
  • 105
  • 1
  • 1
  • 5

1 Answers1

1

I solved this issue by moving the paginator to the footer of the table.

   <ng-container matColumnDef="paginator">
        <td mat-footer-cell *matFooterCellDef [attr.colspan]="100">
          <mat-paginator #paginator [length]="totalCount [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 50]"
                         (page)="onPageChange($event)">
          </mat-paginator>
        </td>
   </ng-container>

   <tr mat-footer-row *matFooterRowDef="['paginator']; sticky: true"></tr>

This makes the paginator sticky when scrolling and you can set the height of table to 100%

Dominik Brázdil
  • 319
  • 2
  • 7