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:
- 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.
- 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"> {{ 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.
