mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
96 lines
4.2 KiB
HTML
96 lines
4.2 KiB
HTML
<table
|
|
*ngIf="data"
|
|
class="mdl-data-table mdl-js-data-table full-width">
|
|
<thead>
|
|
<tr>
|
|
<!-- Columns -->
|
|
<th *ngIf="multiselect">
|
|
<label
|
|
class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
|
|
[class.is-checked]="isSelectAllChecked"
|
|
for="table-header"
|
|
(click)="onSelectAllClick($event)">
|
|
<input type="checkbox" id="table-header" class="mdl-checkbox__input" />
|
|
</label>
|
|
</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 -->
|
|
<th *ngIf="actions">
|
|
<span class="sr-only">Actions</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0">
|
|
<td *ngIf="multiselect">
|
|
<label
|
|
class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
|
|
[attr.for]="'row[' + idx + ']'"
|
|
[class.is-checked]="row.isSelected">
|
|
<input type="checkbox" [attr.id]="'row[' + idx + ']'" class="mdl-checkbox__input" [(ngModel)]="row.isSelected" />
|
|
</label>
|
|
</td>
|
|
<td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
|
|
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)">
|
|
<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="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
|
|
{{data.getValue(row, col)}}
|
|
</div>
|
|
<div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
|
|
{{data.getValue(row, col)}}
|
|
</div>
|
|
<span *ngSwitchDefault class="cell-value">
|
|
<!-- empty cell for unknown column type -->
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td *ngIf="actions">
|
|
<!-- action menu -->
|
|
<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.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>
|