fix empty datatable hiding the header (#3003)

lib/core/datatable/components/datatable/datatable.component.html

@@ -2,7 +2,7 @@
     *ngIf="data" class="full-width"
     [class.adf-data-table-card]="display === 'gallery'"
     [class.adf-data-table]="display === 'list'">
-    <div *ngIf="showHeader && !loading" class="adf-datatable-header">
+    <div *ngIf="isHeaderVisible()" class="adf-datatable-header">
         <div class="adf-datatable-row" *ngIf="display === 'list'">
             <!-- Actions (left) -->
             <div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
@@ -173,11 +173,10 @@
                 </div>
 
             </div>
-            <div *ngIf="data.getRows().length === 0"
+            <div *ngIf="isEmpty()"
                  [class.adf-datatable-row]="display === 'list'"
                  [class.adf-data-table-card-empty]="display === 'gallery'">
-                <div class="adf-no-content-container adf-datatable-table-cell"
-                     [attr.colspan]="1 + data.getColumns().length">
+                <div class="adf-no-content-container adf-datatable-table-cell">
                     <ng-template *ngIf="noContentTemplate"
                                  ngFor [ngForOf]="[data]"
                                  [ngForTemplate]="noContentTemplate">
@@ -200,8 +199,7 @@
         <div *ngIf="loading"
              [class.adf-datatable-row]="display === 'list'"
              [class.adf-data-table-card-loading]="display === 'gallery'">
-            <div class="adf-datatable-table-cell"
-                 [attr.colspan]="1 + data.getColumns().length">
+            <div class="adf-datatable-table-cell" >
                 <ng-template *ngIf="loadingTemplate"
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="loadingTemplate">

lib/core/datatable/components/datatable/datatable.component.scss

@@ -363,6 +363,7 @@
         .adf-no-content-container {
             padding: 0 !important;
             border: none !important;
+            width: 100%;
 
             & > img {
                 width: 100%;

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -111,6 +111,19 @@ describe('DataTable', () => {
         expect(element.querySelector('.adf-datatable-header')).toBe(null);
     });
 
+    it('should hide the header if there are no elements inside', () => {
+        let newData = new ObjectDataTableAdapter(
+        );
+
+        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(
             [

lib/core/datatable/components/datatable/datatable.component.ts

@@ -535,6 +535,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         });
     }
 
+    isEmpty() {
+        return this.data.getRows().length === 0;
+    }
+
+    isHeaderVisible() {
+        return this.showHeader && !this.loading && !this.isEmpty();
+    }
+
     private emitRowSelectionEvent(name: string, row: DataRow) {
         const domEvent = new CustomEvent(name, {
             detail: {