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

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'