Using more than one TemplateRef in a datatable

[vtt-lair]

It doesn't look like you are able to use more than one TemplateRef in a datatable.

I have a datatable setup with columns as:

const columns = [
        { title: "Name", data: "name" },
        { title: "Description", data: "description" },
        { 
          title: "Tags", 
          data: null,
          defaultContent: '',
          sortable: false,
          ngTemplateRef: {
            ref: this.tagsTemplate,
          }          
        },
        {
          title: "Actions",
          data: null,
          defaultContent: '',
          sortable: false,
          ngTemplateRef: {
            ref: this.actionsTemplate,
            context: {
              // needed for capturing events inside <ng-template>
              captureEvents: self.onCaptureEvent.bind(self)
            }
          }
        },
        { title: "Id", data: "id", visible: false }, // invisible columns need to be after templateRef column
      ];

tagsTemplate is defined as
@ViewChild('tagsTemplate', {static: true}) tagsTemplate!: TemplateRef<ElementRef>;

and actionsTemplate as:
@ViewChild('actionsTemplate', {static: true}) actionsTemplate!: TemplateRef<IcoDataTableActionComponent>;

The HTML has both these templates specified:

<ng-template #actionsTemplate let-data="adtData" let-emitter="captureEvents">
  <app-ico-datatable-action [data]="data" (emitter)="emitter($event)" ></app-ico-datatable-action>
</ng-template>

<ng-template #tagsTemplate let-data="adtData">
  <span *ngFor="let tag of data.tags">
    {{tag.key}}: {{tag.value}}<br />
  </span>
</ng-template>

If I go to the page when both are defined in columns, it shows the actionsTemplate in the Tags columns

If I comment out the Actions column, the tagsTemplate shows:

It's only when both columsn are defined that the templates aren't used correctly. Does anyone know if there is a way to link templates to specifc columns and have more than one template defined?

[vtt-lair]

Found a solution. The datatable finds the column where there data is the dame as the elements data:
var i = columns.findIndex(function (e) { return e.data === el.data; });

Since both are defined with data: null, it would find the tags columns everytime as it's the first column with data: null.

Changing the Tags column definition to:

       { 
          title: "Tags", 
          data: 'tags',
          defaultContent: '',
          sortable: true,
          ngTemplateRef: {
            ref: this.tagsTemplate,
          }          
        },

Fixed the issue: