diff --git a/src/angular-datatables.directive.ts b/src/angular-datatables.directive.ts index 4998c3ec..f861e03b 100644 --- a/src/angular-datatables.directive.ts +++ b/src/angular-datatables.directive.ts @@ -75,6 +75,16 @@ export class DataTableDirective implements OnDestroy, OnInit { reject('Both the table and dtOptions cannot be empty'); return; } + + // Set a column unique + if (resolvedDTOptions.columns) { + resolvedDTOptions.columns.forEach(col => { + if ((col.id ?? '').trim() === '') { + col.id = this.getColumnUniqueId(); + } + }); + } + // Using setTimeout as a "hack" to be "part" of NgZone setTimeout(() => { // Assign DT properties here @@ -108,7 +118,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 element which holds data using index const rowFromCol = row.childNodes.item(i); // Transform data with Pipe and PipeArgs @@ -125,7 +135,7 @@ export class DataTableDirective implements OnDestroy, OnInit { colsWithTemplate.forEach(el => { const { ref, context } = el.ngTemplateRef; // get 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(''); @@ -138,4 +148,17 @@ export class DataTableDirective implements OnDestroy, OnInit { this.renderer.appendChild(cellFromIndex, instance.rootNodes[0]); }); } + + private getColumnUniqueId(): string { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + + for (let i = 0; i < 6; i++) { + const randomIndex = Math.floor(Math.random() * characters.length); + result += characters.charAt(randomIndex); + } + + return result.trim(); + } + } diff --git a/src/models/settings.ts b/src/models/settings.ts index 5d56bcbd..c0834abd 100644 --- 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 the column's unique identifier */ + id?: string; /** 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 */