Create an id property, this new property will be used as unique to indentify each column instead of "data"

dlascarez · dlascarez · commit faae6c09e090 · 2023-09-17T22:05:53.000-06:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-datatables",
-  "version": "16.0.0",
+  "version": "16.0.1",
   "description": "Angular directive for DataTables",
   "scripts": {
     "build": "npm run clean && npm run compile && npm run bundles && npm run schematics:build",
diff --git a/src/angular-datatables.directive.ts b/src/angular-datatables.directive.ts
@@ -75,6 +75,10 @@ export class DataTableDirective implements OnDestroy, OnInit {
           reject('Both the table and dtOptions cannot be empty');
           return;
         }
+        
+        // Set a column unique
+        resolvedDTOptions.columns.forEach((col: ADTColumns, i: number) => col.id = i);
+
         // Using setTimeout as a "hack" to be "part" of NgZone
         setTimeout(() => {
           // Assign DT properties here
@@ -108,7 +112,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.filter(c => c.visible !== false).findIndex(e => e.data === el.data);
+      const i = columns.filter(c => c.visible !== false).findIndex(e => e.id === el.id);
       // get <td> element which holds data using index
       const rowFromCol = row.childNodes.item(i);
       // Transform data with Pipe and PipeArgs
@@ -125,7 +129,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.filter(c => c.visible !== false).findIndex(e => e.data === el.data);
+      const i = columns.filter(c => c.visible !== false).findIndex(e => e.id === el.id);
       const cellFromIndex = row.childNodes.item(i);
       // reset cell before applying transform
       $(cellFromIndex).html('');
diff --git a/src/models/settings.ts b/src/models/settings.ts
@@ -4,6 +4,8 @@ export interface ADTSettings extends DataTables.Settings {
   columns?: ADTColumns[];
 }
 export interface ADTColumns extends DataTables.ColumnSettings {
+  /** Define a column index */
+  id?: number;
   /** Set instance of Angular pipe to transform the data of particular column */
   ngPipeInstance?: PipeTransform;
   /** Define the arguments for the tranform method of the pipe, to change its behavior */

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular-datatables",`
`3`		`- "version": "16.0.0",`
	`3`	`+ "version": "16.0.1",`
`4`	`4`	`"description": "Angular directive for DataTables",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "npm run clean && npm run compile && npm run bundles && npm run schematics:build",`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,8 @@ export interface ADTSettings extends DataTables.Settings {`
`4`	`4`	`columns?: ADTColumns[];`
`5`	`5`	`}`
`6`	`6`	`export interface ADTColumns extends DataTables.ColumnSettings {`
	`7`	`+ /** Define a column index */`
	`8`	`+ id?: number;`
`7`	`9`	`/** Set instance of Angular pipe to transform the data of particular column */`
`8`	`10`	`ngPipeInstance?: PipeTransform;`
`9`	`11`	`/** Define the arguments for the tranform method of the pipe, to change its behavior */`