My goal is to streamline the process of creating custom material tables by using a specialized table component that allows me to quickly generate unique tables for different data sources with built-in pagination and sorting. All I need to provide are the displayedColumns and data. Utilizing the examples showcased here, I created this implementation (https://stackblitz.com/edit/angular-kp2ryv), but encountering an error in StackBlitz related to the usage of the custom column component.
ERROR TypeError: Cannot set property 'name' of undefined
This error message suggests that
@ViewChild(MatColumnDef) columnDef: MatColumnDef;matColumnDef in the template for unknown reasons.
Here's how a table can be created using the custom component:
<dyn-table [data]="users" [displayedColumns]="displayedColumns">
<dyn-col name="user_id"></dyn-col>
<dyn-col name="user_name"></dyn-col>
</dyn-table>
This approach simplifies the following code:
<table mat-table #table [dataSource]="dataSource" class="table table-striped mat-elevation-z8">
<ng-container matColumnDef="user_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User id </th>
<td mat-cell *matCellDef="let data">{{ data.user_id }}</td>
</ng-container>
<ng-container matColumnDef="user_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User name </th>
<td mat-cell *matCellDef="let data">{{ data.user_name }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="10"></mat-paginator>
I have spent significant time researching and troubleshooting, but unable to pinpoint the cause of this issue.
You can also view a functional version of the same StackBlitz without custom column components https://stackblitz.com/edit/angular-jw9whh