Angular Material table is not responsive

Question

I have an angular application.It was implemented using Angular Material.I have used a table with tag with 22 column. Now when I maximize the browser some of the columns are not showing and event in mobile browser all the columns are not shown . I have tried with the below approach:

1. First I tried with angular material 'sticky' attribute. It is working fine for browser up to width 110%. But it was not working well when I enlarge the browser size.
2. Adding bootstrap and using but still not working for mobile screen and large screen.

.html::

<div *ngIf="!loadingAnimation && events.length > 0">
  <h1>View All Events</h1>
  <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
      </mat-form-field>
    </div>
<div class="loading-shade" *ngIf="loadingAnimation" class="center">
    <mat-spinner *ngIf="loadingAnimation"></mat-spinner>
  </div>
<div fxLayout="row" *ngIf="!loadingAnimation && events.length > 0">   
    <mat-paginator [length]="totalEvents" [pageSize]="eventsPerPage" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true"  *ngIf="events.length > 0"
        (page)="onChangedPage($event)"></mat-paginator>
  <div class="table-container">

    <table class="table table-hover" mat-table matSort [dataSource]="dataSource" (matSortChange)="changeSort($event)">
      <ng-container matColumnDef="status" sticky >
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
        <td mat-cell *matCellDef="let event">
          <!-- <a [routerLink]="['/events/details-events']" [queryParams]="{matchId: event.matchId}" > {{event.status}}
          </a> -->
          <button mat-raised-button color="primary" (click)="openDialogDetails(event.matchId)">{{event.status}}</button>
         </td>
      </ng-container>
      <ng-container matColumnDef="eventDate" >
        <th table-primary mat-header-cell *matHeaderCellDef mat-sort-header> Event_Date </th>
        <td mat-cell *matCellDef="let event"> {{event.eventDate}} </td>
      </ng-container>
      <ng-container matColumnDef="teacherName" >
        <th mat-header-cell *matHeaderCellDef mat-sort-header > Teacher_Name </th>
        <td mat-cell *matCellDef="let event">
          <!-- <a [routerLink]="['/events/details_teachers']" [queryParams]="{memType:'R',memId:event.memId}" > {{event.teacherName}}</a> -->
          <button mat-raised-button color="primary" (click)="openDialog('R',event.memId)">{{event.teacherName}}</button> 
        </td>
      </ng-container>
      <ng-container matColumnDef="school" >
        <th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
        <td mat-cell *matCellDef="let event"> {{event.school}} </td>
      </ng-container>
      <ng-container matColumnDef="address1">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Address1</th>
        <td mat-cell *matCellDef="let event"> {{event.address1}} </td>
      </ng-container>
      <ng-container matColumnDef="address2">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Address2 </th>
        <td mat-cell *matCellDef="let event"> {{event.address2}} </td>
      </ng-container>
      <ng-container matColumnDef="city">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> City </th>
        <td mat-cell *matCellDef="let event"> {{event.city}} </td>
      </ng-container>
      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
        <td mat-cell *matCellDef="let event"> {{event.state}} </td>
      </ng-container>
      <ng-container matColumnDef="zip">
        <th mat-header-cell *matHeaderCellDef mat-sort-header > Zip </th>
        <td mat-cell *matCellDef="let event"> {{ event.zip }} </td>
      </ng-container>
      <ng-container matColumnDef="grade">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Grade </th>
        <td mat-cell *matCellDef="let event">  &nbsp; {{ event.grade }} </td>
      </ng-container>
      <ng-container matColumnDef="scientistName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Scientist_Name </th>
        <td mat-cell *matCellDef="let event" >
           <!-- <a routerLink="/events/events-scientists">{{event.scientistName}}</a> -->
           <button mat-raised-button color="primary" (click)="openDialog('V',event.scientistUserId)">{{event.scientistName}}</button> 
          </td>
      </ng-container>
      <ng-container matColumnDef="instName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Institute_Name </th>
        <td mat-cell *matCellDef="let event" > {{event.instName}} </td>
      </ng-container>
      <ng-container matColumnDef="instAddress1">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Addr1 </th>
        <td mat-cell *matCellDef="let event" > {{event.instAddress1}} </td>
      </ng-container>

      <ng-container matColumnDef="instAddress2">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Addr2 </th>
        <td mat-cell *matCellDef="let event" > {{event.instAddress2}} </td>
      </ng-container>
      <ng-container matColumnDef="instCity">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_City </th>
        <td mat-cell *matCellDef="let event" > {{event.instCity}} </td>
      </ng-container>
      <ng-container matColumnDef="instState">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_State </th>
        <td mat-cell *matCellDef="let event"> {{event.instState}} </td>
      </ng-container>
      <ng-container matColumnDef="instZip">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Zip </th>
        <td mat-cell *matCellDef="let event" > {{event.instZip}} </td>
      </ng-container>
      <ng-container matColumnDef="classSize">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Class_Size </th>
        <td mat-cell *matCellDef="let event" > {{event.classSize}} </td>
      </ng-container>
      <ng-container matColumnDef="shirtSize" stickyEnd  >
        <th mat-header-cell *matHeaderCellDef mat-sort-header > Shirt_Size </th>
        <td mat-cell *matCellDef="let event" > {{event.shirtSize}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

        <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> -->
</div>
<label *ngIf="!loadingAnimation && events.length == 0">No events found, please create one!</label>

.css::

table {
  overflow: scroll;

}


.table-container {
  height:400px;
  width:900px;
  overflow:scroll;
}

.loading-shade {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 56px;
  right: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mat-table-sticky:first-child {
  border-right: 1px solid #e0e0e0;
}

.mat-table-sticky:last-child {
  border-left: 1px solid #e0e0e0;
}
td.mat-column-star {
  width: 5px;
  padding-right: 4px;
}

th.mat-column-position, td.mat-column-position {
  padding-left: 4px;
}

I need more responsive approach so that it can works in any browser irrespective of size.

Answer 1

If you still want to use table, Another option is to set horizontal scroll for your table in css like this

In your html

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort matSortActive="posteddate" matSortDirection="asc">
   ....

and in your css

 .mat-elevation-z8 {    
    overflow-x: auto;
   }

Answer 2

For a responsive table with flex you need to use <mat-table> instead of <table mat-table> . You don't get auto sizing for content. Also you need to change all of the rows and header like the <tr mat-row>to <mat-row>

https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-