Recalculate table width when columns are shown/hidden

src/app/public/modules/grid/fixtures/grid-fixtures.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { SkyWindowRefService } from '@skyux/core';
+
 import { SkyGridModule } from '../';
 
 import { GridTestComponent } from './grid.component.fixture';
@@ -19,6 +21,9 @@ import { GridAsyncTestComponent } from './grid-async.component.fixture';
     CommonModule,
     SkyGridModule
   ],
+  providers: [
+    SkyWindowRefService
+  ],
   exports: [
     GridTestComponent,
     GridEmptyTestComponent,

src/app/public/modules/grid/fixtures/grid.component.fixture.html

@@ -61,3 +61,18 @@
   {{value}}
   </div>
 </ng-template>
+
+<button
+  id="hide-column-button"
+  class="sky-btn sky-btn-primary"
+  (click)="hideColumn()"
+>
+  Hide Column 2
+</button>
+<button
+  id="show-column-button"
+  class="sky-btn sky-btn-primary"
+  (click)="showColumn()"
+>
+  Show Column 2
+</button>

src/app/public/modules/grid/fixtures/grid.component.fixture.ts

@@ -108,4 +108,12 @@ export class GridTestComponent {
   public onResize(columnWidths: Array<SkyGridColumnWidthModelChange>) {
     this.columnWidthsChange = columnWidths;
   }
+
+  public hideColumn() {
+    this.selectedColumnIds = ['column1', 'column3', 'column4', 'column5'];
+  }
+
+  public showColumn() {
+    this.selectedColumnIds = ['column1', 'column2', 'column3', 'column4', 'column5'];
+  }
 }

src/app/public/modules/grid/grid.component.spec.ts

@@ -141,7 +141,7 @@ function isWithin(actual: number, base: number, distance: number) {
 }
 
 function verifyWidthsMatch(actual: number, expected: number) {
-  expect(isWithin(actual, expected, 2)).toEqual(true);
+  expect(isWithin(actual, expected, 5)).toEqual(true);
 }
 
 function verifyAllWidthsMatch(actualWidths: number[], expectedWidths: number[]) {
@@ -150,6 +150,16 @@ function verifyAllWidthsMatch(actualWidths: number[], expectedWidths: number[])
     expect(isWithin(actualWidths[i], expectedWidths[i], 1)).toEqual(true);
   }
 }
+
+function showColumn2(fixture: ComponentFixture<any>) {
+  let button = fixture.debugElement.query(By.css('#show-column-button'));
+  button.nativeElement.click();
+}
+
+function hideColumn2(fixture: ComponentFixture<any>) {
+  let button = fixture.debugElement.query(By.css('#hide-column-button'));
+  button.nativeElement.click();
+}
 //#endregion
 
 describe('Grid Component', () => {
@@ -568,7 +578,9 @@ describe('Grid Component', () => {
           verifyWidthsMatch(initialTableWidth + resizeXDistance, newTableWidth);
           verifyAllWidthsMatch(expectedColumnWidths, newColumnWidths);
           component.columnWidthsChange.forEach((cwc, index) => {
-            verifyWidthsMatch(cwc.width, expectedColumnWidths[index]);
+            if (cwc.id.indexOf('hidden') === -1) {
+              verifyWidthsMatch(cwc.width, expectedColumnWidths[index]);
+            }
           });
         }));
 
@@ -618,7 +630,9 @@ describe('Grid Component', () => {
             verifyAllWidthsMatch(getColumnWidths(fixture), expectedColumnWidths);
             verifyWidthsMatch(Number(inputRange.nativeElement.value), initialColumnWidths[columnIndex] + deltaX);
             component.columnWidthsChange.forEach((cwc, index) => {
-              verifyWidthsMatch(cwc.width, expectedColumnWidths[index]);
+              if (cwc.id.indexOf('hidden') === -1) {
+                verifyWidthsMatch(cwc.width, expectedColumnWidths[index]);
+              }
             });
 
             // Decrease first column.
@@ -634,7 +648,9 @@ describe('Grid Component', () => {
             verifyAllWidthsMatch(getColumnWidths(fixture), expectedColumnWidths);
             verifyWidthsMatch(Number(inputRange.nativeElement.value), initialColumnWidths[columnIndex] + deltaX);
             component.columnWidthsChange.forEach((cwc, index) => {
-              verifyWidthsMatch(cwc.width, expectedColumnWidths[index]);
+              if (cwc.id.indexOf('hidden') === -1) {
+                verifyWidthsMatch(cwc.width, expectedColumnWidths[index]);
+              }
             });
 
             // Run accessibility test.
@@ -655,6 +671,52 @@ describe('Grid Component', () => {
           let expectedColumnInputs = getColumnResizeInputMaxValues(fixture);
           expect(initialMaxValues).toEqual(expectedColumnInputs);
         }));
+
+        it('should reset table width when columns are hidden/shown', fakeAsync(() => {
+          // Get initial baseline for comparison.
+          let initialTableWidth = getTableWidth(fixture);
+
+          // Resize first column.
+          let resizeXDistance = 50;
+          resizeColumn(fixture, resizeXDistance, 0);
+
+          // Hide column 2.
+          hideColumn2(fixture);
+          fixture.detectChanges();
+          tick();
+
+          // Assert table width should be 50 additional pixels for resize of col2,
+          // and less 150 for the hidden column.
+          let newTableWidth = getTableWidth(fixture);
+          let expectedTableWidth = initialTableWidth + 50 - 150;
+          verifyWidthsMatch(expectedTableWidth, newTableWidth);
+
+          // Show column 2.
+          showColumn2(fixture);
+          fixture.detectChanges();
+          tick();
+
+          // Now that we've put col2 back, assert table width
+          // should be 50 additional pixels for resize of col2
+          newTableWidth = getTableWidth(fixture);
+          expectedTableWidth = initialTableWidth + 50;
+          verifyWidthsMatch(expectedTableWidth, newTableWidth);
+        }));
+
+        it('should properly emit column widths even when columns are hidden', fakeAsync(() => {
+          // Hide column 2.
+          hideColumn2(fixture);
+          fixture.detectChanges();
+          tick();
+
+          // Resize first column.
+          let resizeXDistance = 50;
+          resizeColumn(fixture, resizeXDistance, 0);
+
+          // Expect hidden column to be in emitted array.
+          let column2 = component.columnWidthsChange.find(cwc => cwc.id === 'column2');
+          expect(column2).not.toBeNull();
+        }));
       });
     });
 

src/app/public/modules/grid/grid.component.ts

@@ -47,6 +47,7 @@ import {
   SkyGridColumnHeadingModelChange,
   SkyGridColumnWidthModelChange
 } from './types';
+import { SkyWindowRefService } from '@skyux/core';
 
 let nextId = 0;
 
@@ -132,7 +133,8 @@ export class SkyGridComponent implements AfterContentInit, OnChanges, OnDestroy
   constructor(
     private dragulaService: DragulaService,
     private ref: ChangeDetectorRef,
-    private gridAdapter: SkyGridAdapterService
+    private gridAdapter: SkyGridAdapterService,
+    private skyWindow: SkyWindowRefService
   ) {
     this.displayedColumns = new Array<SkyGridColumnModel>();
     this.items = new Array<any>();
@@ -185,6 +187,7 @@ export class SkyGridComponent implements AfterContentInit, OnChanges, OnDestroy
       this.setDisplayedColumns();
       if (changes['selectedColumnIds'].previousValue !== changes['selectedColumnIds'].currentValue) {
         this.selectedColumnIdsChange.emit(this.selectedColumnIds);
+        this.resetTableWidth();
       }
     }
 
@@ -512,7 +515,7 @@ export class SkyGridComponent implements AfterContentInit, OnChanges, OnDestroy
 
   private getColumnWidthModelChange() {
     let columnWidthModelChange = new Array<SkyGridColumnWidthModelChange>();
-    this.displayedColumns.forEach(column => {
+    this.columns.forEach(column => {
       columnWidthModelChange.push({
         id: column.id,
         field: column.field,
@@ -539,6 +542,16 @@ export class SkyGridComponent implements AfterContentInit, OnChanges, OnDestroy
     this.startColumnWidth = column.width;
   }
 
+  private resetTableWidth() {
+    this.skyWindow.getWindow().setTimeout(() => {
+      this.gridAdapter.setStyle(this.tableElementRef, 'width', `auto`);
+      this.ref.detectChanges();
+      this.tableWidth = this.tableElementRef.nativeElement.offsetWidth;
+      this.gridAdapter.setStyle(this.tableElementRef, 'width', `${this.tableWidth}px`);
+      this.ref.detectChanges();
+    });
+  }
+
   private getRangeInputByIndex(index: string | number) {
     return this.columnRangeInputElementRefs.find(input =>
       input.nativeElement.getAttribute('sky-cmp-index') === index.toString()