diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index c0dfe43613..1a5960260f 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -69,6 +69,7 @@
     "DATATABLE": "Datatable",
     "DATATABLE_LAZY": "Datatable (Lazy)",
     "DOCUMENT_LIST": "Document List",
+    "TEMPLATE": "Template",
     "FORM": "Form",
     "FORM_LIST": "Form List",
     "FORM_LOADING": "Form Loading",
diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index 9991a33787..822fade736 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -75,7 +75,7 @@ import { CloudBreadcrumbsComponent } from './components/app-layout/cloud/cloud-b
 import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
 import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-demo.component';
 import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
-import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
+import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';
 import { CloudSettingsComponent } from './components/app-layout/cloud/cloud-settings.component';
 
@@ -138,7 +138,7 @@ import { CloudSettingsComponent } from './components/app-layout/cloud/cloud-sett
         StartProcessCloudDemoComponent,
         CloudBreadcrumbsComponent,
         CloudFiltersDemoComponent,
-        DocumentListDemoComponent,
+        TemplateDemoComponent,
         PeopleGroupCloudDemoComponent,
         CloudSettingsComponent
     ],
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index 513f1944f3..ce260006f2 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -46,7 +46,7 @@ import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud
 import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
 import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component';
 import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
-import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
+import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';
 
 export const appRoutes: Routes = [
@@ -341,8 +341,8 @@ export const appRoutes: Routes = [
                 loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
             },
             {
-                path: 'document-list',
-                component: DocumentListDemoComponent
+                path: 'template-list',
+                component: TemplateDemoComponent
             },
             {
                 path: 'task-list',
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index 648399e8df..c0cd5b311d 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -48,7 +48,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
         { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
         { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
-        { href: '/document-list', icon: 'list_alt', title: 'APP_LAYOUT.DOCUMENT_LIST' },
+        { href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
         { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
         { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
         { href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
diff --git a/demo-shell/src/app/components/document-list/document-list-demo.component.html b/demo-shell/src/app/components/template-list/template-demo.component.html
similarity index 100%
rename from demo-shell/src/app/components/document-list/document-list-demo.component.html
rename to demo-shell/src/app/components/template-list/template-demo.component.html
diff --git a/demo-shell/src/app/components/document-list/document-list-demo.component.ts b/demo-shell/src/app/components/template-list/template-demo.component.ts
similarity index 92%
rename from demo-shell/src/app/components/document-list/document-list-demo.component.ts
rename to demo-shell/src/app/components/template-list/template-demo.component.ts
index 5edf8b8ec6..5ccb082995 100644
--- a/demo-shell/src/app/components/document-list/document-list-demo.component.ts
+++ b/demo-shell/src/app/components/template-list/template-demo.component.ts
@@ -20,10 +20,10 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
 import { ObjectDataTableAdapter } from '@alfresco/adf-core';
 
 @Component({
-    selector: 'app-document-list',
-    templateUrl: './document-list-demo.component.html'
+    selector: 'app-template-list',
+    templateUrl: './template-demo.component.html'
 })
-export class DocumentListDemoComponent implements AfterViewChecked {
+export class TemplateDemoComponent implements AfterViewChecked {
 
     @ViewChild('defaultDocumentList')
     defaultDocumentListComponent: DocumentListComponent;
diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index b121a35e9d..577971ef96 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -3,7 +3,7 @@
     *ngIf="data" class="adf-full-width"
     [class.adf-data-table-card]="display === 'gallery'"
     [class.adf-data-table]="display === 'list'"
-    [class.adf-data-table--empty]="isEmpty()">
+    [class.adf-data-table--empty]="!isHeaderVisible()">
     <div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
         <div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
             <!-- Actions (left) -->
@@ -214,7 +214,7 @@
         <div *ngIf="loading"
              [class.adf-datatable-row]="display === 'list'"
              [class.adf-data-table-card-loading]="display === 'gallery'">
-            <div class="adf-datatable-table-cell">
+            <div class="adf-no-content-container adf-datatable-table-cell">
                 <ng-template *ngIf="loadingTemplate"
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="loadingTemplate">
@@ -222,4 +222,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index 406854dfdd..06712ee5a5 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -176,6 +176,22 @@ describe('DataTable', () => {
         expect(element.querySelector('.adf-datatable-header')).toBe(null);
     });
 
+    it('should hide the header if noPermission is true', () => {
+        let newData = new ObjectDataTableAdapter(
+        );
+
+        dataTable.noPermission = true;
+        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(
             [
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 0f384257ce..6e52a441e6 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -641,7 +641,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     }
 
     isHeaderVisible() {
-        return this.showHeader && !this.loading && !this.isEmpty();
+        return this.showHeader && !this.loading && !this.isEmpty() && !this.noPermission;
     }
 
     private emitRowSelectionEvent(name: string, row: DataRow) {