AAE-28910 Add subtitle for columns

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

@@ -45,7 +45,23 @@
                 [checked]="!column.isHidden"
                 [disabled]="isCheckboxDisabled(column)"
                 (change)="changeColumnVisibility(column)">
-                <div class="adf-columns-selector-list-content">{{column.title | translate}}</div>
+                <div class="adf-columns-selector-list-content">
+                    {{column.title | translate}}
+                </div>
+                <div
+                    *ngIf="column.subTitle"
+                    class="
+                        adf-columns-selector-list-content
+                        adf-columns-selector-subtitle
+                    "
+                >
+                    <mat-icon class="adf-columns-selector-subtitle-icon">
+                        device_hub
+                    </mat-icon>
+                    <span>
+                        {{column.subTitle | translate}}
+                    </span>
+                </div>
             </mat-checkbox>
         </div>
     </div>

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

@@ -27,8 +27,7 @@ $adf-columns-selector-space: 12px;
 
     &-list-container {
         max-height: 350px;
-        overflow-x: hidden;
-        overflow-y: auto;
+        overflow: hidden auto;
     }
 
     &-list-item {
@@ -47,6 +46,22 @@ $adf-columns-selector-space: 12px;
         width: 210px;
     }
 
+    &-subtitle {
+        color: var(--adf-theme-foreground-text-color);
+        font-size: var(--theme-caption-font-size);
+        opacity: 0.6;
+        display: flex;
+        column-gap: 3px;
+        align-items: center;
+    }
+
+    &-subtitle-icon {
+        margin-top: 3px;
+        height: var(--theme-caption-font-size);
+        width: var(--theme-caption-font-size);
+        font-size: var(--theme-caption-font-size);
+    }
+
     &-column-checkbox {
         padding: 0 20px;
     }

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts

@@ -153,10 +153,10 @@ describe('ColumnsSelectorComponent', () => {
         const checkBoxName = await firstColumnCheckbox.getLabelText();
 
         const toggledColumnItem = component.columnItems.find((item) => item.title === checkBoxName);
-        expect(toggledColumnItem.isHidden).toBeFalsy();
+        expect(toggledColumnItem?.isHidden).toBeFalse();
 
         await firstColumnCheckbox.toggle();
-        expect(toggledColumnItem.isHidden).toBe(true);
+        expect(toggledColumnItem?.isHidden).toBeTrue();
     });
 
     describe('checkboxes', () => {
@@ -207,9 +207,11 @@ describe('ColumnsSelectorComponent', () => {
             fixture.detectChanges();
 
             const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+            const labeTextOne = await checkboxes[0].getLabelText();
+            const labeTextTwo = await checkboxes[1].getLabelText();
 
-            expect(await checkboxes[0].getLabelText()).toBe(shownDataColumn.title);
-            expect(await checkboxes[1].getLabelText()).toBe(hiddenDataColumn.title);
+            expect(labeTextOne).toBe(shownDataColumn.title!);
+            expect(labeTextTwo).toBe(hiddenDataColumn.title!);
         });
 
         it('should NOT show hidden columns at the end of the list if sorting is disabled', async () => {
@@ -219,9 +221,31 @@ describe('ColumnsSelectorComponent', () => {
             fixture.detectChanges();
 
             const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+            const labeTextOne = await checkboxes[0].getLabelText();
+            const labeTextTwo = await checkboxes[1].getLabelText();
 
-            expect(await checkboxes[0].getLabelText()).toBe(hiddenDataColumn.title);
-            expect(await checkboxes[1].getLabelText()).toBe(shownDataColumn.title);
+            expect(labeTextOne).toBe(hiddenDataColumn.title!);
+            expect(labeTextTwo).toBe(shownDataColumn.title!);
+        });
+
+        it('should show subtitle', async () => {
+            const column: DataColumn = {
+                id: 'shownDataColumn',
+                title: 'title',
+                subTitle: 'subtitle',
+                key: 'shownDataColumn',
+                type: 'text'
+            };
+
+            component.columns = [column];
+
+            component.columnsSorting = false;
+            menuOpenedTrigger.next();
+            fixture.detectChanges();
+
+            const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+            const labeTextOne = await checkboxes[0].getLabelText();
+            expect(labeTextOne).toBe(`${column.title}  device_hub  ${column.subTitle}`);
         });
     });
 });

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts

@@ -58,7 +58,7 @@ export class ColumnsSelectorComponent implements OnInit {
     columnItems: DataColumn[] = [];
     searchInputControl = new UntypedFormControl('');
     searchQuery = '';
-    
+
     private readonly destroyRef = inject(DestroyRef);
 
     ngOnInit(): void {

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

@@ -4,7 +4,8 @@
     class="adf-full-width adf-datatable-list"
     [class.adf-sticky-header]="isStickyHeaderEnabled()"
     [class.adf-datatable--empty]="(isEmpty() && !isHeaderVisible()) || loading"
-    [class.adf-datatable--empty--header-visible]="isEmpty() && isHeaderVisible()">
+    [class.adf-datatable--empty--header-visible]="isEmpty() && isHeaderVisible()"
+>
     <div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup" [ngClass]="{ 'adf-sr-only': !isHeaderVisible() }">
         <adf-datatable-row
             cdkDropList
@@ -38,29 +39,31 @@
                 let lastColumn = last"
             >
             <div
-            class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
-            *ngIf="col.title || !showProvidedActions"
-            [attr.data-automation-id]="'auto_id_' + col.key"
-            [ngClass]="{
-                'adf-sortable': col.sortable,
-                'adf-datatable__cursor--pointer': !isResizing,
-                'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
-                'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}"
-            [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}"
-            [attr.aria-label]="col.title | translate"
-            (click)="onColumnHeaderClick(col, $event)"
-            (keyup.enter)="onColumnHeaderClick(col, $event)"
-            role="columnheader"
-            [attr.tabindex]="isHeaderVisible() ? 0 : null"
-            [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
-            cdkDrag
-            cdkDragLockAxis="x"
-            (cdkDragStarted)="isDraggingHeaderColumn = true"
-            (cdkDragDropped)="onDropHeaderColumn($event)"
-            [cdkDragDisabled]="!col.draggable"
-            (mouseenter)="hoveredHeaderColumnIndex = columnIndex"
-            (mouseleave)="hoveredHeaderColumnIndex = -1"
-            adf-drop-zone dropTarget="header" [dropColumn]="col">
+                class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
+                *ngIf="col.title || !showProvidedActions"
+                [attr.data-automation-id]="'auto_id_' + col.key"
+                [ngClass]="{
+                    'adf-sortable': col.sortable,
+                    'adf-datatable__cursor--pointer': !isResizing,
+                    'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
+                    'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}"
+                [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}"
+                [attr.aria-label]="col.title | translate"
+                (click)="onColumnHeaderClick(col, $event)"
+                (keyup.enter)="onColumnHeaderClick(col, $event)"
+                role="columnheader"
+                [attr.tabindex]="isHeaderVisible() ? 0 : null"
+                [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
+                cdkDrag
+                cdkDragLockAxis="x"
+                (cdkDragStarted)="isDraggingHeaderColumn = true"
+                (cdkDragDropped)="onDropHeaderColumn($event)"
+                [cdkDragDisabled]="!col.draggable"
+                (mouseenter)="hoveredHeaderColumnIndex = columnIndex"
+                (mouseleave)="hoveredHeaderColumnIndex = -1"
+                adf-drop-zone dropTarget="header"
+                [dropColumn]="col"
+            >
 
             <div
                 adf-resizable
@@ -77,7 +80,21 @@
                     !isResizing && col.sortable}"
             >
                 <ng-container *ngIf="!col.header">
-                    <span *ngIf="col.title" title="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
+                    <span
+                        *ngIf="col.title"
+                        title="{{col.title | translate}}"
+                        class="adf-datatable-cell-value"
+                    >
+                        {{col.title | translate}}
+                    </span>
+
+                    <span
+                        *ngIf="col.subTitle"
+                        title="{{col.subTitle | translate}}"
+                        class="adf-datatable-cell-value adf-datatable-cell-header_subtitle"
+                    >
+                        ({{col.subTitle | translate}})
+                    </span>
 
                     <span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
                         {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
@@ -232,20 +249,23 @@
                         {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
                     </mat-checkbox>
                 </label>
-                <div *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
-                     role="gridcell"
-                     class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
-                     [attr.title]="col.title | translate"
-                     [attr.data-automation-id]="getAutomationValue(row)"
-                     [attr.aria-selected]="row.isSelected"
-                     [attr.aria-label]="col.title ? (col.title | translate) : null"
-                     (click)="onRowClick(row, $event)"
-                     tabindex="0"
-                     (keydown.enter)="onEnterKeyPressed(row, $any($event))"
-                     [adf-context-menu]="getContextMenuActions(row, col)"
-                     [adf-context-menu-enabled]="contextMenu"
-                     adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row"
-                     [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}">
+
+                <div
+                    *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
+                    role="gridcell"
+                    class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
+                    [attr.title]="col.title | translate"
+                    [attr.data-automation-id]="getAutomationValue(row)"
+                    [attr.aria-selected]="row.isSelected"
+                    [attr.aria-label]="col.title ? (col.title | translate) : null"
+                    (click)="onRowClick(row, $event)"
+                    tabindex="0"
+                    (keydown.enter)="onEnterKeyPressed(row, $any($event))"
+                    [adf-context-menu]="getContextMenuActions(row, col)"
+                    [adf-context-menu-enabled]="contextMenu"
+                    adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row"
+                    [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}"
+                >
                     <div *ngIf="!col.template" class="adf-datatable-cell-container">
                         <ng-container [ngSwitch]="data.getColumnType(row, col)">
                             <div *ngSwitchCase="'image'" class="adf-cell-value">
@@ -271,16 +291,22 @@
                                     </ng-template>
                                 </ng-template>
                             </div>
+
                             <div *ngSwitchCase="'icon'" class="adf-cell-value">
                                 <adf-icon-cell
                                     [data]="data"
                                     [column]="col"
                                     [row]="row"
                                     [resolverFn]="resolverFn"
-                                    [tooltip]="getCellTooltip(row, col)" />
+                                    [tooltip]="getCellTooltip(row, col)"
+                                />
                             </div>
-                            <div *ngSwitchCase="'date'" class="adf-cell-value adf-cell-date" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
-                                 [attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
+                            <div
+                                *ngSwitchCase="'date'"
+                                class="adf-cell-value adf-cell-date"
+                                [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
+                                [attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') "
+                            >
                                 <adf-date-cell class="adf-datatable-center-date-column-ie"
                                     [data]="data"
                                     [column]="col"
@@ -289,6 +315,7 @@
                                     [tooltip]="getCellTooltip(row, col)"
                                     [dateConfig]="col.dateConfig" />
                             </div>
+
                             <div *ngSwitchCase="'location'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"  class="adf-cell-value"
                                  [attr.data-automation-id]="'location' + data.getValue(row, col, resolverFn)">
                                 <adf-location-cell

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -524,6 +524,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     color: var(--adf-theme-foreground-text-color);
     box-sizing: border-box;
 
+    &_subtitle {
+        margin-left: 3px;
+        opacity: 0.6;
+    }
+
     &.adf-sortable {
         @include adf-no-select;
 

lib/core/src/lib/datatable/data-column/data-column.component.ts

@@ -76,6 +76,9 @@ export class DataColumnComponent implements OnInit {
     @Input()
     title: string = '';
 
+    @Input()
+    subTitle: string = '';
+
     @ContentChild(TemplateRef)
     template: any;
 

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

@@ -27,6 +27,7 @@ export interface DataColumn<T = unknown> {
     format?: string;
     sortable?: boolean;
     title?: string;
+    subTitle?: string;
     srTitle?: string;
     cssClass?: string;
     template?: TemplateRef<any>;

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

@@ -27,6 +27,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     format: string;
     sortable: boolean;
     title: string;
+    subTitle?: string;
     srTitle: string;
     cssClass: string;
     template?: TemplateRef<any>;
@@ -52,6 +53,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
         this.format = input.format;
         this.sortable = input.sortable;
         this.title = input.title;
+        this.subTitle = input.subTitle;
         this.srTitle = input.srTitle;
         this.cssClass = input.cssClass;
         this.template = input.template;