Angular 6 Material Data Table with Fixed Header and Paginator

Question

How to make the Header of Data Table component fixed to the top, and the Paginator fixed to the bottom?

This is my HTML:

        
                      

              相关标签:
       
      

Answer 1

I found in the examples on the material site that the header can be fixed by adding sticky to the matHeaderRowDef:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">

For the paginator i added a class to mat-paginator:

<mat-paginator ...
                class="mat-paginator-sticky"> 

with a class based on the answer in the link @frederik provided in the comments

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

Answer 2

I too had this problem. I created a div of fixed size and then kept the table inside div. This should solve your issue.

<div style="height: 300px; overflow: auto">
    <table mat-table [dataSource]=dataSource>
        <!--Your table entries here -->
        . 
        .
        .
        .
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

Answer 3

The below css worked for me:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
.mat-header-row{
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  }

Answer 4

You can use a normal sticky mat-footer-row with colspan and put the paginator inside:

<table mat-table>
   ...

    <ng-container matColumnDef="paginator">
        <td mat-footer-cell *matFooterCellDef [colSpan]="displayedColumns.length">
            <mat-paginator ...></mat-paginator>
        </td>
    </ng-container>

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

And use some style like this, to make it more appealing to eye:

.mat-row:last-child td {
  border-bottom: none;
}

.mat-footer-row:first-child td {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mat-footer-cell .mat-paginator {
  margin-left: -24px;
  margin-right: -24px;
}

Answer 5

As per Material 8.1

1. For the sticky header we need to give a sticky values as shown in many answers here

2. For the sticky paginator or bottom fixed paginator.

We can wrap the table inside a div with max-height or height CSS Property and put the paninator outside that div.

Html Code sample.

 <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->
      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
 </div>

CSS

  table {
    width: 100%;
  }

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

Answer 6

Try to update angular material in your project because the sticky attribute was added in 6.2.3.