I am trying to make the information columns in my angular material table stay sticky on the left side. I have attempted to use the "sticky" tag on each column, but it did not work as expected.
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >
<ng-container matColumnDef="group" sticky>
<th mat-header-cell class="group" *matHeaderCellDef mat-sort-header> Konzern </th>
<td mat-cell class="group" *matCellDef="let element"> {{element.group}} </td>
</ng-container>
<ng-container matColumnDef="customer" sticky>
<th mat-header-cell class="customer" *matHeaderCellDef mat-sort-header> Kunde </th>
<td mat-cell class="customer" *matCellDef="let element"> {{element.customer}} </td>
</ng-container>
<ng-container matColumnDef="brand" sticky>
<th mat-header-cell class="brand" *matHeaderCellDef mat-sort-header> Marke </th>
<td mat-cell class="brand" *matCellDef="let element"> {{element.brand}} </td>
</ng-container>
<ng-container matColumnDef="subBrand" sticky>
<th mat-header-cell class="subBrand" *matHeaderCellDef mat-sort-header> Submarke </th>
<td mat-cell class="subBrand" *matCellDef="let element"> {{element.subBrand}} </td>
</ng-container>
<ng-container matColumnDef="subgroup" sticky>
<th mat-header-cell class="subgroup" *matHeaderCellDef mat-sort-header> Untergruppe </th>
<td mat-cell class="subgroup" *matCellDef="let element"> {{element.subgroup}} </td>
</ng-container>
<ng-container *ngFor="let week of this.displayedRowInformation; let i=index" [matColumnDef]="i.toString()">
<th mat-header-cell class="week" [id]="i.toString()" *matHeaderCellDef> {{week.weeknumber}} </th>
<td mat-cell class="week" *matCellDef="let element">
<div style="position:relative">
<div>{{ getEvent(week, element).description}}</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>