Set a fixed minimum height for angular material table

Question

I have a table like so

<table mat-table class="mat-elevation-z8 w-full" [dataSource]="dataSource">
    <!-- Username Column -->
    <ng-container matColumnDef="username">
        <th mat-header-cell *matHeaderCellDef>Username</th>
        <td mat-cell *matCellDef="let element">{{element.username}}</td>
    </ng-container>

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

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [length]="count" showFirstLastButtons></mat-paginator>

And it works perfectly fine, except for when I go to the last page, where the amount of objects is less than the objects per page, because then the table shrinks in height.

This is correct:

This is how it looks on the last page:

I want the height to be same. So for it to just fill in empty rows until it's the same height as every other page. How do I do that?

Some environment information:

• Angular 11.0.4
• @angular/material ^11.2.0

Answer 1

You could simply override the CSS for mat-table add the following in the component CSS or in your style.css:

.mat-table {
 height: /*specify the height;*/ 
} 

if the style won't apply you could add !imporatant and ng:deep as follows:

::ng-deep.mat-table {
 height: 500px !important;/ 
} 

Stackblitz

If style won't apply then you need to check the CSS class that is being applied into the table and overriding that class and adjusting the height.

Answer 2

I had this same issue.

Apply min-height to the table itself.

Like

table {
min-height: 150px;
}
or 
table ::ng-deep {
min-height: 150px;
}

This worked for me.

Answer 3

Use ViewEncapsulation: None to achieve this. in td use class property

app.component.ts

@Component({
  selector: "app",
  styleUrls: ["app.component.css"],
  templateUrl: "app.component.html",
  encapsulation: ViewEncapsulation.None
})

app.component.html

<table mat-table class="mat-elevation-z8 w-full" [dataSource]="dataSource">
    <!-- Username Column -->
    <ng-container matColumnDef="username">
        <th mat-header-cell *matHeaderCellDef>Username</th>
        <td mat-cell *matCellDef="let element" class="height">{{element.username}}</td>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef>Email</th>
        <td mat-cell *matCellDef="let element" class="height">{{element.email}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [length]="count" showFirstLastButtons></mat-paginator>

app.component.css

.height {
  height: 50px;
}

Working stackblitz example: https://stackblitz.com/edit/angular-uf1sdt?file=src/app/table-multiple-header-footer-example.css

Hope this helps :)