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

<table
    *ngIf="data"
    class="mdl-data-table mdl-js-data-table full-width mdl-data-table-fix-firefox">
    <thead>
    <tr>
        <!-- Actions (left) -->
        <th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
            <span class="sr-only">Actions</span>
        </th>
        <!-- Columns -->
        <th *ngIf="multiselect">
            <md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
        </th>
        <th class="mdl-data-table__cell--non-numeric non-selectable {{col.cssClass}}"
            *ngFor="let col of data.getColumns()"
            [attr.data-automation-id]="'auto_id_' + col.key"
            [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 (right) -->
        <th *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-header">
            <span class="sr-only">Actions</span>
        </th>
    </tr>
    </thead>
    <tbody>

    <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
        class="alfresco-datatable__row"
        [class.alfresco-datatable__row--selected]="selectedRow === row"
        [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row">

        <!-- Actions (left) -->
        <td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
            <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon" [attr.data-automation-id]="actions_menu">
                <i class="material-icons">more_vert</i>
            </button>
            <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
                [attr.for]="'action_menu_' + idx">
                <li class="mdl-menu__item" [attr.disabled]="action.disabled"
                    [attr.data-automation-id]="action.title"
                    *ngFor="let action of getRowActions(row)"
                    (click)="onExecuteRowAction(row, action)">
                    {{action.title}}
                </li>
            </ul>
        </td>

        <td *ngIf="multiselect">
            <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
        </td>
        <td *ngFor="let col of data.getColumns()"
            class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
            (click)="onRowClick(row, $event)"
            (dblclick)="onRowDblClick(row, $event)"
            [context-menu]="getContextMenuActions(row, col)"
            [context-menu-enabled]="contextMenu">
            <div *ngIf="!col.template" class="cell-container">
                <ng-container [ngSwitch]="col.type">
                    <div *ngSwitchCase="'image'" class="cell-value">
                        <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
                        <img *ngIf="!isIconValue(row, col)"
                            class="image-cell"
                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                            src="{{ data.getValue(row, col) }}"
                            (error)="onImageLoadingError($event)">
                    </div>
                    <div *ngSwitchCase="'icon'" class="cell-value">
                        <img class="image-cell"
                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                            src="{{ data.getValue(row, col) }}"
                            (error)="onImageLoadingError($event)">
                    </div>
                    <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
                    </div>
                    <div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
                    </div>
                    <span *ngSwitchDefault class="cell-value">
                    <!-- empty cell for unknown column type -->
                    </span>
                </ng-container>
            </div>
            <div *ngIf="col.template" class="cell-container">
                <ng-container
                    [ngTemplateOutlet]="col.template"
                    [ngOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
                </ng-container>
            </div>
        </td>

        <!-- Actions (right) -->
        <td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
            <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon" [attr.data-automation-id]="actions_menu">
                <i class="material-icons">more_vert</i>
            </button>
            <ul alfresco-mdl-menu class="mdl-menu--bottom-right"
                [attr.for]="'action_menu_' + idx">
                <li class="mdl-menu__item" [attr.disabled]="action.disabled || undefined"
                    [attr.data-automation-id]="action.title"
                    *ngFor="let action of getRowActions(row)"
                    (click)="onExecuteRowAction(row, action)">
                    {{action.title}}
                </li>
            </ul>
        </td>

    </tr>
    <tr *ngIf="data.getRows().length === 0">
        <td class="mdl-data-table__cell--non-numeric no-content-container"
            [attr.colspan]="1 + data.getColumns().length">
            <template *ngIf="noContentTemplate"
                      ngFor [ngForOf]="[data]"
                      [ngForTemplate]="noContentTemplate">
            </template>
        </td>
    </tr>
    </tbody>
</table>