Merge pull request #1725 from l-lin/fix-crash-on-visible-flag

fix: don't crash when using `visible` on columns

Author: l-lin

demo/src/app/advanced/using-ng-pipe.component.spec.ts

@@ -113,4 +113,23 @@ describe('UsingNgPipeComponent', () => {
       .toEqual(expectedArray);
   });
 
+
+  it('should not crash when using "visible: false" for columns', async () => {
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
+    // hide first column
+    (await dir.dtInstance).columns(0).visible(false);
+    await fixture.whenRenderingDone();
+
+    fixture.detectChanges();
+
+    // verify app still works
+    expect((await dir.dtInstance).column(0).visible()).toBeFalse();
+  });
+
 });

demo/src/app/advanced/using-ng-template-ref.component.spec.ts

@@ -75,6 +75,25 @@ describe('UsingNgTemplateRefComponent', () => {
 
   });
 
+  it('should not crash when using "visible: false" for columns', async () => {
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
+    // hide first column
+    (await dir.dtInstance).columns(0).visible(false);
+    await fixture.whenRenderingDone();
+
+    fixture.detectChanges();
+
+    // verify app still works
+    expect((await dir.dtInstance).column(0).visible()).toBeFalse();
+  });
+
+
   it('should not have duplicate contents in ngTemplateRef column when navigating pages', async () => {
     await fixture.whenStable();
     fixture.detectChanges();

src/angular-datatables.directive.ts

@@ -108,7 +108,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
       const pipe = el.ngPipeInstance;
       const pipeArgs = el.ngPipeArgs || [];
       // find index of column using `data` attr
-      const i = columns.findIndex(e => e.data === el.data);
+      const i = columns.filter(c => c.visible !== false).findIndex(e => e.data === el.data);
       // get <td> element which holds data using index
       const rowFromCol = row.childNodes.item(i);
       // Transform data with Pipe and PipeArgs
@@ -125,7 +125,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
     colsWithTemplate.forEach(el => {
       const { ref, context } = el.ngTemplateRef;
       // get <td> element which holds data using index
-      const i = columns.findIndex(e => e.data === el.data);
+      const i = columns.filter(c => c.visible !== false).findIndex(e => e.data === el.data);
       const cellFromIndex = row.childNodes.item(i);
       // reset cell before applying transform
       $(cellFromIndex).html('');