From 0b079beb3dfd11bbed79f24f974f15861268d78c Mon Sep 17 00:00:00 2001
From: Alex Molodyh <alex.molodyh@hyland.com>
Date: Tue, 3 Dec 2024 09:30:07 -0800
Subject: [PATCH] [AAE-28655] Fix for datatable not scrolling back to the top
 on data change

---
 .../datatable/datatable.component.html        | 489 +++++++++---------
 1 file changed, 244 insertions(+), 245 deletions(-)

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 29bfe10f40..e78ad39378 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -152,277 +152,276 @@
     </div>
 
     <div
+        *ngIf="!loading && !noPermission"
         class="adf-datatable-body"
         [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }"
         cdkDropList
         [cdkDropListDisabled]="!enableDragRows"
         role="rowgroup">
-        <ng-container *ngIf="!loading && !noPermission">
-            <adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
-                cdkDrag
-                [cdkDragDisabled]="!enableDragRows"
-                (cdkDragDropped)="onDragDrop($event)"
-                (cdkDragStarted)="onDragStart()"
-                (cdkDragEnded)="onDragEnd()"
-                [cdkDragBoundary]="'.adf-datatable-body'"
-                [row]="row"
-                (select)="onEnterKeyPressed(row, $event)"
-                (keyup)="onRowKeyUp(row, $event)"
-                (keydown)="onRowEnterKeyDown(row, $event)"
-                [adf-upload]="rowAllowsDrop(row)"
-                [adf-upload-data]="row"
-                [ngStyle]="rowStyle"
-                [ngClass]="getRowStyle(row)"
-                [class.adf-datatable-row__dragging]="isDraggingRow"
-                [attr.data-automation-id]="'datatable-row-' + idx"
-                (contextmenu)="markRowAsContextMenuSource(row)">
-                <!-- Drag button -->
-                <div *ngIf="enableDragRows"
-                     role="gridcell"
-                     class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
-                    <button mat-icon-button
-                            [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
-                        <mat-icon>drag_indicator</mat-icon>
+        <adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
+            cdkDrag
+            [cdkDragDisabled]="!enableDragRows"
+            (cdkDragDropped)="onDragDrop($event)"
+            (cdkDragStarted)="onDragStart()"
+            (cdkDragEnded)="onDragEnd()"
+            [cdkDragBoundary]="'.adf-datatable-body'"
+            [row]="row"
+            (select)="onEnterKeyPressed(row, $event)"
+            (keyup)="onRowKeyUp(row, $event)"
+            (keydown)="onRowEnterKeyDown(row, $event)"
+            [adf-upload]="rowAllowsDrop(row)"
+            [adf-upload-data]="row"
+            [ngStyle]="rowStyle"
+            [ngClass]="getRowStyle(row)"
+            [class.adf-datatable-row__dragging]="isDraggingRow"
+            [attr.data-automation-id]="'datatable-row-' + idx"
+            (contextmenu)="markRowAsContextMenuSource(row)">
+            <!-- Drag button -->
+            <div *ngIf="enableDragRows"
+                    role="gridcell"
+                    class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
+                <button mat-icon-button
+                        [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
+                    <mat-icon>drag_indicator</mat-icon>
+                </button>
+            </div>
+
+            <!-- Actions (left) -->
+            <div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
+                <button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
+                        [ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
+                        [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
+                        [attr.id]="'action_menu_left_' + idx"
+                        [attr.data-automation-id]="'action_menu_' + idx">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item *ngFor="let action of getRowActions(row)"
+                            [attr.data-automation-id]="action.title"
+                            [disabled]="action.disabled"
+                            (click)="onExecuteRowAction(row, action)">
+                        <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
+                        <span>{{ action.title | translate }}</span>
                     </button>
+                </mat-menu>
+            </div>
+
+            <label *ngIf="multiselect"
+                    (keydown.enter)="onEnterKeyPressed(row, $any($event))"
+                    (click)="onCheckboxLabelClick(row, $event)"
+                    [for]="'select-file-' + idx"
+                    class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
+                    tabindex="0">
+                <mat-checkbox
+                    [id]="'select-file-' + idx"
+                    [disabled]="!row?.isSelectable"
+                    [class.adf-datatable-checkbox-selected]="row.isSelected"
+                    [class.adf-datatable-hover-only]="displayCheckboxesOnHover"
+                    [checked]="row.isSelected"
+                    [attr.aria-checked]="row.isSelected"
+                    [aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
+                    role="checkbox"
+                    data-adf-datatable-row-checkbox
+                    (change)="onCheckboxChange(row, $event)"
+                    class="adf-checkbox-sr-only">
+                    {{ '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 *ngIf="!col.template" class="adf-datatable-cell-container">
+                    <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>
+                            <ng-template #no_iconvalue>
+                                <mat-icon class="adf-datatable-selected"
+                                            *ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected" />
+                                <ng-template #no_selected_row>
+                                    <img class="adf-datatable-center-img-ie"
+                                        [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' ?
+                                            ('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
+                                            'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
+                                                    type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
+                                            }"
+                                        src="{{ data.getValue(row, col) }}"
+                                        (error)="onImageLoadingError($event, row)">
+                                </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)" />
+                        </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') ">
+                            <adf-date-cell class="adf-datatable-center-date-column-ie"
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [resolverFn]="resolverFn"
+                                [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
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [resolverFn]="resolverFn"
+                                [tooltip]="getCellTooltip(row, col)" />
+                        </div>
+                        <div *ngSwitchCase="'fileSize'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
+                                [attr.data-automation-id]="'fileSize_' + data.getValue(row, col, resolverFn)">
+                            <adf-filesize-cell class="adf-datatable-center-size-column-ie"
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [resolverFn]="resolverFn"
+                                [tooltip]="getCellTooltip(row, col)" />
+                        </div>
+                        <div *ngSwitchCase="'text'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
+                                [attr.data-automation-id]="'text_' + data.getValue(row, col, resolverFn)">
+                            <adf-datatable-cell
+                                [copyContent]="col.copyContent"
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [resolverFn]="resolverFn"
+                                [tooltip]="getCellTooltip(row, col)" />
+                        </div>
+                        <div *ngSwitchCase="'boolean'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
+                                [attr.data-automation-id]="'boolean_' + data.getValue(row, col, resolverFn)">
+                            <adf-boolean-cell
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [resolverFn]="resolverFn"
+                                [tooltip]="getCellTooltip(row, col)" />
+                        </div>
+                        <div *ngSwitchCase="'json'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value">
+                            <adf-json-cell
+                                [editable]="col.editable"
+                                [data]="data"
+                                [column]="col"
+                                [resolverFn]="resolverFn"
+                                [row]="row" />
+                        </div>
+                        <div *ngSwitchCase="'amount'"
+                            class="adf-cell-value"
+                            [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
+                            [attr.data-automation-id]="'amount_' + data.getValue(row, col, resolverFn)">
+                            <adf-amount-cell
+                                [data]="data"
+                                [column]="col"
+                                [resolverFn]="resolverFn"
+                                [row]="row"
+                                [currencyConfig]="col.currencyConfig" />
+                        </div>
+                        <div *ngSwitchCase="'number'"
+                            class="adf-cell-value"
+                            [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
+                            [attr.data-automation-id]="'number_' + data.getValue(row, col, resolverFn)">
+                            <adf-number-cell
+                                [data]="data"
+                                [column]="col"
+                                [resolverFn]="resolverFn"
+                                [row]="row"
+                                [decimalConfig]="col.decimalConfig" />
+                        </div>
+                        <span *ngSwitchDefault class="adf-cell-value">
+                <!-- empty cell for unknown column type -->
+                </span>
+                    </ng-container>
+                </div>
+                <div *ngIf="col.template" class="adf-datatable-cell-container">
+                    <div class="adf-cell-value" [attr.tabindex]="col.focus ? 0 : null">
+                        <ng-container
+                            [ngTemplateOutlet]="col.template"
+                            [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col, resolverFn) }" />
+                    </div>
                 </div>
+            </div>
 
-                <!-- Actions (left) -->
-                <div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
+            <!-- Row actions (right) -->
+            <div *ngIf="
+                    (actions && actionsPosition === 'right') ||
+                    (mainActionTemplate && showMainDatatableActions)"
+                    role="gridcell"
+                    tabindex="0"
+                    class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
+
+                <ng-container *ngIf="(actions && actionsPosition === 'right')">
                     <button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
                             [ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
+                            [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
                             [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
-                            [attr.id]="'action_menu_left_' + idx"
-                            [attr.data-automation-id]="'action_menu_' + idx">
+                            [attr.id]="'action_menu_right_' + idx"
+                            [attr.data-automation-id]="'action_menu_' + idx"
+                            (keydown.enter)="actionsMenuTrigger.openMenu()">
                         <mat-icon>more_vert</mat-icon>
                     </button>
                     <mat-menu #menu="matMenu">
                         <button mat-menu-item *ngFor="let action of getRowActions(row)"
                                 [attr.data-automation-id]="action.title"
+                                [attr.aria-label]="action.title | translate"
                                 [disabled]="action.disabled"
                                 (click)="onExecuteRowAction(row, action)">
                             <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                             <span>{{ action.title | translate }}</span>
                         </button>
                     </mat-menu>
-                </div>
-
-                <label *ngIf="multiselect"
-                       (keydown.enter)="onEnterKeyPressed(row, $any($event))"
-                       (click)="onCheckboxLabelClick(row, $event)"
-                       [for]="'select-file-' + idx"
-                       class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
-                       tabindex="0">
-                    <mat-checkbox
-                        [id]="'select-file-' + idx"
-                        [disabled]="!row?.isSelectable"
-                        [class.adf-datatable-checkbox-selected]="row.isSelected"
-                        [class.adf-datatable-hover-only]="displayCheckboxesOnHover"
-                        [checked]="row.isSelected"
-                        [attr.aria-checked]="row.isSelected"
-                        [aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
-                        role="checkbox"
-                        data-adf-datatable-row-checkbox
-                        (change)="onCheckboxChange(row, $event)"
-                        class="adf-checkbox-sr-only">
-                        {{ '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 *ngIf="!col.template" class="adf-datatable-cell-container">
-                        <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>
-                                <ng-template #no_iconvalue>
-                                    <mat-icon class="adf-datatable-selected"
-                                              *ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected" />
-                                    <ng-template #no_selected_row>
-                                        <img class="adf-datatable-center-img-ie"
-                                            [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' ?
-                                                ('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
-                                                'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
-                                                        type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
-                                                }"
-                                            src="{{ data.getValue(row, col) }}"
-                                            (error)="onImageLoadingError($event, row)">
-                                    </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)" />
-                            </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') ">
-                                <adf-date-cell class="adf-datatable-center-date-column-ie"
-                                    [data]="data"
-                                    [column]="col"
-                                    [row]="row"
-                                    [resolverFn]="resolverFn"
-                                    [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
-                                    [data]="data"
-                                    [column]="col"
-                                    [row]="row"
-                                    [resolverFn]="resolverFn"
-                                    [tooltip]="getCellTooltip(row, col)" />
-                            </div>
-                            <div *ngSwitchCase="'fileSize'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
-                                 [attr.data-automation-id]="'fileSize_' + data.getValue(row, col, resolverFn)">
-                                <adf-filesize-cell class="adf-datatable-center-size-column-ie"
-                                    [data]="data"
-                                    [column]="col"
-                                    [row]="row"
-                                    [resolverFn]="resolverFn"
-                                    [tooltip]="getCellTooltip(row, col)" />
-                            </div>
-                            <div *ngSwitchCase="'text'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
-                                 [attr.data-automation-id]="'text_' + data.getValue(row, col, resolverFn)">
-                                <adf-datatable-cell
-                                    [copyContent]="col.copyContent"
-                                    [data]="data"
-                                    [column]="col"
-                                    [row]="row"
-                                    [resolverFn]="resolverFn"
-                                    [tooltip]="getCellTooltip(row, col)" />
-                            </div>
-                            <div *ngSwitchCase="'boolean'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
-                                 [attr.data-automation-id]="'boolean_' + data.getValue(row, col, resolverFn)">
-                                <adf-boolean-cell
-                                    [data]="data"
-                                    [column]="col"
-                                    [row]="row"
-                                    [resolverFn]="resolverFn"
-                                    [tooltip]="getCellTooltip(row, col)" />
-                            </div>
-                            <div *ngSwitchCase="'json'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value">
-                                <adf-json-cell
-                                    [editable]="col.editable"
-                                    [data]="data"
-                                    [column]="col"
-                                    [resolverFn]="resolverFn"
-                                    [row]="row" />
-                            </div>
-                            <div *ngSwitchCase="'amount'"
-                                class="adf-cell-value"
-                                [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
-                                [attr.data-automation-id]="'amount_' + data.getValue(row, col, resolverFn)">
-                                <adf-amount-cell
-                                    [data]="data"
-                                    [column]="col"
-                                    [resolverFn]="resolverFn"
-                                    [row]="row"
-                                    [currencyConfig]="col.currencyConfig" />
-                            </div>
-                            <div *ngSwitchCase="'number'"
-                                class="adf-cell-value"
-                                [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
-                                [attr.data-automation-id]="'number_' + data.getValue(row, col, resolverFn)">
-                                <adf-number-cell
-                                    [data]="data"
-                                    [column]="col"
-                                    [resolverFn]="resolverFn"
-                                    [row]="row"
-                                    [decimalConfig]="col.decimalConfig" />
-                            </div>
-                            <span *ngSwitchDefault class="adf-cell-value">
-                    <!-- empty cell for unknown column type -->
-                    </span>
-                        </ng-container>
-                    </div>
-                    <div *ngIf="col.template" class="adf-datatable-cell-container">
-                        <div class="adf-cell-value" [attr.tabindex]="col.focus ? 0 : null">
-                            <ng-container
-                                [ngTemplateOutlet]="col.template"
-                                [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col, resolverFn) }" />
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Row actions (right) -->
-                <div *ngIf="
-                        (actions && actionsPosition === 'right') ||
-                        (mainActionTemplate && showMainDatatableActions)"
-                     role="gridcell"
-                     tabindex="0"
-                     class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
-
-                    <ng-container *ngIf="(actions && actionsPosition === 'right')">
-                        <button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
-                                [ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
-                                [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
-                                [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
-                                [attr.id]="'action_menu_right_' + idx"
-                                [attr.data-automation-id]="'action_menu_' + idx"
-                                (keydown.enter)="actionsMenuTrigger.openMenu()">
-                            <mat-icon>more_vert</mat-icon>
-                        </button>
-                        <mat-menu #menu="matMenu">
-                            <button mat-menu-item *ngFor="let action of getRowActions(row)"
-                                    [attr.data-automation-id]="action.title"
-                                    [attr.aria-label]="action.title | translate"
-                                    [disabled]="action.disabled"
-                                    (click)="onExecuteRowAction(row, action)">
-                                <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
-                                <span>{{ action.title | translate }}</span>
-                            </button>
-                        </mat-menu>
-                    </ng-container>
-                </div>
-            </adf-datatable-row>
-            <div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
-                <div class="adf-no-content-container adf-datatable-cell" role="gridcell">
-                    <ng-template *ngIf="noContentTemplate"
-                                 ngFor [ngForOf]="[data]"
-                                 [ngForTemplate]="noContentTemplate">
-                    </ng-template>
-                    <ng-content select="adf-empty-list"></ng-content>
-                </div>
+                </ng-container>
             </div>
-        </ng-container>
-        <div *ngIf="!loading && noPermission"
-             role="row"
-             class="adf-datatable-row adf-no-permission__row">
-            <div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
-                <ng-template *ngIf="noPermissionTemplate"
-                             ngFor [ngForOf]="[data]"
-                             [ngForTemplate]="noPermissionTemplate">
+        </adf-datatable-row>
+        <div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
+            <div class="adf-no-content-container adf-datatable-cell" role="gridcell">
+                <ng-template *ngIf="noContentTemplate"
+                                ngFor [ngForOf]="[data]"
+                                [ngForTemplate]="noContentTemplate">
                 </ng-template>
+                <ng-content select="adf-empty-list"></ng-content>
             </div>
         </div>
-        <div *ngIf="loading" class="adf-datatable-row">
-            <div class="adf-no-content-container adf-datatable-cell">
-                <ng-template *ngIf="loadingTemplate"
-                             ngFor [ngForOf]="[data]"
-                             [ngForTemplate]="loadingTemplate">
-                </ng-template>
-            </div>
+    </div>
+    <div *ngIf="!loading && noPermission"
+         role="row"
+         class="adf-datatable-row adf-no-permission__row">
+        <div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
+            <ng-template *ngIf="noPermissionTemplate"
+                         ngFor [ngForOf]="[data]"
+                         [ngForTemplate]="noPermissionTemplate">
+            </ng-template>
+        </div>
+    </div>
+    <div *ngIf="loading" class="adf-datatable-row">
+        <div class="adf-no-content-container adf-datatable-cell">
+            <ng-template *ngIf="loadingTemplate"
+                         ngFor [ngForOf]="[data]"
+                         [ngForTemplate]="loadingTemplate">
+            </ng-template>
         </div>
     </div>
 </div>