I tried so many things and could not, that my code turned out to be a complete mess. I am open to anything, but if you need a base:
The most promising approach I found was the following, but with an exception: the templateRef.createEmbeddedView is not a function:
app.component.html
<br> <mt-table [fields]="userFields" [(rows)]="users" [pageSize]="10" [searchString]="searchString" class="round"> <template let-row="row"> <td> {{ row.name }} </td> <td> <i class="fa fa-{{ row.gender === 'male' ? 'mars' : 'venus' }}"></i> </td> <td> {{ row.email }} </td> <td> {{ row.phone }} </td> <td> {{ row.address.number }} </td> <td> {{ row.address.street }} </td> <td> {{ row.address.city }} </td> <td> {{ row.address.state }} </td> <td align="center"> <span class="actions show-on-tr-hover"> <i class="fa fa-pencil-square opacity-on-hover"></i> <i class="fa fa-minus-square opacity-on-hover"></i> </span> </td> </template> </mt-table>
mtTable.component.html
<thead *ngIf="fields?.length"> <tr> <th *ngFor="let field of fields" [ngClass]="{ 'sortable': field.isSortable }" (click)="activateColumn(field)"> {{ field.label }} <span *ngIf="field.isSortable" class="sorting"> <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && !field.reverseOrder }">▲</div> <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && field.reverseOrder }">▼</div> </span> </th> </tr> </thead> <tbody *ngIf="rows?.length"> <tr *ngFor="let row of getPaginatedRows()" (click)="onRowClick(row)" class="clickable"> <template [ngTemplateOutlet]="rowTemplate" [ngOutletContext]="{ row: row }"></template> </tr> </tbody> <tfoot *ngIf="pageSize"> <tr> <td [attr.colspan]="fields?.length"> <mt-table-pagination [rows]="getProcessedRows()" [pageSize]="pageSize" [(output)]="pagination"> </mt-table-pagination> </td> </tr> </tfoot> </table>
Do you have any ideas on why this fails or any possible alternative approaches?
source share