Move 'pagination' from 'core' to 'datatable'

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

@@ -0,0 +1,91 @@
+<table
+    *ngIf="data"
+    class="mdl-data-table mdl-js-data-table mdl-shadow--2dp 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">
+        <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)}}">
+            </div>
+            <div *ngSwitchCase="'date'" class="cell-value">
+                {{data.getValue(row, col)}}
+            </div>
+            <div *ngSwitchCase="'text'" class="cell-value">
+                {{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" class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                [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>