Recalculate table width when columns are shown/hidden

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

@@ -35,6 +35,7 @@ import {
   SkyGridComponent,
   SkyGridColumnModel
 } from './';
+import { SkyWindowRefService } from '@skyux/core';
 
 //#region helpers
 function getColumnHeader(id: string, element: DebugElement) {
@@ -150,6 +151,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', () => {
@@ -164,6 +175,9 @@ describe('Grid Component', () => {
         imports: [
           GridFixturesModule,
           SkyGridModule
+        ],
+        providers: [
+          SkyWindowRefService
         ]
       });
     }));
@@ -568,7 +582,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 +634,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 +652,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 +675,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();
+        }));
       });
     });
 
@@ -702,6 +768,9 @@ describe('Grid Component', () => {
         imports: [
           GridFixturesModule,
           SkyGridModule
+        ],
+        providers: [
+          SkyWindowRefService
         ]
       });
     });
@@ -807,6 +876,9 @@ describe('Grid Component', () => {
         imports: [
           GridFixturesModule,
           SkyGridModule
+        ],
+        providers: [
+          SkyWindowRefService
         ]
       });
 
@@ -1036,6 +1108,9 @@ describe('Grid Component', () => {
         imports: [
           GridFixturesModule,
           SkyGridModule
+        ],
+        providers: [
+          SkyWindowRefService
         ]
       });
     }));
@@ -1123,6 +1198,9 @@ describe('Grid Component', () => {
         imports: [
           GridFixturesModule,
           SkyGridModule
+        ],
+        providers: [
+          SkyWindowRefService
         ]
       });
 
@@ -1158,6 +1236,9 @@ describe('Grid Component', () => {
         imports: [
           GridFixturesModule,
           SkyGridModule
+        ],
+        providers: [
+          SkyWindowRefService
         ]
       }).compileComponents();
     }));

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()