From 68488bc16c5f8179ac7497f6a78f3c9921144267 Mon Sep 17 00:00:00 2001
From: Surya Teja K <shanmukhateja@gmail.com>
Date: Mon, 10 Apr 2023 20:42:36 +0530
Subject: [PATCH] fix: don't crash when using `visible` on columns

- also includes unit test
---
 .../advanced/using-ng-pipe.component.spec.ts  | 19 +++++++++++++++++++
 .../using-ng-template-ref.component.spec.ts   | 19 +++++++++++++++++++
 src/angular-datatables.directive.ts           |  4 ++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/demo/src/app/advanced/using-ng-pipe.component.spec.ts b/demo/src/app/advanced/using-ng-pipe.component.spec.ts
index 3a810b96..01291466 100644
--- a/demo/src/app/advanced/using-ng-pipe.component.spec.ts
+++ b/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();
+  });
+
 });
diff --git a/demo/src/app/advanced/using-ng-template-ref.component.spec.ts b/demo/src/app/advanced/using-ng-template-ref.component.spec.ts
index 06fade51..a1dea706 100644
--- a/demo/src/app/advanced/using-ng-template-ref.component.spec.ts
+++ b/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();
diff --git a/src/angular-datatables.directive.ts b/src/angular-datatables.directive.ts
index 74770f82..4998c3ec 100644
--- a/src/angular-datatables.directive.ts
+++ b/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('');