[AAE-7856] Show variables in table

lib/core/datatable/components/columns-selector/columns-selector.component.html

@@ -24,20 +24,22 @@
             [placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
     </div>
 
-    <ng-container *ngFor="let column of columnItems">
-        <div
-            *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
-            class="adf-columns-selector-list-item-container">
-            <mat-checkbox
-                color="primary"
-                class="adf-columns-selector-column-checkbox"
-                [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
-                [checked]="!column.isHidden"
-                (change)="changeColumnVisibility(column)">
-                <div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
-            </mat-checkbox>
-        </div>
-    </ng-container>
+    <div class="adf-columns-selector-list-container">
+        <ng-container *ngFor="let column of columnItems">
+            <div
+                *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
+                class="adf-columns-selector-list-item">
+                <mat-checkbox
+                    color="primary"
+                    class="adf-columns-selector-column-checkbox"
+                    [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
+                    [checked]="!column.isHidden"
+                    (change)="changeColumnVisibility(column)">
+                    <div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
+                </mat-checkbox>
+            </div>
+        </ng-container>
+    </div>
 
     <mat-divider class="adf-columns-selector-divider"></mat-divider>
 

lib/core/datatable/components/columns-selector/columns-selector.component.scss

@@ -25,7 +25,13 @@ $adf-columns-selector-space: 12px;
         font-size: var(--theme-body-1-font-size);
     }
 
-    &-list-item-container {
+    &-list-container {
+        max-height: 350px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    &-list-item {
         margin-top: 10px;
 
         &:hover {

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

@@ -194,7 +194,7 @@
                      [adf-context-menu-enabled]="contextMenu"
                      adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row">
                     <div *ngIf="!col.template" class="adf-datatable-cell-container">
-                        <ng-container [ngSwitch]="col.type">
+                        <ng-container [ngSwitch]="data.getColumnType(row, col)">
                             <div *ngSwitchCase="'image'" class="adf-cell-value">
                                 <mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
                                 </mat-icon>
@@ -204,12 +204,12 @@
                                     </mat-icon>
                                     <ng-template #no_selected_row>
                                         <img class="adf-datatable-center-img-ie"
-                                            [attr.aria-label]=" (data.getValue(row, col) | fileType) === 'disable' ?
+                                            [attr.aria-label]="(data.getValue(row, col) | fileType) === 'disable' ?
                                                 ('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
                                                 'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
                                                     type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
                                                 }"
-                                            [attr.alt]=" (data.getValue(row, col) | fileType) === 'disable' ?
+                                            [attr.alt]="(data.getValue(row, col) | fileType) === 'disable' ?
                                                 ('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
                                                 'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
                                                         type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate

lib/core/datatable/data/data-column.model.ts

@@ -29,7 +29,7 @@ export interface DataColumnTypes {
 
 export type DataColumnType = keyof DataColumnTypes;
 
-export interface DataColumn {
+export interface DataColumn<T = unknown> {
     id?: string;
     key: string;
     type: DataColumnType;
@@ -47,4 +47,5 @@ export interface DataColumn {
     header?: TemplateRef<any>;
     draggable?: boolean;
     isHidden?: boolean;
+    customData?: T;
 }

lib/core/datatable/data/data-table.schema.ts

@@ -24,7 +24,7 @@ import { ObjectDataColumn } from './object-datacolumn.model';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class DataTableSchema {
+export abstract class DataTableSchema<T = unknown> {
 
     @ContentChild(DataColumnListComponent)
     columnList: DataColumnListComponent;
@@ -33,7 +33,7 @@ export abstract class DataTableSchema {
     @Input()
     presetColumn: string;
 
-    columns: any;
+    columns: DataColumn<T>[];
 
     protected columnsOrder: string[] | undefined;
     protected columnsOrderedByKey: string = 'id';
@@ -91,7 +91,7 @@ export abstract class DataTableSchema {
         return customSchemaColumns;
     }
 
-    public getSchemaFromHtml(columnList: DataColumnListComponent): any {
+    public getSchemaFromHtml(columnList: DataColumnListComponent): DataColumn[] {
         let schema = [];
         if (columnList && columnList.columns && columnList.columns.length > 0) {
             schema = columnList.columns.map((c) => c as DataColumn);

lib/core/datatable/data/datatable-adapter.ts

@@ -29,6 +29,7 @@ export interface DataTableAdapter {
     getColumns(): Array<DataColumn>;
     setColumns(columns: Array<DataColumn>): void;
     getValue(row: DataRow, col: DataColumn, resolverFn?: (_row: DataRow, _col: DataColumn) => any): any;
+    getColumnType(row: DataRow, col: DataColumn): string;
     getSorting(): DataSorting;
     setSorting(sorting: DataSorting): void;
     sort(key?: string, direction?: string): void;

lib/core/datatable/data/object-datacolumn.model.ts

@@ -19,7 +19,7 @@ import { TemplateRef } from '@angular/core';
 import { DataColumn, DataColumnType } from './data-column.model';
 
 // Simple implementation of the DataColumn interface.
-export class ObjectDataColumn implements DataColumn {
+export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     id?: string;
     key: string;
     type: DataColumnType;
@@ -35,6 +35,7 @@ export class ObjectDataColumn implements DataColumn {
     header?: TemplateRef<any>;
     draggable: boolean;
     isHidden: boolean;
+    customData?: T;
 
     constructor(input: any) {
         this.id = input.id ?? '';
@@ -52,5 +53,6 @@ export class ObjectDataColumn implements DataColumn {
         this.header = input.header;
         this.draggable = input.draggable ?? false;
         this.isHidden = input.isHidden ?? false;
+        this.customData = input.customData;
     }
 }

lib/core/datatable/data/object-datatable-adapter.ts

@@ -77,6 +77,10 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
         this.rowsChanged = new Subject<Array<DataRow>>();
     }
 
+    getColumnType(_row: DataRow, col: DataColumn): string {
+        return col.type;
+    }
+
     getRows(): Array<DataRow> {
         return this._rows;
     }