alfresco-ng2-components/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html

<table *ngIf="data" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <thead>
    <tr>
        <!-- Columns -->
        <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
            *ngFor="#col of data.columns"
            [class.column-header]="col.title"
            [class.mdl-data-table__header--sorted-ascending]="isColumnSorted(col, 'asc')"
            [class.mdl-data-table__header--sorted-descending]="isColumnSorted(col, 'desc')"
            (click)="onColumnHeaderClick(col)">
            <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
            <span *ngIf="col.title">{{col.title}}</span>
        </th>
        <!-- Actions -->
        <th>
            <span class="sr-only">Actions</span>
        </th>
    </tr>
    </thead>
    <tbody>
    <!-- todo: special 'navigate parent row' support -->

    <tr *ngFor="#row of data.rows; #idx = index">

        <td *ngFor="#col of data.columns" [ngSwitch]="col.type"
            class="mdl-data-table__cell--non-numeric data-cell {{col.cssClass}}"
            (click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
            <div *ngSwitchWhen="'image'">
                <i *ngIf="isIconValue(row, col)" class="material-icons folder-thumbnail">{{asIconValue(row, col)}}</i>
                <img *ngIf="!isIconValue(row, col)" class="document-thumbnail" alt="" src="{{data.getValue(row, col)}}">
            </div>
            <div *ngSwitchWhen="'text'">
                {{data.getValue(row, col)}}
            </div>
            <span *ngSwitchDefault>
               <!-- empty cell for unknown column type -->
            </span>

        </td>

        <td><!-- todo: actions --></td>

    </tr>
    </tbody>
</table>