Angular Ui Material Table with sticky header and footer and also want a common page header sticky. How To fix this

by

I want that my table will be sticky as i given in documention of material table it do in that way but when i try to give height 100% for .example-container it does not stick header of table
table.component.html

<div class="example-container mat-elevation-z8" tabindex="0">
<table mat-table matSort [dataSource]="userdata">
  
     <!--Table Content--!>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
      [ngClass]="i % 2 === 0 ? 'even-row' : 'odd-row'"></tr>
  </table>
  </div>
    
  <mat-paginator [pageSize]="15" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>

table.component.cs

.example-container {
  height: 100%;
  overflow: auto;
}

table {
  width: 100%;
  margin-top:50px
}
  .mat-paginator-sticky {
    bottom: 0px;
    position: sticky;
    z-index: 10;
  }

header.component.css

.header {
display: flex;
height: 64px;
/* width:446px; */
justify-content: space-between;
background-color: #3f51b5;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;

}

In the header file, .header is a class in the header component.

When I try to add a height of 100% to .example-container class, it does not stick a header.

The common header of the page is overlapped with the table.

Leave a Comment