[AAE-7819] Fix for custom header (#7585)

demo-shell/resources/i18n/en.json

@@ -196,7 +196,9 @@
     "REPLACE_COLUMNS": "Replace columns",
     "LOAD_NODE": "Load Node",
     "MULTISELECT": "Multiselect",
-    "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items"
+    "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
+    "USE_CUSTOM_COLUMN_HEADER": "Use custom template for 'User' header",
+    "CUSTOM_COLUMN_HEADER": "Custom User Header Template"
   },
   "ANALYTICS_REPORT": {
     "NO_REPORT_MESSAGE": "No report selected. Choose a report from the list"

demo-shell/src/app/components/datatable/datatable.component.html

@@ -10,7 +10,7 @@
     Sticky header
 </mat-slide-toggle>
 
-<div style="height: 310px; overflow-y: auto;" data-automation-id="datatable">
+<div data-automation-id="datatable" class="adf-datatable-demo-app">
     <adf-datatable
         #dataTable
         [data]="data"
@@ -40,6 +40,14 @@
         </data-columns>
         -->
     </adf-datatable>
+
+    <ng-template #customColumnHeaderTemplate>
+        <div>
+            <span class="adf-datatable-demo-app-custom-user-header">
+                {{ 'DATATABLE.CUSTOM_COLUMN_HEADER'| translate }}
+            </span>
+        </div>
+    </ng-template>
 </div>
 
 <div>
@@ -49,6 +57,7 @@
 <div data-automation-id="multiselect">
     <mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
 </div>
+
 <div>
     <p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
     <mat-form-field>
@@ -59,9 +68,11 @@
         </mat-select>
     </mat-form-field>
 </div>
-<div>
+
+<div class="adf-datatable-demo-app-actions">
     <button mat-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
     <button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
     <button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
     <button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
+    <button mat-raised-button (click)="showCustomHeaderColumn()">{{ 'DATATABLE.USE_CUSTOM_COLUMN_HEADER'| translate }}</button>
 </div>

demo-shell/src/app/components/datatable/datatable.component.scss

@@ -0,0 +1,13 @@
+.adf-datatable-demo-app {
+    height: 310px;
+    overflow-y: auto;
+
+    &-actions {
+        display: flex;
+        column-gap: 4px;
+    }
+
+    &-custom-user-header {
+        color: red;
+    }
+}

demo-shell/src/app/components/datatable/datatable.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import {
     DataCellEvent,
     DataColumn,
@@ -56,17 +56,20 @@ export class FilteredDataAdapter extends ObjectDataTableAdapter {
 
 @Component({
     selector: 'app-datatable',
-    templateUrl: './datatable.component.html'
+    templateUrl: './datatable.component.html',
+    styleUrls: ['./datatable.component.scss']
 })
 export class DataTableComponent {
 
+    @Input()
+    selectionMode = 'single';
+
+    @ViewChild('customColumnHeaderTemplate') customColumnHeaderTemplate;
+
     multiselect = false;
     data: FilteredDataAdapter;
     stickyHeader = false;
 
-    @Input()
-    selectionMode = 'single';
-
     selectionModes = [
         { value: 'none', viewValue: 'None' },
         { value: 'single', viewValue: 'Single' },
@@ -298,6 +301,21 @@ export class DataTableComponent {
         this.data.setColumns(columns);
     }
 
+    showCustomHeaderColumn() {
+        const columns = this.data.getColumns().map(column => {
+            if (column.title === 'Users') {
+                return {
+                    ...column,
+                    header: this.customColumnHeaderTemplate
+                };
+            }
+
+            return column;
+        });
+
+        this.data.setColumns(columns);
+    }
+
     onShowRowActionsMenu(event: DataCellEvent) {
         const myAction = {
             title: 'Hello'

lib/core/datatable/components/datatable/datatable.component.html

@@ -48,7 +48,6 @@
                  adf-drop-zone dropTarget="header" [dropColumn]="col">
 
                 <div
-                    *ngIf="!col.header"
                     [attr.data-automation-id]="'auto_header_content_id_' + col.key"
                     class="adf-datatable-cell-header-content"
                     [class.adf-datatable-cell-header-content--hovered]="hoveredHeaderColumnIndex === columnIndex && !isDraggingHeaderColumn"
@@ -59,11 +58,17 @@
                         [attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-placeholder-'+col.key"
                     ></span>
 
+                    <ng-container *ngIf="!col.header">
                         <span *ngIf="col.title" class="adf-datatable-cell-value">{{col.title | translate}}</span>
 
                         <span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
                             {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
                         </span>
+                    </ng-container>
+
+                    <div *ngIf="col.header" class="adf-datatable-cell-value">
+                        <ng-template [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
+                    </div>
 
                     <ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
 
@@ -73,8 +78,6 @@
                     </span>
                 </div>
 
-                <ng-template *ngIf="col.header" [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
-
                 <div
                     *ngIf="col.draggable"
                     cdkDragHandle