columnConfig: ColumnConfig[] = [
{ name: '#No', header: 'Id.', field: 'id', type: 'text' },
{ name: 'Name', header: 'Title', field: 'title', type: 'text' },
{ name: 'price', header: 'Price', field: 'price', type: 'text', showTotal: true },
{ name: 'cover', header: 'Cover', field: 'images', type: 'image' },
{ name: 'actions', header: 'Actions', field: '', type: 'action' }
];
@for (column of columnConfig; track column.name) {
<ng-container [cdkColumnDef]="column.name">
<th cdk-header-cell class="py-3 px-6" *cdkHeaderCellDef>{{ column.header }}</th>
<td cdk-cell class="py-4 px-6" *cdkCellDef="let row">
@if (column.type === 'image') {
<img class="w-20" [src]="row[column.field][0]" alt="">
} @else if (column.type === 'action') {
<app-btn (click)="update(row)">Update</app-btn>
} @else {
{{ row[column.field] }}
}
</td>
<td cdk-footer-cell class="py-3 px-6" *cdkFooterCellDef>
@if (column.showTotal) {
{{ total }}
}
</td>
</ng-container>
}
