[ADF-2765] Fix for the gallery view in datatable component (#3470)

* [ADF-2765] Fix for the gallery view in datatable component

* [ADF-2765] Fixed lint errors

* [ADF-2765] Changed maximum columns per row number

* [ADF-2765] Removed trailing whitespace

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

@@ -42,7 +42,6 @@
                 </mat-option>
             </mat-select>
         </mat-form-field>
-
     </div>
 
     <div class="adf-datatable-body">
@@ -191,6 +190,9 @@
                     <ng-content select="adf-empty-list"></ng-content>
                 </div>
             </div>
+            <div *ngFor="let row of fakeRows"
+                 class="adf-datatable-row adf-datatable-row-empty-card">
+            </div>
         </ng-container>
         <div *ngIf="!loading && noPermission"
              [class.adf-datatable-row]="display === 'list'"

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

@@ -29,13 +29,10 @@
             display: flex;
 
             width: 100%;
-            flex-direction: row;
-            justify-content: space-between;
 
-            &:after {
+            justify-content: space-evenly;
-                content: "";
+            align-content: flex-start;
-                flex: auto;
+            align-items: flex-start;
-            }
 
             .adf-datatable-row {
                 transition: all 0.3s ease;
@@ -58,6 +55,14 @@
                 @include mat-overridable-elevation(2);
             }
 
+            .adf-datatable-row-empty-card {
+                height: 0 !important;
+                padding-top: 0;
+                padding-bottom: 0;
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+
             .is-selected {
                 background: mat-color($primary, 100);
                 padding-bottom: 31px;

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

@@ -161,6 +161,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     isSelectAllChecked: boolean = false;
     selection = new Array<DataRow>();
 
+    /** This array of fake rows fix the flex layout for the gallery view */
+    fakeRows = [];
+
     private clickObserver: Observer<DataRowEvent>;
     private click$: Observable<DataRowEvent>;
 
@@ -188,6 +191,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
                 })
             );
         }
+        this.datatableLayoutFix();
         this.setTableSchema();
     }
 
@@ -220,6 +224,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         if (this.isPropertyChanged(changes['sorting'])) {
             this.setTableSorting(changes['sorting'].currentValue);
         }
+
+        if (this.isPropertyChanged(changes['display'])) {
+            this.datatableLayoutFix();
+        }
     }
 
     ngDoCheck() {
@@ -654,4 +662,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
             this.dataRowsChanged = null;
         }
     }
+
+    datatableLayoutFix() {
+        const maxGalleryRows = 25;
+
+        if (this.display === 'gallery') {
+            for (let i = 0; i < maxGalleryRows; i++) {
+               this.fakeRows.push('');
+            }
+        } else {
+            this.fakeRows = [];
+        }
+    }
 }