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

Author: dlascarez

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",

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

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 */