Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Create an id property, this new property will be used as unique to in… #1750

Merged
merged 3 commits into from
Sep 22, 2023
Merged

Create an id property, this new property will be used as unique to in… #1750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
faae6c0
Create an id property, this new property will be used as unique to in…
dlascarez Sep 18, 2023
4276da6
Apply suggestions
dlascarez Sep 18, 2023
f4a5598
Adding if to validate if user send or no the list of columns
dlascarez Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions src/angular-datatables.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 <td> element which holds data using index
const rowFromCol = row.childNodes.item(i);
// Transform data with Pipe and PipeArgs
Expand All @@ -125,7 +135,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('');
Expand All @@ -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();
}

}
2 changes: 2 additions & 0 deletions src/models/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down