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