diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html index e497a7af8f..c7407b8ee7 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html +++ b/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)"> -
{{column.title | translate}}
+
+ {{column.title | translate}} +
+
+ + device_hub + + + {{column.subtitle | translate}} + +
diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss index ebbe412ff1..b54817c6f8 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss +++ b/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; } diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts index 344f67c03a..ada0793523 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts +++ b/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).toBe(undefined); 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}`); }); }); }); diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts index ba8b46261c..d88eb6b21b 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts +++ b/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 { diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index 19b3bf5d20..a0f12421e9 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/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()" +>
+ 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" + >
- {{col.title | translate}} + + {{col.title | translate}} + + + + ({{col.subtitle | translate}}) + {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} @@ -232,20 +249,23 @@ {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }} -
+ +
@@ -271,16 +291,22 @@
+
+ [tooltip]="getCellTooltip(row, col)" + />
-
+
+
{ format?: string; sortable?: boolean; title?: string; + subtitle?: string; srTitle?: string; cssClass?: string; template?: TemplateRef; diff --git a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts index ac1dd05364..1ebc35becf 100644 --- a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts +++ b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts @@ -27,6 +27,7 @@ export class ObjectDataColumn implements DataColumn { format: string; sortable: boolean; title: string; + subtitle?: string; srTitle: string; cssClass: string; template?: TemplateRef; @@ -52,6 +53,7 @@ export class ObjectDataColumn implements DataColumn { 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;