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

<table
    *ngIf="data"
    class="full-width adf-data-table">

    <thead *ngIf="showHeader">
    <tr>
        <!-- Actions (left) -->
        <th *ngIf="actions && actionsPosition === 'left'" class="actions-column">
            <span class="sr-only">Actions</span>
        </th>
        <!-- Columns -->
        <th *ngIf="multiselect">
            <mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></mat-checkbox>
        </th>
        <th class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
            *ngFor="let col of data.getColumns()"
            [class.sortable]="col.sortable"
            [attr.data-automation-id]="'auto_id_' + col.key"
            [class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
            [class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
            (click)="onColumnHeaderClick(col)"
            (keyup.enter)="onColumnHeaderClick(col)"
            role="button"
            tabindex="0"
            title="{{ col.title | translate }}">
            <span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
            <span *ngIf="col.title">{{ col.title | translate}}</span>
        </th>
        <!-- Actions (right) -->
        <th *ngIf="actions && actionsPosition === 'right'" class="actions-column">
            <span class="sr-only">Actions</span>
        </th>
    </tr>
    </thead>

    <tbody>
    <ng-container *ngIf="!loading">
        <tr *ngFor="let row of data.getRows(); let idx = index"
            role="button"
            [class.is-selected]="row.isSelected"
            [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
            [ngStyle]="rowStyle"
            [ngClass]="getRowStyle(row)"
            (keyup)="onRowKeyUp(row, $event)">

            <!-- Actions (left) -->
            <td *ngIf="actions && actionsPosition === 'left'">
                <button mat-icon-button [matMenuTriggerFor]="menu"
                    [attr.data-automation-id]="'action_menu_' + idx">
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item *ngFor="let action of getRowActions(row)"
                        [attr.data-automation-id]="action.title"
                        [disabled]="action.disabled"
                        (click)="onExecuteRowAction(row, action)">
                        <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                        <span>{{ action.title | translate }}</span>
                    </button>
                </mat-menu>
            </td>

            <td *ngIf="multiselect">
                <mat-checkbox
                    [checked]="row.isSelected"
                    (change)="onCheckboxChange(row, $event)">
                </mat-checkbox>
            </td>
            <td *ngFor="let col of data.getColumns()"
                class="adf-data-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
                tabindex="0"
                (click)="onRowClick(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">
                            <mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
                            <mat-icon *ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected" >
                            </mat-icon>

                            <img *ngIf="!isIconValue(row, col) && !row.isSelected"
                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                 src="{{ data.getValue(row, col) }}"
                                 (error)="onImageLoadingError($event)">
                        </div>
                        <div *ngSwitchCase="'icon'"  class="cell-value">
                            <span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
                            <mat-icon>{{ data.getValue(row, col) }}</mat-icon>
                        </div>
                        <div *ngSwitchCase="'date'"  class="cell-value"
                            [attr.data-automation-id]="'date_' + data.getValue(row, col)">
                            <adf-date-cell
                                [data]="data"
                                [column]="col"
                                [row]="row"
                                [tooltip]="getCellTooltip(row, col)">
                            </adf-date-cell>
                        </div>
                        <div *ngSwitchCase="'location'" class="cell-value"
                            [attr.data-automation-id]="'location' + data.getValue(row, col)">
                            <adf-location-cell
                                [data]="data"
                                [column]="col"
                                [row]="row"
                                [tooltip]="getCellTooltip(row, col)">
                            </adf-location-cell>
                        </div>
                        <div *ngSwitchCase="'fileSize'" class="cell-value"
                            [attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
                            <adf-filesize-cell
                                [data]="data"
                                [column]="col"
                                [row]="row"
                                [tooltip]="getCellTooltip(row, col)">
                            </adf-filesize-cell>
                        </div>
                        <div *ngSwitchCase="'text'" class="cell-value"
                            [attr.data-automation-id]="'text_' + data.getValue(row, col)">
                            <adf-datatable-cell
                                [data]="data"
                                [column]="col"
                                [row]="row"
                                [tooltip]="getCellTooltip(row, col)">
                            </adf-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 mat-icon-button [matMenuTriggerFor]="menu"
                    [attr.data-automation-id]="'action_menu_' + idx">
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item *ngFor="let action of getRowActions(row)"
                        [attr.data-automation-id]="action.title"
                        [disabled]="action.disabled"
                        (click)="onExecuteRowAction(row, action)">
                        <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                        <span>{{ action.title | translate }}</span>
                    </button>
                </mat-menu>
            </td>

        </tr>
        <tr *ngIf="data.getRows().length === 0">
            <td class="adf-no-content-container"
                [attr.colspan]="1 + data.getColumns().length">
                <ng-template *ngIf="noContentTemplate"
                             ngFor [ngForOf]="[data]"
                             [ngForTemplate]="noContentTemplate">
                </ng-template>
                <ng-content select="adf-empty-list"></ng-content>
            </td>
        </tr>
    </ng-container>
    <tr *ngIf="loading">
        <td class="adf-loading-content-container"
            [attr.colspan]="1 + data.getColumns().length">
            <ng-template *ngIf="loadingTemplate"
                         ngFor [ngForOf]="[data]"
                         [ngForTemplate]="loadingTemplate">
            </ng-template>
        </td>
    </tr>
    </tbody>
</table>