Having an issue with the header checkbox while working with Angular using material-table.
Whenever I try to add a 4th column for the checkbox, I encounter a strange error message:
ERROR TypeError: Cannot read properties of undefined (reading 'headerCell')Below is my TypeScript file:
export class VarViewNBtsComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
columnsToDisplay: string[] = ['varSelect', 'varName', 'varType', 'varValue']; // Showing 4 columns
ddsVariablesLeft = new MatTableDataSource<DDSVariable>(); // DDSVariable has only three entries
selection = new SelectionModel<DDSVariable>(true, []);
constructor(private sharedService: SharedService) {}
ngOnInit() {
this.ddsVariablesLeft.paginator = this.paginator;
this.sharedService.getPathArrObs().subscribe((update) => {
this.updTableData(update.data);
});
}
}
Here is the HTML template:
<div class="left-table">
<table mat-table [dataSource]="ddsVariablesLeft">
<tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay" (click)="selection.toggle(row)"></tr>
<ng-container matColumnDef="varSelect">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- define column and its cells -->
<ng-container matColumnDef="varName">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let ddsVariable"> {{ddsVariable.name}} </td>
</ng-container>
<!-- define column and its cells -->
<ng-container matColumnDef="varType">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let ddsVariable"> {{ddsVariable.type}} </td>
</ng-container>
<!-- define column and its cells -->
<ng-container matColumnDef="varValue">
<th mat-header-cell *matHeaderCellDef> Value </th>
<td mat-cell *matCellDef="let ddsVariable"> {{ddsVariable.value}} </td>
</ng-container>
<!-- <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr> -->
</table>
<mat-paginator [pageSizeOptions]=" [5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
Furthermore, when I click on the header, the following errors occur: https://i.sstatic.net/QP0jt.png