[ADF-2322] Card view datatable and documentlist (#2968)

* move table in style * Enable the cardview mode * add button in demo shell to change view add missing translation terms toolbar * missing comma * add example in demo shell * style loading and images * border card container * document list tests * test check class and input * test fix * fix test process services * more documentation * rirpristinate base pacakge integgration * remove test color
2025-05-12 17:04:57 +00:00 · 2018-02-21 09:57:01 +00:00 · 2018-02-21 09:57:01 +00:00 · 62d5dd1b30
commit 62d5dd1b30
parent ff887772e3
25 changed files with 699 additions and 273 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@ -43,6 +43,7 @@
        "DESCRIPTION_UPLOAD" : "Enable upload",
        "ENABLE_INFINITE_SCROLL":"Enable Infinite Scrolling",
        "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
+        "RECENT" : "Recent Files",
        "COLUMNS": {
            "DISPLAY_NAME": "Display name",
            "TAG": "Tag",
@ -50,6 +51,13 @@
            "CREATED_ON": "Created on",
            "CREATED": "Created"
        },
+         "TOOLBAR": {
+           "CARDVIEW":"Card view mode",
+           "NEW_FOLDER":"New folder",
+           "EDIT_FOLDER":"Edit folder",
+           "DOWNLOAD":"Download",
+           "DELETE":"Delete"
+         },
        "ACTIONS": {
            "DOWNLOAD": "Download",
            "FOLDER": {
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@ -1,15 +1,33 @@
 <div class="container">
+
+    <div class="adf-recent-container">
+        <mat-list>
+            <mat-list-item><mat-icon>history</mat-icon>{{ 'DOCUMENT_LIST.RECENT' | translate }}</mat-list-item>
+            <mat-divider></mat-divider>
+        </mat-list>
+
+        <adf-document-list
+            [currentFolderId]="'-recent-'"
+            locationFormat="/files"
+            [cardview]="true"
+            [showHeader]="false"
+            [maxItems]="5"
+            (preview)="showFile($event)"
+            selectionMode="null">
+        </adf-document-list>
+    </div>
+
    <div class="adf-site-container-style" id="site-container">
        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
        </adf-sites-dropdown>
    </div>
    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
        <adf-upload-drag-area fxFlex="1 1 auto"
-            [disabled]="disableDragArea"
-            [parentId]="getDocumentListCurrentFolderId()"
-            [versioning]="versioning"
-            [adf-node-permission]="'create'"
-            [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
+                              [disabled]="disableDragArea"
+                              [parentId]="getDocumentListCurrentFolderId()"
+                              [versioning]="versioning"
+                              [adf-node-permission]="'create'"
+                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
            <div *ngIf="errorMessage" class="error-message">
                <button (click)="resetError()" mat-icon-button>
                    <mat-icon>highlight_off</mat-icon>
@ -35,26 +53,35 @@
                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>

                <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                    <button
+                        mat-icon-button
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
+                        (click)="toogleCardview()">
+                        <mat-icon>view_comfy</mat-icon>
+                    </button>
                    <button
                        mat-icon-button
                        [disabled]="!canCreateContent(documentList.folderNode)"
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
                        [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!canEditFolder(documentList.selection)"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!hasSelection(documentList.selection)"
-                            title="Download"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
                            [adfNodeDownload]="documentList.selection">
                        <mat-icon>get_app</mat-icon>
                    </button>
                    <button mat-icon-button
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                            (delete)="documentList.reload()"
                            [adf-delete]="documentList.selection">
                        <mat-icon>delete</mat-icon>
@ -91,29 +118,34 @@
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
+                    <button mat-menu-item
+                            (click)="toogleCardview()">
+                        <mat-icon>view_comfy</mat-icon>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
+                    </button>
                    <button mat-menu-item
                            [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
-                        <span>New folder</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!canEditFolder(documentList.selection)"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
-                        <span>Edit folder</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!hasSelection(documentList.selection)"
                            title="Download"
                            (click)="downloadNodes(documentList.selection)">
                        <mat-icon>get_app</mat-icon>
-                        <span>Download</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection">
                        <mat-icon>delete</mat-icon>
-                        <span>Delete</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}</span>
                    </button>
                </mat-menu>
            </adf-toolbar>
@ -128,6 +160,7 @@
                [allowDropFiles]="true"
                [selectionMode]="selectionMode"
                [multiselect]="multiselect"
+                [cardview]="cardview"
                [node]="nodeResult"
                (error)="onNavigationError($event)"
                (success)="resetError()"
@ -276,13 +309,13 @@
                <ng-template #choose_document_template>
                    <div class="adf-manage-versions-empty">
                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
-                      {{'VERSION.CHOOSE_FILE' | translate}}
+                        {{'VERSION.CHOOSE_FILE' | translate}}
                    </div>
                </ng-template>
                <ng-template #no_permission_to_versions>
                    <div class="adf-manage-versions-no-permission">
                        <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
-                      {{'VERSION.NO_PERMISSION' | translate}}
+                        {{'VERSION.NO_PERMISSION' | translate}}
                    </div>
                </ng-template>
            </div>
@ -292,7 +325,7 @@

 <context-menu-holder></context-menu-holder>

-<div *ngIf="processId" >
+<div *ngIf="processId">
    <adf-start-process
        [values]="formValues"
        [appId]="processId">
@ -338,9 +371,9 @@
        </section>

        <section>
-          <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
-            translate}}
-          </mat-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
+                translate}}
+            </mat-slide-toggle>
        </section>

        <section>
@ -358,15 +391,15 @@
        <h5>Upload</h5>
        <section *ngIf="acceptedFilesTypeShow">
            <mat-form-field floatPlaceholder="float">
-                <input  matInput
-                        placeholder="Extension accepted"
-                        [(ngModel)]="acceptedFilesType"
-                        data-automation-id="accepted-files-type">
+                <input matInput
+                       placeholder="Extension accepted"
+                       [(ngModel)]="acceptedFilesType"
+                       data-automation-id="accepted-files-type">
            </mat-form-field>
        </section>
        <section *ngIf="maxSizeShow">
            <mat-form-field>
-                <input matInput type="number"  placeholder="Max file size" [(ngModel)]="maxFilesSize"
+                <input matInput type="number" placeholder="Max file size" [(ngModel)]="maxFilesSize"
                       data-automation-id="max-files-size">
            </mat-form-field>
        </section>
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@ -30,8 +30,8 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
    background: red !important;
 }

-adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
-    fill: #00bcd4;
+adf-document-list ::ng-deep .adf-datatable-selected > svg {
+    fill: #00bcd4 !important;
 }

 .adf-site-container-style {
@ -116,6 +116,10 @@ adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.
    letter-spacing: -1px;
 }

+.adf-recent-container{
+    border: 1px solid rgba(0, 0, 0, 0.07);
+}
+
@media (max-width: $minimumDocumentListWidth) {
    adf-document-list ::ng-deep adf-datatable  {
        & ::ng-deep .adf-data-table-cell--fileSize {
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@ -49,6 +49,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    fileNodeId: any;
    showViewer = false;
    showVersions = false;
+    cardview = false;

    toolbarColor = 'default';

@ -423,4 +424,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    onPrevPage(event: Pagination): void {
        this.turnedPreviousPage.emit(event);
    }
+
+    toogleCardview(event: Pagination): void {
+        this.cardview = !this.cardview;
+    }
 }
--- a/demo-shell/tsconfig.json
+++ b/demo-shell/tsconfig.json
@ -18,14 +18,6 @@
    "lib": [
      "es2016",
      "dom"
-    ],
-    "paths": {
-      "rxjs/*": [
-        "../node_modules/rxjs/*"
-      ],
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ]
-    }
+    ]
  }
 }
--- a/docs/datatable.component.md
+++ b/docs/datatable.component.md
@ -18,6 +18,7 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
    -   [Supplying data for the table](#supplying-data-for-the-table)
    -   [Customizing columns](#customizing-columns)
    -   [DataTable DOM Events](#datatable-dom-events)
+    -   [Card view](#card-view)
    -   [Custom Empty content template](#custom-empty-content-template)
    -   [Loading content template](#loading-content-template)
    -   [Events](#events-1)
@ -133,8 +134,9 @@ export class DataTableDemo {
 | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
 | loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
 | showHeader | boolean | true | Toggles header visibility |
+| cardview | boolean | true | enable the cardview mode |
 | selection | DataRow\[] | \[] | Contains selected rows |
-
+    
 ### Events

 | Name | Description |
@ -192,6 +194,20 @@ onRowClick(event) {

 ![](docassets/images/datatable-dom-events.png)

+### Card view
+
+If you want enable the card view mode you need to set to true the input parameter [cardview] :
+
+```html
+<adf-datatable
+    [data]="data"
+    [cardview]="true">
+</adf-datatable
+```
+
+![card-view](docassets/images/document-list-card-view.png)
+
+
 ### Custom Empty content template

 You can add a template that will be shown when there are no results in your datatable:
--- a/docs/docassets/images/document-list-card-view.png
+++ b/docs/docassets/images/document-list-card-view.png
--- a/docs/document-list.component.md
+++ b/docs/document-list.component.md
@ -14,6 +14,7 @@ Displays the documents from a repository.
 -   [Details](#details)

    -   [DOM Events](#dom-events)
+    -   [Card view](#card-view)
    -   [Pagination strategy](#pagination-strategy)
    -   [Data Sources](#data-sources)
    -   [Setting default folder](#setting-default-folder)
@ -46,7 +47,7 @@ Displays the documents from a repository.
 ```

 ### Properties
-
+    
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | permissionsStyle | `PermissionStyleModel[]` | `[]` | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the Permission Style model page for further details and examples. |
@ -73,6 +74,8 @@ Displays the documents from a repository.
 | maxItems | `number` |  | Default value is stored into user preference settings  |
 | skipCount | `number` | `0` | Number of elements to skip over for pagination purposes  |
 | enableInfiniteScrolling | `boolean` | `false` | Set document list to work in infinite scrolling mode  |
+| showHeader | `boolean` | `true` |  Toggles header visibility   |
+| cardview | `boolean` | `false` |  Enable the cardview mode    |

 ### Events

@ -127,6 +130,20 @@ Below is a basic example of handling DOM events in the parent elements.
 </div>
 ```

+### Card view
+
+If you want enable the card view mode you need to set to true the input parameter [cardview] :
+
+```html
+<adf-document-list
+    [currentFolderId]="'-my-'"
+    [cardview]="true">
+</adf-document-list>
+```
+
+![card-view](docassets/images/document-list-card-view.png)
+
+
 ### Pagination strategy

 The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination. 
--- a/integration/base_ver_2_app/package.json
+++ b/integration/base_ver_2_app/package.json
@ -31,7 +31,7 @@
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "^2.1.0-4c702fe0041642c09f12fb939014cf70671d8ed8",
+    "alfresco-js-api": "2.0.0",
    "chart.js": "2.5.0",
    "classlist.js": "1.1.20150312",
    "core-js": "2.4.1",
--- a/integration/base_ver_2_app/tsconfig.json
+++ b/integration/base_ver_2_app/tsconfig.json
@ -17,14 +17,6 @@
    "lib": [
      "es2016",
      "dom"
-    ],
-    "paths": {
-      "rxjs/*": [
-        "../node_modules/rxjs/*"
-      ],
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ]
-    }
+    ]
  }
-}
+}
--- a/lib/content-services/document-list/components/document-list.component.html
+++ b/lib/content-services/document-list/components/document-list.component.html
@ -9,8 +9,9 @@
    [rowStyle]="rowStyle"
    [rowStyleClass]="rowStyleClass"
    [loading]="loading"
+    [cardview]="cardview"
    [noPermission]="noPermission"
-    [showHeader]="!isEmpty()"
+    [showHeader]="!isEmpty() && showHeader"
    (showRowContextMenu)="onShowRowContextMenu($event)"
    (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)"
--- a/lib/content-services/document-list/components/document-list.component.scss
+++ b/lib/content-services/document-list/components/document-list.component.scss
@ -2,7 +2,7 @@
    $foreground: map-get($theme, foreground);
    $accent: map-get($theme, accent);

-    adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+    .adf-datatable-selected > svg {
        fill: mat-color($accent);
        margin-top: -4px;
        margin-left: -4px;
--- a/lib/content-services/document-list/components/document-list.component.spec.ts
+++ b/lib/content-services/document-list/components/document-list.component.spec.ts
@ -181,7 +181,65 @@ describe('DocumentList', () => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(element.querySelector('#adf-document-list-loading')).toBeDefined();
+            expect(element.querySelector('.adf-document-list-loading')).toBeDefined();
+            done();
+        });
+    });
+
+    it('should hide the header if showHeader is false', (done) => {
+        documentList.showHeader = false;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-datatable-header')).toBe(null);
+            done();
+        });
+    });
+
+    it('should show the header if showHeader is true', (done) => {
+        documentList.showHeader = true;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-datatable-header')).toBeDefined();
+            done();
+        });
+    });
+
+    it('should reset selection upon reload', () => {
+        spyOn(documentList, 'resetSelection').and.callThrough();
+
+        documentList.reload();
+        fixture.detectChanges();
+
+        expect(documentList.resetSelection).toHaveBeenCalled();
+    });
+
+    it('should use the cardview style if cardview is true', (done) => {
+        documentList.cardview = true;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-data-table-card')).toBeDefined();
+            done();
+        });
+    });
+
+    it('should use the base document list style if cardview is false', (done) => {
+        documentList.cardview = false;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-data-table-card')).toBe(null);
+            expect(element.querySelector('.adf-data-table')).toBeDefined();
            done();
        });
    });
--- a/lib/content-services/document-list/components/document-list.component.ts
+++ b/lib/content-services/document-list/components/document-list.component.ts
@ -71,6 +71,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte

    @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;

+    /* Enable the cardview mode */
+    @Input()
+    cardview: boolean = false;
+
    /** Define a set of CSS styles styles to apply depending on the permission
     * of the user on that node. See the Permission Style model
     * page for further details and examples.
@ -86,6 +90,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
    @Input()
    navigate: boolean = true;

+    /** Toggles the header */
+    @Input()
+    showHeader: boolean = true;
+
    /** User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
    @Input()
    navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@ -1,187 +1,212 @@
-<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 && !noPermission">
-        <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)">
-
+<div
+    *ngIf="data" class="full-width adf-data-table-card"
+    [class.adf-data-table-card]="cardview"
+    [class.adf-data-table]="!cardview">
+    <div *ngIf="showHeader && !loading" class="adf-datatable-header">
+        <div class="adf-datatable-row" *ngIf="!cardview">
            <!-- 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>
+            <div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
+                <span class="sr-only">Actions</span>
+            </div>
+            <!-- Columns -->
+            <div *ngIf="multiselect" class="adf-datatable-table-cell-header">
+                <mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></mat-checkbox>
+            </div>
+            <div class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-table-cell-header"
+                 *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>
+            </div>
+            <!-- Actions (right) -->
+            <div *ngIf="actions && actionsPosition === 'right'" class="actions-column adf-datatable-table-cell-header">
+                <span class="sr-only">Actions</span>
+            </div>
+        </div>
+        <mat-form-field *ngIf="cardview">
+            <mat-select [value]="getSortingKey()">
+                <mat-option *ngFor="let col of data.getColumns()"
+                            [value]="col.key"
+                            (click)="onColumnHeaderClick(col)"
+                            (keyup.enter)="onColumnHeaderClick(col)">
+                    {{ col.title | translate}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+
+    </div>
+
+    <div class="adf-datatable-body">
+        <ng-container *ngIf="!loading && !noPermission">
+            <div *ngFor="let row of data.getRows(); let idx = index"
+                 class="adf-datatable-row"
+                 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) -->
+                <div *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-table-cell">
+                    <button mat-icon-button [matMenuTriggerFor]="menu"
+                            [attr.id]="'action_menu_left_' + idx"
+                            [attr.data-automation-id]="'action_menu_' + idx">
+                        <mat-icon>more_vert</mat-icon>
                    </button>
-                </mat-menu>
-            </td>
+                    <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>
+                </div>

-            <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>
+                <div *ngIf="multiselect" class="adf-datatable-table-cell adf-datatable-table-checkbox">
+                    <mat-checkbox
+                        [checked]="row.isSelected"
+                        (change)="onCheckboxChange(row, $event)">
+                    </mat-checkbox>
+                </div>
+                <div *ngFor="let col of data.getColumns()"
+                     class="adf-data-table-cell adf-datatable-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
+                     [attr.title]="col.title | translate"
+                     [attr.filename]="getFilename(row)"
+                     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 class="adf-datatable-selected"
+                                          *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">
+                                <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>
+                        </ng-container>
+                    </div>
+                    <div *ngIf="col.template" class="cell-container">
+                        <ng-container
+                            [ngTemplateOutlet]="col.template"
+                            [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
+                        </ng-container>
+                    </div>
                </div>
-                <div *ngIf="col.template" class="cell-container">
-                    <ng-container
-                        [ngTemplateOutlet]="col.template"
-                        [ngTemplateOutletContext]="{ $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>
+                <!-- Actions (right) -->
+                <div *ngIf="actions && actionsPosition === 'right'"
+                     class="adf-datatable-table-cell alfresco-datatable__actions-cell">
+                    <button mat-icon-button [matMenuTriggerFor]="menu"
+                            [attr.id]="'action_menu_right_' + idx"
+                            [attr.data-automation-id]="'action_menu_' + idx">
+                        <mat-icon>more_vert</mat-icon>
                    </button>
-                </mat-menu>
-            </td>
+                    <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>
+                </div>

-        </tr>
-        <tr *ngIf="data.getRows().length === 0">
-            <td class="adf-no-content-container"
-                [attr.colspan]="1 + data.getColumns().length">
-                <ng-template *ngIf="noContentTemplate"
+            </div>
+            <div *ngIf="data.getRows().length === 0"
+                 [class.adf-datatable-row]="!cardview"
+                 [class.adf-data-table-card-empty]="cardview">
+                <div class="adf-no-content-container adf-datatable-table-cell"
+                     [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>
+                </div>
+            </div>
+        </ng-container>
+        <div *ngIf="!loading && noPermission"
+             [class.adf-datatable-row]="!cardview"
+             [class.adf-data-table-card-permissions]="cardview">
+             class="adf-no-permission__row">
+            <div class="adf-no-permission__cell adf-no-content-container adf-datatable-table-cell">
+                <ng-template *ngIf="noPermissionTemplate"
                             ngFor [ngForOf]="[data]"
-                             [ngForTemplate]="noContentTemplate">
+                             [ngForTemplate]="noPermissionTemplate">
                </ng-template>
-                <ng-content select="adf-empty-list"></ng-content>
-            </td>
-        </tr>
-    </ng-container>
-    <tr *ngIf="!loading && noPermission" class="adf-no-permission__row">
-        <td class="adf-no-permission__cell">
-            <ng-template *ngIf="noPermissionTemplate"
-                         ngFor [ngForOf]="[data]"
-                         [ngForTemplate]="noPermissionTemplate">
-            </ng-template>
-        </td>
-    </tr>
-    <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>
+            </div>
+        </div>
+        <div *ngIf="loading"
+             [class.adf-datatable-row]="!cardview"
+             [class.adf-data-table-card-loading]="cardview">
+            <div class="adf-datatable-table-cell"
+                 [attr.colspan]="1 + data.getColumns().length">
+                <ng-template *ngIf="loadingTemplate"
+                             ngFor [ngForOf]="[data]"
+                             [ngForTemplate]="loadingTemplate">
+                </ng-template>
+            </div>
+        </div>
+    </div>
+</div>
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@ -1,4 +1,3 @@
-
@mixin adf-datatable-theme($theme) {
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
@ -26,7 +25,148 @@
    $data-table-cell-top: $data-table-card-padding / 2;
    $data-table-drag-border: 1px dashed rgb(68, 138, 255);

+    .adf-data-table-card {
+
+        border: 1px solid mat-color($foreground, divider);
+
+        .sr-only {
+        }
+
+        .adf-datatable-body {
+            flex-flow: row wrap;
+            display: flex;
+
+            width: 100%;
+            flex-direction: row;
+            justify-content: space-between;
+
+            &:after {
+                content: "";
+                flex: auto;
+            }
+
+            .adf-datatable-row {
+                transition: all 0.3s ease;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                flex: 0 1 24%;
+
+                width: 288px !important;
+                max-width: 288px !important;
+                min-width: 288px !important;
+
+                height: 200px !important;
+
+                overflow: hidden !important;
+                margin: 6px;
+                padding: 15px;
+
+                @include mat-elevation-transition;
+                @include mat-overridable-elevation(2);
+            }
+
+            .is-selected {
+                background: mat-color($primary, 100);
+                padding-bottom: 31px;
+            }
+
+            .adf-data-table-card-permission {
+                width: 100%;
+                min-height: 250px;
+
+                .adf-datatable-table-cell {
+                    height: 240px !important;
+                }
+            }
+
+            .adf-data-table-card-loading {
+                width: 100%;
+                min-height: 250px;
+
+                .adf-datatable-table-cell {
+                    height: 240px !important;
+                }
+            }
+
+            .adf-data-table-card-empty {
+                width: 100%;
+                min-height: 380px;
+
+                .adf-datatable-table-cell {
+                    height: 370px !important;
+                }
+            }
+
+            .adf-datatable-table-cell {
+                text-align: left;
+                flex: 0 1 24%;
+                height: 136px !important;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                outline: none;
+
+                &:before {
+                    margin-left: 10px;
+                    text-align: left;
+                    content: attr(title);
+                    color: mat-color($foreground, text, 0.4);
+                    float: left;
+                    width: 140px;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
+            }
+            .alfresco-datatable__actions-cell {
+                position: absolute;
+                height: 42px !important;
+                width: 42px !important;
+                right: 0px;
+                text-align: right;
+            }
+
+            .image-table-cell {
+                margin: 8px;
+                padding: 4px;
+                overflow: visible;
+                border-bottom-color: mat-color($foreground, divider);
+                border-bottom-width: 1px;
+                border-bottom-style: solid;
+
+                .cell-container {
+                    float: left;
+                    width: 42px;
+                }
+
+                &:after {
+                    margin: 2px;
+                    content: attr(filename);
+                    float: left;
+                    width: 140px;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+
+            .adf-datatable-table-checkbox {
+                margin: 8px;
+            }
+
+        }
+
+        .adf-datatable-header {
+            margin-right: 18px;
+            float: right;
+        }
+
+    }
+
    .adf-data-table {
+        display: table;
        width: 100%;
        position: relative;
        border: $data-table-dividers;
@ -38,12 +178,36 @@
        border-collapse: unset;
        border-spacing: 0;

-        thead {
-            padding-bottom: 3px;
+        .adf-datatable-row {
+            display: table-row;
+            vertical-align: inherit;
+            border-color: inherit;
        }

-        tbody {
-            tr {
+        .adf-datatable-body {
+            display: table-row-group;
+            vertical-align: middle;
+            border-color: inherit;
+        }
+
+        .adf-datatable-table-cell {
+            display: table-cell;
+        }
+
+        .adf-datatable-table-cell-header {
+            display: table-cell;
+        }
+
+        .adf-datatable-header {
+            padding-bottom: 3px;
+            display: table-header-group;
+            vertical-align: middle;
+            border-color: inherit;
+        }
+
+        .adf-datatable-body {
+
+            .adf-datatable-row {
                cursor: pointer;
                position: relative;
                height: $data-table-row-height;
@ -73,7 +237,7 @@
            }
        }

-        td, th {
+        .adf-datatable-table-cell, .adf-datatable-table-cell-header {
            padding: 0 $data-table-column-padding 12px $data-table-column-padding;
            text-align: right;

@ -93,7 +257,7 @@
            }
        }

-        td {
+        .adf-datatable-table-cell {
            color: mat-color($foreground, text);
            position: relative;
            vertical-align: middle;
@ -105,7 +269,7 @@
            @include no-select;
        }

-        th {
+        .adf-datatable-table-cell-header {
            @include no-select;
            cursor: pointer;
            position: relative;
@ -153,7 +317,7 @@

        .adf-data-table-cell {
            text-align: left;
-            height: 100%;            
+            height: 100%;

            &--text {
                text-align: left;
@ -182,7 +346,7 @@

            .cell-container {
                display: flex;
-                align-items: center;    
+                align-items: center;
            }
        }

@ -202,6 +366,7 @@
        /* Loading folder */
        .adf-loading-content-container {
            padding: 0 !important;
+            width: 100%;

            & > img {
                width: 100%;
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@ -51,6 +51,86 @@ describe('DataTable', () => {
        element = fixture.debugElement.nativeElement;
    });

+    it('should use the cardview style if cardview is true', () => {
+        let newData = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.cardview = true;
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('.adf-data-table-card')).not.toBeNull();
+        expect(element.querySelector('.adf-data-table')).toBeNull();
+    });
+
+    it('should use the cardview style if cardview is false', () => {
+        let newData = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.cardview = false;
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('.adf-data-table-card')).toBeNull();
+        expect(element.querySelector('.adf-data-table')).not.toBeNull();
+    });
+
+    it('should hide the header if showHeader is false', () => {
+        let newData = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.showHeader = false;
+        dataTable.loading = false;
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('.adf-datatable-header')).toBe(null);
+    });
+
+    it('should show the header if showHeader is true', () => {
+        let newData = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+        dataTable.showHeader = true;
+        dataTable.loading = false;
+
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('.adf-datatable-header')).toBeDefined();
+    });
+
    it('should emit "sorting-changed" DOM event', (done) => {
        const column = new ObjectDataColumn({ key: 'name', sortable: true, direction: 'asc' });
        dataTable.data = new ObjectDataTableAdapter(
@ -206,32 +286,40 @@ describe('DataTable', () => {
    });

    it('should put actions menu to the right by default', () => {
-        dataTable.data = new ObjectDataTableAdapter([], [
-            <DataColumn> {},
-            <DataColumn> {},
-            <DataColumn> {}
-        ]);
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' },
+                { name: '3' },
+                { name: '4' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
        dataTable.actions = true;
        fixture.detectChanges();

-        let headers = element.querySelectorAll('th');
-        expect(headers.length).toBe(4);
-        expect(headers[headers.length - 1].classList.contains('actions-column')).toBeTruthy();
+        let actions = element.querySelectorAll('[id^=action_menu_right]');
+        expect(actions.length).toBe(4);
    });

    it('should put actions menu to the left', () => {
-        dataTable.data = new ObjectDataTableAdapter([], [
-            <DataColumn> {},
-            <DataColumn> {},
-            <DataColumn> {}
-        ]);
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' },
+                { name: '3' },
+                { name: '4' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
        dataTable.actions = true;
        dataTable.actionsPosition = 'left';
        fixture.detectChanges();

-        let headers = element.querySelectorAll('th');
-        expect(headers.length).toBe(4);
-        expect(headers[0].classList.contains('actions-column')).toBeTruthy();
+        let actions = element.querySelectorAll('[id^=action_menu_left]');
+        expect(actions.length).toBe(4);
    });

    it('should initialize default adapter', () => {
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@ -53,6 +53,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
    @Input()
    data: DataTableAdapter;

+    /* Enable the cardview mode */
+    @Input()
+    cardview: boolean = false;
+
    /* The rows that the datatable will show */
    @Input()
    rows: any[] = [];
@ -483,6 +487,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
        return `${row.cssClass} ${this.rowStyleClass}`;
    }

+    getFilename(row: DataRow): string {
+        return row.getValue('name');
+    }
+
+    getSortingKey(): string {
+        if (this.data.getSorting()) {
+            return this.data.getSorting().key;
+        }
+    }
+
    private selectRow(row: DataRow, value: boolean) {
        if (row) {
            row.isSelected = value;
--- a/lib/core/form/components/form-list.component.spec.ts
+++ b/lib/core/form/components/form-list.component.spec.ts
@ -16,7 +16,6 @@
 */

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { TranslationService } from '../../index';
 import { DataTableModule } from '../../datatable/datatable.module';
 import { DataColumnModule } from '../../data-column/data-column.module';
@ -31,6 +30,7 @@ describe('TaskAttachmentList', () => {
    let component: FormListComponent;
    let fixture: ComponentFixture<FormListComponent>;
    let service: FormService;
+    let element: any;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
@ -59,7 +59,7 @@ describe('TaskAttachmentList', () => {

        fixture = TestBed.createComponent(FormListComponent);
        component = fixture.componentInstance;
-
+        element = fixture.debugElement.nativeElement;
        service = TestBed.get(FormService);

    }));
@ -71,12 +71,11 @@ describe('TaskAttachmentList', () => {
        ]));

        component.ngOnChanges({});
+        fixture.detectChanges();

-        fixture.whenStable()
-            .then(() => {
-                fixture.detectChanges();
-                expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2);
-            });
-    }));
+        fixture.whenStable().then(() => {
+            expect(element.querySelectorAll('.adf-datatable-body > .adf-datatable-row').length).toBe(2);
+        });
+    });

 });
--- a/lib/process-services/attachment/process-attachment-list.component.spec.ts
+++ b/lib/process-services/attachment/process-attachment-list.component.spec.ts
@ -155,10 +155,10 @@ describe('ProcessAttachmentListComponent', () => {
    it('should display attachments when the process has attachments', async(() => {
        let change = new SimpleChange(null, '123', true);
        component.ngOnChanges({ 'processInstanceId': change });
+        fixture.detectChanges();

        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2);
+            expect(fixture.debugElement.queryAll(By.css('.adf-datatable-body > .adf-datatable-row')).length).toBe(2);
        });
    }));

--- a/lib/process-services/attachment/task-attachment-list.component.spec.ts
+++ b/lib/process-services/attachment/task-attachment-list.component.spec.ts
@ -138,10 +138,10 @@ describe('TaskAttachmentList', () => {
    it('should display attachments when the task has attachments', async(() => {
        let change = new SimpleChange(null, '123', true);
        component.ngOnChanges({ 'taskId': change });
+        fixture.detectChanges();

        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2);
+            expect(fixture.debugElement.queryAll(By.css('.adf-datatable-body > .adf-datatable-row')).length).toBe(2);
        });
    }));

--- a/lib/process-services/people/components/people-search/people-search.component.spec.ts
+++ b/lib/process-services/people/components/people-search/people-search.component.spec.ts
@ -94,7 +94,7 @@ describe('PeopleSearchComponent', () => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            let gatewayElement: any = element.querySelector('#search-people-list tbody');
+            let gatewayElement: any = element.querySelector('#search-people-list .adf-datatable-body');
            expect(gatewayElement).not.toBeNull();
            expect(gatewayElement.children.length).toBe(2);
            done();
@ -136,7 +136,7 @@ describe('PeopleSearchComponent', () => {
        fixture.whenStable()
            .then(() => {
                fixture.detectChanges();
-                let gatewayElement: any = element.querySelector('#search-people-list tbody');
+                let gatewayElement: any = element.querySelector('#search-people-list .adf-datatable-body');
                expect(gatewayElement).not.toBeNull();
                expect(gatewayElement.children.length).toBe(1);
                done();
--- a/lib/process-services/people/components/people/people.component.spec.ts
+++ b/lib/process-services/people/components/people/people.component.spec.ts
@ -113,7 +113,7 @@ describe('PeopleComponent', () => {
        it('should show people involved', async(() => {
            fixture.whenStable()
                .then(() => {
-                    let gatewayElement: any = element.querySelector('#assignment-people-list tbody');
+                    let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body');
                    expect(gatewayElement).not.toBeNull();
                    expect(gatewayElement.children.length).toBe(2);
                });
@ -127,7 +127,7 @@ describe('PeopleComponent', () => {
            fixture.whenStable()
                .then(() => {
                    fixture.detectChanges();
-                    let gatewayElement: any = element.querySelector('#assignment-people-list tbody');
+                    let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body');
                    expect(gatewayElement).not.toBeNull();
                    expect(gatewayElement.children.length).toBe(1);
                });
@ -141,7 +141,7 @@ describe('PeopleComponent', () => {
            fixture.whenStable()
                .then(() => {
                    fixture.detectChanges();
-                    let gatewayElement: any = element.querySelector('#assignment-people-list tbody');
+                    let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body');
                    expect(gatewayElement).not.toBeNull();
                    expect(gatewayElement.children.length).toBe(3);
                });
@ -220,7 +220,7 @@ describe('PeopleComponent', () => {
            fixture.whenStable()
                .then(() => {
                    fixture.detectChanges();
-                    let gatewayElement: any = element.querySelector('#assignment-people-list tbody');
+                    let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body');
                    expect(gatewayElement).not.toBeNull();
                    expect(gatewayElement.children.length).toBe(2);
                });
@ -234,7 +234,7 @@ describe('PeopleComponent', () => {
            fixture.whenStable()
                .then(() => {
                    fixture.detectChanges();
-                    let gatewayElement: any = element.querySelector('#assignment-people-list tbody');
+                    let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body');
                    expect(gatewayElement).not.toBeNull();
                    expect(gatewayElement.children.length).toBe(2);
                });
--- a/lib/process-services/task-list/components/task-list.component.ts
+++ b/lib/process-services/task-list/components/task-list.component.ts
@ -161,10 +161,10 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit, P
    isStreamLoaded = false;

    constructor(private taskListService: TaskListService,
-        private appConfig: AppConfigService,
-        private userPreferences: UserPreferencesService) {
+                private appConfig: AppConfigService,
+                private userPreferences: UserPreferencesService) {
        this.size = this.userPreferences.paginationSize;
-        this.pagination = new BehaviorSubject<Pagination>(<Pagination>{
+        this.pagination = new BehaviorSubject<Pagination>(<Pagination> {
            maxItems: this.size,
            skipCount: 0,
            totalItems: 0
@ -450,4 +450,4 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit, P
    get supportedPageSizes(): number[] {
        return this.userPreferences.getDifferentPageSizes();
    }
-}
+}
--- a/lib/tslint.json
+++ b/lib/tslint.json
@ -11,7 +11,8 @@
        ],
        "ban": [
          true,
-          "eval"
+          "eval",
+          "fdescribe"
        ],
        "class-name": true,
        "comment-format": [