search

l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.57k stars 481 forks source link

Multiple columns using ngTemplateRef #1748

Closed dlascarez closed 9 months ago

dlascarez commented 9 months ago

If you have more than one column using ngTemplateRef, all columns will be overwritten with the latest one.

@ViewChild('tplIconColumn') public tplIconColumn?: TemplateRef<any>; @ViewChild('tplActionColumn') public tplActionColumn?: TemplateRef<any>;

I am assigning columns like:

ngAfterViewInit(): void { this.dtOptions.columns = [ { title: '', data: null, defaultContent: '', ngTemplateRef: { ref: this.tplIconColumn } }, { title: 'Title', data: 'title', name: 'title' }, { title: 'Description', data: 'description', name: 'description' }, { title: '', data: null, defaultContent: '', ngTemplateRef: { ref: this.tplActionColumn } }, ]; }

The final result overwrite the content of "tplIconColumn" with content from "tplActionColumn", and the column that should display the content of "tplActionColumn" is displaying empty content.

image

It must display the content like:

image
dlascarez commented 9 months ago

I have found the bug. In your example, you are setting data as null:

image

But data is use as filter key to select the index position to render the content.

image

At this point, all columns with data: null and implementing a template will be overwritten.

dlascarez commented 9 months ago

Issue fixed with PR: https://github.com/l-lin/angular-datatables/pull/1750

miamilabs commented 8 months ago

Any plans to release this hotfix?

shanmukhateja commented 8 months ago

@miamilabs I completely forgot to release this. Apologies.

You can find this fix in v16.0.1