stf-datatable
Version:
An Angular 4 dataTable, easily to implement and to costumize. You only need a JSON object and set what properties of your JSON you want to show
38 lines (36 loc) • 1.72 kB
HTML
<div>
<ng-container *ngComponentOutlet="">
<ng-content></ng-content>
</ng-container>
<div class="grid">
<table class="{{tableClasses}}">
<thead>
<tr>
<th *ngFor="let dataTable of dataTableProperties">
<div *ngIf="dataTable.columnIcon" class="column-icon">
<i class="align-left {{dataTable.columnIcon}}"></i>
</div>
<input type="checkbox" value="" *ngIf="dataTable.columnType === 'checkBox'; else elseBlock" >
<ng-template #elseBlock>{{dataTable.header}}</ng-template>
<div *ngIf="dataTable.sortable" class="sortable-icon">
<i class="align-right fa fa-sort" aria-hidden="true"></i>
</div>
</th>
</tr>
</thead>
<tbody>
<tr class="q" *ngFor="let var of dataTableProperties[0]?.values; let q = index">
<td *ngFor="let dataTable of dataTableProperties;">
<input type="checkbox" value="" *ngIf="dataTable.columnType === 'checkBox'; else elseBlock" >
<ng-template #elseBlock>
<div *ngIf="dataTable.icons[q]" class="column-icon">
<i class="align-left {{dataTable.icons[q]}}"></i>
</div>
{{dataTable.values[q]}}
</ng-template>
</td>
</tr>
</tbody>
</table>
</div>
</div>