diff --git a/netlify.toml b/netlify.toml
index 3c01cb331e3..b09903ca426 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -13,6 +13,8 @@
   # Default build command.
   command = "npm run build:storybook"
 
+  environment = { UI5_WEBCOMPONENTS_FOR_REACT_RELEASE_BUILD = "true" }
+
 # Deploy Preview context: all deploys generated from a pull/merge request will
 # inherit these settings.
 [context.deploy-preview]
diff --git a/packages/main/src/components/ActionSheet/ActionSheet.jss.ts b/packages/main/src/components/ActionSheet/ActionSheet.jss.ts
index 44f5b200d0f..a4da89e9674 100644
--- a/packages/main/src/components/ActionSheet/ActionSheet.jss.ts
+++ b/packages/main/src/components/ActionSheet/ActionSheet.jss.ts
@@ -3,18 +3,12 @@ const styles = {
    *  is being applied to the encapsulating ul element
    */
   actionSheet: {
-    listStyleType: 'none',
     margin: 0,
     padding: '0.1875rem 0.375rem',
-    '&$tablet,&$phone': {
-      padding: '0.25rem 0.5rem'
-    },
     '& ui5-button': {
       display: 'block'
     }
-  },
-  phone: {},
-  tablet: {}
+  }
 };
 
 export default styles;
diff --git a/packages/main/src/components/ActionSheet/ActionSheet.test.tsx b/packages/main/src/components/ActionSheet/ActionSheet.test.tsx
index f98ea3a6d48..5ecd0c63dd1 100644
--- a/packages/main/src/components/ActionSheet/ActionSheet.test.tsx
+++ b/packages/main/src/components/ActionSheet/ActionSheet.test.tsx
@@ -41,7 +41,7 @@ describe('ActionSheet', () => {
     wrapper.update();
 
     wrapper
-      .find('ui5-popover ui5-button')
+      .find('ui5-responsive-popover ui5-button')
       .first()
       .instance()
       // @ts-ignore
@@ -63,14 +63,14 @@ describe('ActionSheet', () => {
         <Button>This is my super long text!</Button>
       </ActionSheet>
     );
-    expect(legacyRef.tagName).toEqual('UI5-POPOVER');
+    expect(legacyRef.tagName).toEqual('UI5-RESPONSIVE-POPOVER');
   });
 
   test('Ref object', () => {
     const ref: RefObject<Ui5PopoverDomRef> = createRef();
     const button = <Button />;
     mount(<ActionSheet ref={ref} openBy={button} />);
-    expect((ref.current as any).tagName).toEqual('UI5-POPOVER');
+    expect((ref.current as any).tagName).toEqual('UI5-RESPONSIVE-POPOVER');
   });
 
   test('does not crash with other component', () => {
diff --git a/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap b/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap
index edc50675219..4439a4ce339 100644
--- a/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap
+++ b/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap
@@ -1,71 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionSheet Render without Crashing 1`] = `
-Array [
-  <div
-    style="display: inline-block;"
+<ui5-responsive-popover
+  class="ActionSheet-actionSheet-0 myCustomClass"
+  horizontal-align="Center"
+  initial-focus=""
+  placement-type="Right"
+  vertical-align="Center"
+>
+  <ui5-button
+    data-is-action-sheet-button=""
+    design="Transparent"
+    icon="add"
   >
-    <ui5-button
-      design="Default"
-      icon=""
-    />
-  </div>,
-  <ui5-popover
-    class="ActionSheet-actionSheet-0 myCustomClass"
-    horizontal-align="Center"
-    initial-focus=""
-    placement-type="Bottom"
-    vertical-align="Center"
+    Accept
+  </ui5-button>
+  <ui5-button
+    data-is-action-sheet-button=""
+    design="Transparent"
+    icon=""
   >
-    <ui5-button
-      data-is-action-sheet-button=""
-      design="Transparent"
-      icon="add"
-    >
-      Accept
-    </ui5-button>
-    <ui5-button
-      data-is-action-sheet-button=""
-      design="Transparent"
-      icon=""
-    >
-      Reject
-    </ui5-button>
-    <ui5-button
-      data-is-action-sheet-button=""
-      design="Transparent"
-      icon=""
-    >
-      This is my super long text!
-    </ui5-button>
-  </ui5-popover>,
-]
+    Reject
+  </ui5-button>
+  <ui5-button
+    data-is-action-sheet-button=""
+    design="Transparent"
+    icon=""
+  >
+    This is my super long text!
+  </ui5-button>
+</ui5-responsive-popover>
 `;
 
 exports[`ActionSheet does not crash with other component 1`] = `
-Array [
-  <div
-    style="display: inline-block;"
-  >
-    <ui5-button
-      design="Default"
-      icon=""
-    />
-  </div>,
-  <ui5-popover
-    class="ActionSheet-actionSheet-0"
-    horizontal-align="Center"
-    initial-focus=""
-    placement-type="Bottom"
-    vertical-align="Center"
+<ui5-responsive-popover
+  class="ActionSheet-actionSheet-0"
+  horizontal-align="Center"
+  initial-focus=""
+  placement-type="Right"
+  vertical-align="Center"
+>
+  <ui5-label
+    data-is-action-sheet-button=""
+    design="Transparent"
+    for=""
   >
-    <ui5-label
-      data-is-action-sheet-button=""
-      design="Transparent"
-      for=""
-    >
-      I should not crash
-    </ui5-label>
-  </ui5-popover>,
-]
+    I should not crash
+  </ui5-label>
+</ui5-responsive-popover>
 `;
diff --git a/packages/main/src/components/ActionSheet/demo.stories.tsx b/packages/main/src/components/ActionSheet/demo.stories.tsx
index e53b61dd54c..299c8bd2cfa 100644
--- a/packages/main/src/components/ActionSheet/demo.stories.tsx
+++ b/packages/main/src/components/ActionSheet/demo.stories.tsx
@@ -2,22 +2,31 @@ import { select } from '@storybook/addon-knobs';
 import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 export default {
   title: 'Components / ActionSheet',
   component: ActionSheet
 };
 
-export const defaultStory = () => (
-  <ActionSheet
-    openBy={<Button>Open ActionSheet</Button>}
-    placement={select('placement', [PlacementType.Top, PlacementType.Bottom], PlacementType.Top)}
-  >
-    <Button icon="add">Accept</Button>
-    <Button>Reject</Button>
-    <Button>This is my super long text!</Button>
-  </ActionSheet>
-);
+export const defaultStory = () => {
+  const actionSheetRef = useRef();
+  const onButtonClick = useCallback(
+    (e) => {
+      actionSheetRef.current.open(e.target);
+    },
+    [actionSheetRef]
+  );
+  return (
+    <>
+      <Button onClick={onButtonClick}>Open ActionSheet</Button>
+      <ActionSheet ref={actionSheetRef} placementType={select('placementType', PlacementType, PlacementType.Bottom)}>
+        <Button icon="add">Accept</Button>
+        <Button>Reject</Button>
+        <Button>This is my super long text!</Button>
+      </ActionSheet>
+    </>
+  );
+};
 
 defaultStory.story = { name: 'Default' };
diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx
index 20b06f3dcf5..58f20085c6d 100644
--- a/packages/main/src/components/ActionSheet/index.tsx
+++ b/packages/main/src/components/ActionSheet/index.tsx
@@ -1,20 +1,18 @@
 import { addCustomCSS } from '@ui5/webcomponents-base/dist/Theming';
-import { Device } from '@ui5/webcomponents-react-base/lib/Device';
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
-import { Popover } from '@ui5/webcomponents-react/lib/Popover';
-import React, { Children, cloneElement, FC, forwardRef, ReactElement, ReactNode, RefObject } from 'react';
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { CommonProps } from '../../interfaces/CommonProps';
-import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef';
+import { ResponsivePopover } from '@ui5/webcomponents-react/lib/ResponsivePopover';
+import React, { Children, cloneElement, FC, forwardRef, ReactElement, RefObject } from 'react';
+import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef';
 import { ButtonPropTypes } from '../../webComponents/Button';
+import { ResponsivePopoverPropTypes } from '../../webComponents/ResponsivePopover';
 import styles from './ActionSheet.jss';
 
-export interface ActionSheetPropTypes extends CommonProps {
-  openBy: ReactNode;
+export interface ActionSheetPropTypes extends ResponsivePopoverPropTypes {
   placement?: PlacementType;
   children?: ReactElement<ButtonPropTypes> | ReactElement<ButtonPropTypes>[];
 }
@@ -34,8 +32,27 @@ addCustomCSS(
  * <code>import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';</code>
  */
 const ActionSheet: FC<ActionSheetPropTypes> = forwardRef(
-  (props: ActionSheetPropTypes, ref: RefObject<Ui5PopoverDomRef>) => {
-    const { children, placement, openBy, style, slot, className } = props;
+  (props: ActionSheetPropTypes, ref: RefObject<Ui5ResponsivePopoverDomRef>) => {
+    const {
+      children,
+      style,
+      slot,
+      className,
+      allowTargetOverlap,
+      headerText,
+      horizontalAlign,
+      initialFocus,
+      modal,
+      noArrow,
+      placementType,
+      verticalAlign,
+      footer,
+      header,
+      onAfterClose,
+      onAfterOpen,
+      onBeforeClose,
+      onBeforeOpen
+    } = props;
 
     const classes = useStyles();
 
@@ -43,13 +60,8 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef(
     if (className) {
       actionSheetClasses.put(className);
     }
-    if (Device.system.tablet) {
-      actionSheetClasses.put(classes.tablet);
-    } else if (Device.system.phone) {
-      actionSheetClasses.put(classes.phone);
-    }
 
-    const popoverRef: RefObject<Ui5PopoverDomRef> = useConsolidatedRef(ref);
+    const popoverRef: RefObject<Ui5ResponsivePopoverDomRef> = useConsolidatedRef(ref);
 
     const onActionButtonClicked = (handler) => (e) => {
       popoverRef.current.close();
@@ -67,20 +79,37 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef(
       });
     };
 
-    const passThroughProps = usePassThroughHtmlProps(props);
+    const passThroughProps = usePassThroughHtmlProps(props, [
+      'onAfterClose',
+      'onAfterOpen',
+      'onBeforeClose',
+      'onBeforeOpen'
+    ]);
 
     return (
-      <Popover
+      <ResponsivePopover
         ref={popoverRef}
-        openBy={openBy}
-        placementType={placement}
         style={style}
         slot={slot}
         className={actionSheetClasses.valueOf()}
+        allowTargetOverlap={allowTargetOverlap}
+        headerText={headerText}
+        horizontalAlign={horizontalAlign}
+        initialFocus={initialFocus}
+        modal={modal}
+        noArrow={noArrow}
+        placementType={placementType}
+        verticalAlign={verticalAlign}
+        footer={footer}
+        header={header}
+        onAfterClose={onAfterClose}
+        onAfterOpen={onAfterOpen}
+        onBeforeClose={onBeforeClose}
+        onBeforeOpen={onBeforeOpen}
         {...passThroughProps}
       >
         {Children.map(children, renderActionSheetButton)}
-      </Popover>
+      </ResponsivePopover>
     );
   }
 );
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
index 147110066e6..ad70972d699 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
@@ -230,7 +230,7 @@ describe('AnalyticalTable', () => {
     const wrapper = mount(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
 
     // get first column of the table and simulate dragging of it
-    let componentDrag = wrapper.find('div[role="columnheader"] div[draggable]').at(0);
+    let componentDrag = wrapper.find('div[role="columnheader"][draggable]').at(0);
     let inst = componentDrag.instance();
     // @ts-ignore
     let dragColumnId = inst.dataset.columnId;
@@ -248,7 +248,7 @@ describe('AnalyticalTable', () => {
     dataTransfer.getData = () => {
       return dragColumnId;
     };
-    let componentDrop = wrapper.find('div[role="columnheader"] div[draggable]').at(1);
+    let componentDrop = wrapper.find('div[role="columnheader"][draggable]').at(1);
     // @ts-ignore
     componentDrop.simulate('drop', { dataTransfer: dataTransfer });
 
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx
index 4fc340f893a..384c813369f 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx
@@ -10,30 +10,26 @@ import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import { Popover } from '@ui5/webcomponents-react/lib/Popover';
 import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign';
 import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
-import React, { CSSProperties, FC, ReactNode, RefObject, useCallback, useRef } from 'react';
+import React, { CSSProperties, forwardRef, RefObject, useCallback } from 'react';
 import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef';
 import { ColumnType } from '../types/ColumnType';
 
 export interface ColumnHeaderModalProperties {
-  openBy: ReactNode;
   column: ColumnType;
-  style: CSSProperties;
   onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
   onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void;
 }
 
 const staticStyle = { fontWeight: 'normal' };
 
-export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: ColumnHeaderModalProperties) => {
-  const { column, style, openBy, onSort, onGroupBy } = props;
+export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties, ref: RefObject<Ui5PopoverDomRef>) => {
+  const { column, onSort, onGroupBy } = props;
   const showFilter = column.canFilter;
   const showGroup = column.canGroupBy;
   const showSort = column.canSort;
 
   const { Filter } = column;
 
-  const popoverRef: RefObject<Ui5PopoverDomRef> = useRef();
-
   const handleSort = useCallback(
     (e) => {
       const sortType = e.detail.item.getAttribute('data-sort');
@@ -85,11 +81,11 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
           }
           break;
       }
-      if (popoverRef.current) {
-        popoverRef.current.close();
+      if (ref.current) {
+        ref.current.close();
       }
     },
-    [column, popoverRef, onGroupBy, onSort]
+    [column, ref, onGroupBy, onSort]
   );
 
   const isSortedAscending = column.isSorted && column.isSortedDesc === false;
@@ -97,12 +93,10 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
 
   return (
     <Popover
-      openByStyle={style}
-      openBy={openBy}
       noArrow
       horizontalAlign={PopoverHorizontalAlign.Left}
       placementType={PlacementType.Bottom}
-      ref={popoverRef}
+      ref={ref}
       style={staticStyle as CSSProperties}
     >
       <List onItemClick={handleSort}>
@@ -130,7 +124,7 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
           <CustomListItem type={ListItemTypes.Inactive}>
             <FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
               <Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
-              <Filter column={column} popoverRef={popoverRef} />
+              <Filter column={column} popoverRef={ref} />
             </FlexBox>
           </CustomListItem>
         )}
@@ -142,4 +136,5 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
       </List>
     </Popover>
   );
-};
+});
+ColumnHeaderModal.displayName = 'ColumnHeaderModal';
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 075cfe396e6..b542e7904d1 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -3,10 +3,19 @@ import '@ui5/webcomponents-icons/dist/icons/group-2';
 import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
 import '@ui5/webcomponents-icons/dist/icons/sort-descending';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { Icon } from '@ui5/webcomponents-react/lib/Icon';
-import React, { CSSProperties, DragEventHandler, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
+import React, {
+  CSSProperties,
+  DragEventHandler,
+  FC,
+  ReactNode,
+  ReactNodeArray,
+  useCallback,
+  useMemo,
+  useRef
+} from 'react';
+import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
 
@@ -47,7 +56,10 @@ const styles = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     maxWidth: '100%',
-    position: 'relative'
+    position: 'relative',
+    width: '100%',
+    overflowX: 'hidden',
+    padding: `0 0.5rem`
   },
   iconContainer: {
     display: 'inline-block',
@@ -101,67 +113,18 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     role
   } = props;
 
-  const openBy = useMemo(() => {
-    if (!column) return null;
+  const isFiltered = column.filterValue && column.filterValue.length > 0;
+  const desc = column.isSortedDesc;
 
-    const isFiltered = column.filterValue && column.filterValue.length > 0;
-    const desc = column.isSortedDesc;
-
-    const classNames = StyleClassHelper.of(classes.header);
-
-    const sortingIcon = column.isSorted ? <Icon name={desc ? 'sort-descending' : 'sort-ascending'} /> : null;
-    const filterIcon = isFiltered ? <Icon name="filter" /> : null;
-    const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
-
-    return (
-      <div
-        className={classNames.valueOf()}
-        draggable={isDraggable}
-        onDragEnter={onDragEnter}
-        onDragOver={onDragOver}
-        onDragStart={onDragStart}
-        onDrop={onDrop}
-        onDragEnd={onDragEnd}
-        data-column-id={id}
-      >
-        <span
-          title={typeof children === 'string' ? children : null}
-          style={{ textOverflow: 'ellipsis', overflowX: 'hidden', whiteSpace: 'nowrap' }}
-        >
-          {children}
-        </span>
-        <div className={classes.iconContainer}>
-          {filterIcon}
-          {sortingIcon}
-          {groupingIcon}
-        </div>
-      </div>
-    );
-  }, [
-    classes,
-    column.filterValue,
-    column.isSorted,
-    column.isGrouped,
-    column.isSortedDesc,
-    children,
-    isDraggable,
-    onDragEnter,
-    onDragOver,
-    onDragStart,
-    onDrop,
-    onDragEnd,
-    id
-  ]);
+  const sortingIcon = column.isSorted ? <Icon name={desc ? 'sort-descending' : 'sort-ascending'} /> : null;
+  const filterIcon = isFiltered ? <Icon name="filter" /> : null;
+  const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
 
   const isResizable = !isLastColumn && column.canResize;
+  const hasPopover = column.canGroupBy || column.canSort || column.canFilter;
   const innerStyle: CSSProperties = useMemo(() => {
     const modifiedStyles: CSSProperties = {
-      width: '100%',
-      fontWeight: 'normal',
-      cursor: 'pointer',
-      height: '100%',
-      overflowX: 'hidden',
-      padding: `0 0.5rem`
+      cursor: hasPopover ? 'pointer' : 'auto'
     };
     if (isResizable) {
       modifiedStyles.maxWidth = `calc(100% - 16px)`;
@@ -173,17 +136,49 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
       modifiedStyles.padding = 0;
     }
     return modifiedStyles;
-  }, [isResizable, dragOver]);
+  }, [isResizable, dragOver, hasPopover]);
+
+  const popoverRef = useRef<Ui5PopoverDomRef>(null);
+
+  const onOpenPopover = useCallback(
+    (e) => {
+      if (popoverRef.current && hasPopover) {
+        popoverRef.current.openBy(e.target);
+      }
+    },
+    [popoverRef, hasPopover]
+  );
 
   if (!column) return null;
 
   return (
-    <div id={id} className={className} style={style} role={role}>
-      {column.canGroupBy || column.canSort || column.canFilter ? (
-        <ColumnHeaderModal openBy={openBy} column={column} style={innerStyle} onSort={onSort} onGroupBy={onGroupBy} />
-      ) : (
-        <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
-      )}
+    <div
+      id={id}
+      className={className}
+      style={style}
+      role={role}
+      draggable={isDraggable}
+      onDragEnter={onDragEnter}
+      onDragOver={onDragOver}
+      onDragStart={onDragStart}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      data-column-id={id}
+    >
+      <div style={innerStyle} onClick={onOpenPopover} className={classes.header}>
+        <span
+          title={typeof children === 'string' ? children : null}
+          style={{ textOverflow: 'ellipsis', overflowX: 'hidden', whiteSpace: 'nowrap' }}
+        >
+          {children}
+        </span>
+        <div className={classes.iconContainer}>
+          {filterIcon}
+          {sortingIcon}
+          {groupingIcon}
+        </div>
+      </div>
+      {hasPopover && <ColumnHeaderModal column={column} onSort={onSort} onGroupBy={onGroupBy} ref={popoverRef} />}
       {column.getResizerProps && (
         <div {...column.getResizerProps()} className={`${classes.resizer} ${isLastColumn ? classes.lastColumn : ''}`} />
       )}
diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
index af5f82e69fd..8e34828fc77 100644
--- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -22,7 +22,6 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -31,28 +30,25 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -94,28 +90,25 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -157,28 +150,25 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -220,29 +210,26 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -289,6 +276,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -558,7 +546,6 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -567,28 +554,25 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -630,28 +614,25 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -693,28 +674,25 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -756,29 +734,26 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -825,6 +800,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -1094,7 +1070,6 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -1103,28 +1078,25 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1166,28 +1138,25 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1229,28 +1198,25 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1292,29 +1258,26 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1615,7 +1578,6 @@ exports[`AnalyticalTable Tree Table 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -1624,51 +1586,45 @@ exports[`AnalyticalTable Tree Table 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="__ui5wcr__internal_selection_column"
+          draggable="false"
           id="__ui5wcr__internal_selection_column"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 47px;"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: auto; height: 100%; overflow-x: hidden; padding: 0px; display: inline-block;"
+            class="TableColumnHeader-header-0"
+            style="cursor: auto; padding: 0px;"
           >
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+            />
             <div
-              class="TableColumnHeader-header-0"
-              data-column-id="__ui5wcr__internal_selection_column"
-              draggable="false"
-            >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              />
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="false"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 47px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="false"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1731,28 +1687,25 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="false"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 197px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="false"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1815,28 +1768,25 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="false"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 347px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="false"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1899,29 +1849,26 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="false"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 497px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="false"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -1989,6 +1936,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -2330,7 +2278,6 @@ exports[`AnalyticalTable custom row height 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -2339,28 +2286,25 @@ exports[`AnalyticalTable custom row height 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -2402,28 +2346,25 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -2465,28 +2406,25 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -2528,29 +2466,26 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -2597,6 +2532,7 @@ exports[`AnalyticalTable custom row height 1`] = `
       >
         <div
           style="height: 300px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -2866,7 +2802,6 @@ exports[`AnalyticalTable render without data 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -2875,28 +2810,25 @@ exports[`AnalyticalTable render without data 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -2938,28 +2870,25 @@ exports[`AnalyticalTable render without data 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3001,28 +2930,25 @@ exports[`AnalyticalTable render without data 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3064,29 +2990,26 @@ exports[`AnalyticalTable render without data 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3160,7 +3083,6 @@ exports[`AnalyticalTable test Asc desc 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -3169,28 +3091,25 @@ exports[`AnalyticalTable test Asc desc 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3232,28 +3151,25 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3295,28 +3211,25 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3358,29 +3271,26 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3427,6 +3337,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -3696,7 +3607,6 @@ exports[`AnalyticalTable test Asc desc 2`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -3705,28 +3615,25 @@ exports[`AnalyticalTable test Asc desc 2`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3768,28 +3675,25 @@ exports[`AnalyticalTable test Asc desc 2`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3831,28 +3735,25 @@ exports[`AnalyticalTable test Asc desc 2`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3894,29 +3795,26 @@ exports[`AnalyticalTable test Asc desc 2`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -3963,6 +3861,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -4232,7 +4131,6 @@ exports[`AnalyticalTable test Asc desc 3`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -4241,28 +4139,25 @@ exports[`AnalyticalTable test Asc desc 3`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4304,28 +4199,25 @@ exports[`AnalyticalTable test Asc desc 3`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4367,28 +4259,25 @@ exports[`AnalyticalTable test Asc desc 3`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4430,29 +4319,26 @@ exports[`AnalyticalTable test Asc desc 3`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4499,6 +4385,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -4768,7 +4655,6 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -4777,28 +4663,25 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
-          id="name"
+          data-column-id="age"
+          draggable="true"
+          id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4840,28 +4723,25 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
-          id="age"
+          data-column-id="name"
+          draggable="true"
+          id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4903,28 +4783,25 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -4966,29 +4843,26 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -5035,6 +4909,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -5046,7 +4921,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5061,7 +4936,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5113,7 +4988,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5128,7 +5003,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5180,14 +5055,14 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
               aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
@@ -5215,14 +5090,14 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
               aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
@@ -5250,14 +5125,14 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
               aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
+              style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
@@ -5304,7 +5179,6 @@ exports[`AnalyticalTable with highlight row 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -5313,78 +5187,69 @@ exports[`AnalyticalTable with highlight row 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="__ui5wcr__internal_highlight_column"
+          draggable="false"
           id="__ui5wcr__internal_highlight_column"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 6px;"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: auto; height: 100%; overflow-x: hidden; padding: 0px; display: inline-block;"
+            class="TableColumnHeader-header-0"
+            style="cursor: auto; padding: 0px;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="__ui5wcr__internal_highlight_column"
-              draggable="false"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <div
-                  style="width: 6px;"
-                />
-              </span>
               <div
-                class="TableColumnHeader-iconContainer-0"
+                style="width: 6px;"
               />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="__ui5wcr__internal_selection_column"
+          draggable="false"
           id="__ui5wcr__internal_selection_column"
           role="columnheader"
           style="position: absolute; top: 0px; left: 6px; width: 47px;"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: auto; height: 100%; overflow-x: hidden; padding: 0px; display: inline-block;"
+            class="TableColumnHeader-header-0"
+            style="cursor: auto; padding: 0px;"
           >
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+            />
             <div
-              class="TableColumnHeader-header-0"
-              data-column-id="__ui5wcr__internal_selection_column"
-              draggable="false"
-            >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              />
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 53px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -5426,28 +5291,25 @@ exports[`AnalyticalTable with highlight row 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 203px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -5489,28 +5351,25 @@ exports[`AnalyticalTable with highlight row 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 353px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -5552,29 +5411,26 @@ exports[`AnalyticalTable with highlight row 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 503px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -5621,6 +5477,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
@@ -5974,7 +5831,6 @@ exports[`AnalyticalTable without selection Column 1`] = `
       class="AnalyticalTable-table-0"
       data-per-page="15"
       role="grid"
-      tabindex="0"
     >
       <header
         class="AnalyticalTable-tableHeaderRow-0"
@@ -5983,28 +5839,25 @@ exports[`AnalyticalTable without selection Column 1`] = `
       >
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="name"
+          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -6046,28 +5899,25 @@ exports[`AnalyticalTable without selection Column 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="age"
+          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Age"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Age
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -6109,28 +5959,25 @@ exports[`AnalyticalTable without selection Column 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.name"
+          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem; max-width: calc(100% - 16px);"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.name"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              title="Friend Name"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+              Friend Name
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -6172,29 +6019,26 @@ exports[`AnalyticalTable without selection Column 1`] = `
         </div>
         <div
           class="AnalyticalTable-th-0"
+          data-column-id="friend.age"
+          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; padding: 0px 0.5rem;"
+            class="TableColumnHeader-header-0"
+            style="cursor: pointer;"
           >
-            <div
-              class="TableColumnHeader-header-0"
-              data-column-id="friend.age"
-              draggable="true"
+            <span
+              style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-              >
-                <span>
-                  Friend Age
-                </span>
+              <span>
+                Friend Age
               </span>
-              <div
-                class="TableColumnHeader-iconContainer-0"
-              />
-            </div>
+            </span>
+            <div
+              class="TableColumnHeader-iconContainer-0"
+            />
           </div>
           <ui5-popover
             horizontal-align="Left"
@@ -6241,6 +6085,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
       >
         <div
           style="height: 220px; width: 100%;"
+          tabindex="0"
         >
           <div
             aria-rowindex="0"
diff --git a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
index 0af3bf335c3..9fe652413eb 100644
--- a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
@@ -2,10 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { array, boolean, number, object, select, text } from '@storybook/addon-knobs';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
-import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
-import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
 import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode';
 import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior';
+import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
+import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import React from 'react';
 import generateData from './generateData';
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index adb0de3a548..b105ecdd18e 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -327,77 +327,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     'onLoadMore'
   ]);
 
-  const currentlyFocusedCell = useRef<HTMLDivElement>(null);
-  const onTableFocus = useCallback(
-    (e) => {
-      if (e.target.getAttribute('role') === 'grid') {
-        const firstCell: HTMLDivElement = e.target.querySelector(
-          'div[role="row"]:first-child div[role="cell"]:first-child'
-        );
-        firstCell.tabIndex = 0;
-        firstCell.focus();
-        currentlyFocusedCell.current = firstCell;
-      }
-    },
-    [currentlyFocusedCell]
-  );
-
-  const onKeyboardNavigation = useCallback(
-    (e) => {
-      if (currentlyFocusedCell.current) {
-        switch (e.key) {
-          case 'ArrowRight': {
-            const newElement = currentlyFocusedCell.current.nextElementSibling as HTMLDivElement;
-            if (newElement) {
-              currentlyFocusedCell.current.tabIndex = -1;
-              newElement.tabIndex = 0;
-              newElement.focus();
-              currentlyFocusedCell.current = newElement;
-            }
-            break;
-          }
-          case 'ArrowLeft': {
-            const newElement = currentlyFocusedCell.current.previousElementSibling as HTMLDivElement;
-            if (newElement) {
-              currentlyFocusedCell.current.tabIndex = -1;
-              newElement.tabIndex = 0;
-              newElement.focus();
-              currentlyFocusedCell.current = newElement;
-            }
-            break;
-          }
-          case 'ArrowDown': {
-            const nextRow = currentlyFocusedCell.current.parentElement.nextElementSibling as HTMLDivElement;
-            if (nextRow) {
-              currentlyFocusedCell.current.tabIndex = -1;
-              const currentColumnIndex = currentlyFocusedCell.current.getAttribute('aria-colindex');
-              const newElement: HTMLDivElement = nextRow.querySelector(`div[aria-colindex="${currentColumnIndex}"]`);
-              newElement.tabIndex = 0;
-              newElement.focus();
-              currentlyFocusedCell.current = newElement;
-            }
-            break;
-          }
-          case 'ArrowUp': {
-            const previousRow = currentlyFocusedCell.current.parentElement.previousElementSibling as HTMLDivElement;
-            if (previousRow) {
-              currentlyFocusedCell.current.tabIndex = -1;
-              const currentColumnIndex = currentlyFocusedCell.current.getAttribute('aria-colindex');
-              const newElement: HTMLDivElement = previousRow.querySelector(
-                `div[aria-colindex="${currentColumnIndex}"]`
-              );
-              newElement.tabIndex = 0;
-              newElement.focus();
-              currentlyFocusedCell.current = newElement;
-            }
-            break;
-          }
-        }
-      }
-    },
-    [currentlyFocusedCell]
-  );
-
   const inlineStyle = useMemo(() => {
     if(tableState.tableClientWidth > 0) {
       return style;
@@ -407,7 +336,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       visibility: 'hidden' as 'hidden'
     };
   }, [tableState.tableClientWidth, style]);
-
+  
   return (
     <div className={className} style={inlineStyle} title={tooltip} ref={analyticalTableRef} {...passThroughProps}>
       {title && <TitleBar>{title}</TitleBar>}
@@ -420,9 +349,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
             aria-rowcount={rows.length}
             aria-colcount={tableInternalColumns.length}
             data-per-page={visibleRows}
-            tabIndex={0}
-            onFocus={onTableFocus}
-            onKeyDown={onKeyboardNavigation}
           >
             {headerGroups.map((headerGroup) => {
               let headerProps = {};
diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
index 427c749fd58..587b70850b3 100644
--- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -1,10 +1,10 @@
 import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow';
 import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
+import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
-import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
 import { VirtualTableRow } from './VirtualTableRow';
 
 interface VirtualTableBodyProps {
@@ -95,6 +95,86 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     [infiniteScroll, infiniteScrollThreshold, onLoadMore, rows.length, internalRowHeight, firedInfiniteLoadEvents]
   );
 
+  const currentlyFocusedCell = useRef<HTMLDivElement>(null);
+  const onTableFocus = useCallback(
+    (e) => {
+      const firstCell: HTMLDivElement = e.target.querySelector(
+        'div[role="row"]:first-child div[role="cell"]:first-child'
+      );
+      firstCell.tabIndex = 0;
+      firstCell.focus();
+      currentlyFocusedCell.current = firstCell;
+    },
+    [currentlyFocusedCell]
+  );
+
+  const onKeyboardNavigation = useCallback(
+    (e) => {
+      if (currentlyFocusedCell.current) {
+        switch (e.key) {
+          case 'ArrowRight': {
+            const newElement = currentlyFocusedCell.current.nextElementSibling as HTMLDivElement;
+            if (newElement) {
+              currentlyFocusedCell.current.tabIndex = -1;
+              newElement.tabIndex = 0;
+              newElement.focus();
+              currentlyFocusedCell.current = newElement;
+            }
+            break;
+          }
+          case 'ArrowLeft': {
+            const newElement = currentlyFocusedCell.current.previousElementSibling as HTMLDivElement;
+            if (newElement) {
+              currentlyFocusedCell.current.tabIndex = -1;
+              newElement.tabIndex = 0;
+              newElement.focus();
+              currentlyFocusedCell.current = newElement;
+            }
+            break;
+          }
+          case 'ArrowDown': {
+            const nextRow = currentlyFocusedCell.current.parentElement.nextElementSibling as HTMLDivElement;
+            if (nextRow) {
+              currentlyFocusedCell.current.tabIndex = -1;
+              const currentColumnIndex = currentlyFocusedCell.current.getAttribute('aria-colindex');
+              const newElement: HTMLDivElement = nextRow.querySelector(`div[aria-colindex="${currentColumnIndex}"]`);
+              newElement.tabIndex = 0;
+              newElement.focus();
+              currentlyFocusedCell.current = newElement;
+            }
+            break;
+          }
+          case 'ArrowUp': {
+            const previousRow = currentlyFocusedCell.current.parentElement.previousElementSibling as HTMLDivElement;
+            if (previousRow) {
+              currentlyFocusedCell.current.tabIndex = -1;
+              const currentColumnIndex = currentlyFocusedCell.current.getAttribute('aria-colindex');
+              const newElement: HTMLDivElement = previousRow.querySelector(
+                `div[aria-colindex="${currentColumnIndex}"]`
+              );
+              newElement.tabIndex = 0;
+              newElement.focus();
+              currentlyFocusedCell.current = newElement;
+            }
+            break;
+          }
+        }
+      }
+    },
+    [currentlyFocusedCell]
+  );
+
+  useEffect(() => {
+    if (innerDivRef.current) {
+      innerDivRef.current.tabIndex = 0;
+      innerDivRef.current.addEventListener('keydown', onKeyboardNavigation);
+      innerDivRef.current.addEventListener('focus', onTableFocus);
+    }
+    return () => {
+      innerDivRef.current.removeEventListener('keydown', onKeyboardNavigation);
+    };
+  }, [onKeyboardNavigation, reactWindowRef, onTableFocus]);
+
   return (
     <FixedSizeList
       className={classNames.valueOf()}
diff --git a/packages/main/src/components/FilterBar/FilterBar.test.tsx b/packages/main/src/components/FilterBar/FilterBar.test.tsx
index 1b2b74555aa..f3915fe93ee 100644
--- a/packages/main/src/components/FilterBar/FilterBar.test.tsx
+++ b/packages/main/src/components/FilterBar/FilterBar.test.tsx
@@ -78,7 +78,7 @@ describe('FilterBar', () => {
     );
     const component = wrapper
       .find('ui5-button')
-      .first()
+      .last()
       .instance() as any;
     component.fireEvent('click');
     expect(wrapper.render()).toMatchSnapshot();
diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
index 790f864e1da..405bbb8dd39 100644
--- a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
+++ b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
@@ -8,24 +8,20 @@ exports[`FilterBar Hide Filter Bar 1`] = `
     class="FilterBar-filterBarHeader-0"
   >
     <div
-      style="display: inline-block; pointer-events: auto;"
+      class="VariantManagement-VariantManagement-0"
     >
-      <div
-        class="VariantManagement-VariantManagement-0"
+      <ui5-title
+        class="VariantManagement-VariantManagementText-0"
+        level="H4"
       >
-        <ui5-title
-          class="VariantManagement-VariantManagementText-0"
-          level="H4"
-        >
-          Variant 1
-        </ui5-title>
-        <ui5-button
-          design="Transparent"
-          icon="navigation-down-arrow"
-        />
-      </div>
+        Variant 1
+      </ui5-title>
+      <ui5-button
+        design="Transparent"
+        icon="navigation-down-arrow"
+      />
     </div>
-    <ui5-popover
+    <ui5-responsive-popover
       header-text="Variants"
       horizontal-align="Center"
       initial-focus=""
@@ -63,7 +59,7 @@ exports[`FilterBar Hide Filter Bar 1`] = `
           Variant 2
         </ui5-li>
       </ui5-list>
-    </ui5-popover>
+    </ui5-responsive-popover>
     <div
       class="FilterBar-headerRowRight-0"
     >
@@ -71,12 +67,12 @@ exports[`FilterBar Hide Filter Bar 1`] = `
         design="Transparent"
         icon=""
       >
-        Hide Filter Bar
+        Show Filter Bar
       </ui5-button>
     </div>
   </div>
   <div
-    class="FilterBar-filterArea-0 FilterBar-filterAreaOpen-0"
+    class="FilterBar-filterArea-0 FilterBar-filterAreaClosed-0"
   >
     <div
       class="FilterItem-filterItem-0"
@@ -161,24 +157,20 @@ exports[`FilterBar Render without crashing 1`] = `
     class="FilterBar-filterBarHeader-0"
   >
     <div
-      style="display: inline-block; pointer-events: auto;"
+      class="VariantManagement-VariantManagement-0"
     >
-      <div
-        class="VariantManagement-VariantManagement-0"
+      <ui5-title
+        class="VariantManagement-VariantManagementText-0"
+        level="H4"
       >
-        <ui5-title
-          class="VariantManagement-VariantManagementText-0"
-          level="H4"
-        >
-          Variant 1
-        </ui5-title>
-        <ui5-button
-          design="Transparent"
-          icon="navigation-down-arrow"
-        />
-      </div>
+        Variant 1
+      </ui5-title>
+      <ui5-button
+        design="Transparent"
+        icon="navigation-down-arrow"
+      />
     </div>
-    <ui5-popover
+    <ui5-responsive-popover
       header-text="Variants"
       horizontal-align="Center"
       initial-focus=""
@@ -216,7 +208,7 @@ exports[`FilterBar Render without crashing 1`] = `
           Variant 2
         </ui5-li>
       </ui5-list>
-    </ui5-popover>
+    </ui5-responsive-popover>
     <div
       class="FilterBar-vLine-0"
     >
@@ -305,24 +297,20 @@ exports[`FilterBar Select Filter Item 1`] = `
     class="FilterBar-filterBarHeader-0"
   >
     <div
-      style="display: inline-block; pointer-events: auto;"
+      class="VariantManagement-VariantManagement-0"
     >
-      <div
-        class="VariantManagement-VariantManagement-0"
+      <ui5-title
+        class="VariantManagement-VariantManagementText-0"
+        level="H4"
       >
-        <ui5-title
-          class="VariantManagement-VariantManagementText-0"
-          level="H4"
-        >
-          Variant 1
-        </ui5-title>
-        <ui5-button
-          design="Transparent"
-          icon="navigation-down-arrow"
-        />
-      </div>
+        Variant 1
+      </ui5-title>
+      <ui5-button
+        design="Transparent"
+        icon="navigation-down-arrow"
+      />
     </div>
-    <ui5-popover
+    <ui5-responsive-popover
       header-text="Variants"
       horizontal-align="Center"
       initial-focus=""
@@ -360,7 +348,7 @@ exports[`FilterBar Select Filter Item 1`] = `
           Variant 2
         </ui5-li>
       </ui5-list>
-    </ui5-popover>
+    </ui5-responsive-popover>
     <div
       class="FilterBar-headerRowRight-0"
     >
diff --git a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
index de7040ec1c8..328cb151b8d 100644
--- a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
+++ b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`MessageBox Confirm - Cancel 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -57,7 +57,7 @@ exports[`MessageBox Confirm - Cancel 1`] = `
 exports[`MessageBox Confirm - OK 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -111,7 +111,7 @@ exports[`MessageBox Confirm - OK 1`] = `
 exports[`MessageBox Error 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -157,7 +157,7 @@ exports[`MessageBox Error 1`] = `
 exports[`MessageBox Information 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -203,7 +203,7 @@ exports[`MessageBox Information 1`] = `
 exports[`MessageBox No Title 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -257,7 +257,7 @@ exports[`MessageBox No Title 1`] = `
 exports[`MessageBox Not open 1`] = `
 <ui5-dialog
   header-text=""
-  open="false"
+  initial-focus=""
 >
   <header
     class="MessageBox-header-0"
@@ -302,7 +302,7 @@ exports[`MessageBox Not open 1`] = `
 exports[`MessageBox Show 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -356,7 +356,7 @@ exports[`MessageBox Show 1`] = `
 exports[`MessageBox Success 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -402,7 +402,7 @@ exports[`MessageBox Success 1`] = `
 exports[`MessageBox Success w/ custom title 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
@@ -448,7 +448,7 @@ exports[`MessageBox Success w/ custom title 1`] = `
 exports[`MessageBox Warning 1`] = `
 <ui5-dialog
   header-text=""
-  open="true"
+  initial-focus=""
   opened=""
 >
   <header
diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx
index 1a0489e14a2..e52229bf14c 100644
--- a/packages/main/src/components/MessageBox/index.tsx
+++ b/packages/main/src/components/MessageBox/index.tsx
@@ -4,8 +4,10 @@ import '@ui5/webcomponents-icons/dist/icons/message-information';
 import '@ui5/webcomponents-icons/dist/icons/message-success';
 import '@ui5/webcomponents-icons/dist/icons/message-warning';
 import '@ui5/webcomponents-icons/dist/icons/question-mark';
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
+import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { Dialog } from '@ui5/webcomponents-react/lib/Dialog';
@@ -15,8 +17,7 @@ import { MessageBoxTypes } from '@ui5/webcomponents-react/lib/MessageBoxTypes';
 import { Text } from '@ui5/webcomponents-react/lib/Text';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
-import React, { FC, forwardRef, isValidElement, ReactNode, Ref, useCallback, useMemo } from 'react';
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
+import React, { FC, forwardRef, isValidElement, ReactNode, Ref, useCallback, useEffect, useMemo } from 'react';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Ui5DialogDomRef } from '../../interfaces/Ui5DialogDomRef';
 import styles from './MessageBox.jss';
@@ -28,7 +29,7 @@ export interface MessageBoxPropTypes extends CommonProps {
   actions?: MessageBoxActions[];
   icon?: ReactNode;
   type?: MessageBoxTypes;
-  onClose: (event: CustomEvent<{action: MessageBoxActions}>) => void;
+  onClose: (event: CustomEvent<{ action: MessageBoxActions }>) => void;
 }
 
 const useStyles = createComponentStyles(styles, { name: 'MessageBox' });
@@ -103,13 +104,24 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
     [onClose]
   );
 
+  const dialogRef = useConsolidatedRef<Ui5DialogDomRef>(ref);
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      if (open) {
+        dialogRef.current.open();
+      } else {
+        dialogRef.current.close();
+      }
+    }
+  }, [open, dialogRef]);
+
   const passThroughProps = usePassThroughHtmlProps(props, ['onClose']);
 
   return (
     <Dialog
-      open={open}
       slot={slot}
-      ref={ref}
+      ref={dialogRef}
       style={style}
       tooltip={tooltip}
       className={className}
diff --git a/packages/main/src/components/SideNavigationListItem/index.tsx b/packages/main/src/components/SideNavigationListItem/index.tsx
index ce081989729..46d580b234b 100644
--- a/packages/main/src/components/SideNavigationListItem/index.tsx
+++ b/packages/main/src/components/SideNavigationListItem/index.tsx
@@ -158,7 +158,7 @@ const SideNavigationListItem: FC<SideNavigationListItemProps> = forwardRef(
               {displayedIcon}
               <div className={classes.condensedExpandTriangle} />
               {createPortal(
-                <Popover ref={popoverRef} open={isExpanded} verticalAlign={PopoverVerticalAlign.Top}>
+                <Popover ref={popoverRef} verticalAlign={PopoverVerticalAlign.Top}>
                   <List onItemClick={props['onListItemSelected']}>
                     <StandardListItem selected={isSelfSelected} data-id={id} tooltip={tooltip}>
                       {text}
diff --git a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap
index b860208e125..0cb4bd1dac9 100644
--- a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap
+++ b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap
@@ -3,24 +3,20 @@
 exports[`VariantManagement Render without crashing 1`] = `
 Array [
   <div
-    style="display: inline-block; pointer-events: auto;"
+    class="VariantManagement-VariantManagement-0"
   >
-    <div
-      class="VariantManagement-VariantManagement-0"
+    <ui5-title
+      class="VariantManagement-VariantManagementText-0"
+      level="H4"
     >
-      <ui5-title
-        class="VariantManagement-VariantManagementText-0"
-        level="H4"
-      >
-        Variant 1
-      </ui5-title>
-      <ui5-button
-        design="Transparent"
-        icon="navigation-down-arrow"
-      />
-    </div>
+      Variant 1
+    </ui5-title>
+    <ui5-button
+      design="Transparent"
+      icon="navigation-down-arrow"
+    />
   </div>,
-  <ui5-popover
+  <ui5-responsive-popover
     header-text="Variants"
     horizontal-align="Center"
     initial-focus=""
@@ -58,6 +54,6 @@ Array [
         Variant 2
       </ui5-li>
     </ui5-list>
-  </ui5-popover>,
+  </ui5-responsive-popover>,
 ]
 `;
diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx
index 9b2ba3664ca..af53980c181 100644
--- a/packages/main/src/components/VariantManagement/index.tsx
+++ b/packages/main/src/components/VariantManagement/index.tsx
@@ -1,20 +1,21 @@
 import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow';
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { List } from '@ui5/webcomponents-react/lib/List';
 import { ListItemTypes } from '@ui5/webcomponents-react/lib/ListItemTypes';
 import { ListMode } from '@ui5/webcomponents-react/lib/ListMode';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
-import { Popover } from '@ui5/webcomponents-react/lib/Popover';
+import { ResponsivePopover } from '@ui5/webcomponents-react/lib/ResponsivePopover';
 import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
-import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useState } from 'react';
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
+import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef';
 
 export interface VariantItem {
   key: string;
@@ -84,8 +85,10 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
       closeOnItemSelect,
       disabled
     } = props;
+
     const classes = useStyles();
-    const [open, setOpen] = useState(false);
+    const popoverRef = useRef<Ui5ResponsivePopoverDomRef>(null);
+
     const [selectedKey, setSelectedKey] = useState(
       initialSelectedKey ? initialSelectedKey : variantItems?.[0]?.key ?? null
     );
@@ -101,12 +104,15 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
     }, [initialSelectedKey, setSelectedKey]);
 
     const handleCancelButtonClick = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
+      popoverRef.current.close();
+    }, [popoverRef]);
 
-    const handleAfterOpen = useCallback(() => {
-      setOpen(true);
-    }, [setOpen]);
+    const handleOpenVariantManagement = useCallback(
+      (e) => {
+        popoverRef.current.open(e.target);
+      },
+      [popoverRef]
+    );
 
     const footerButtons = useMemo(() => {
       return (
@@ -120,23 +126,12 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
       return variantItems.find((item) => item.key === key);
     };
 
-    const variantManagementButton = useMemo(() => {
-      const selectedItem = getItemByKey(selectedKey) || variantItems[0];
-
-      let textClasses = classes.VariantManagementText;
-      if (disabled) {
-        textClasses += ` ${classes.disabled}`;
-      }
+    const selectedItem = getItemByKey(selectedKey) || variantItems[0];
 
-      return (
-        <div className={classes.VariantManagement}>
-          <Title level={level} className={textClasses}>
-            {selectedItem.label}
-          </Title>
-          <Button design={ButtonDesign.Transparent} icon="navigation-down-arrow" disabled={disabled} />
-        </div>
-      );
-    }, [classes, variantItems, level, selectedKey, disabled]);
+    let textClasses = classes.VariantManagementText;
+    if (disabled) {
+      textClasses += ` ${classes.disabled}`;
+    }
 
     const handleVariantItemSelect = useCallback(
       (event) => {
@@ -153,35 +148,43 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
     const passThroughProps = usePassThroughHtmlProps(props, ['onSelect']);
 
     return (
-      <Popover
-        ref={ref}
-        open={open}
-        headerText={popupTitle}
-        placementType={placement}
-        openBy={variantManagementButton}
-        openByStyle={{ pointerEvents: disabled ? 'none' : 'auto' }}
-        footer={footerButtons}
-        className={className}
-        style={style}
-        tooltip={tooltip}
-        {...passThroughProps}
-        // @ts-ignore
-        onAfterOpen={handleAfterOpen}
-      >
-        <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
-          {variantItems.map((item) => (
-            <StandardListItem
-              style={{ width: '300px' }}
-              data-key={item.key}
-              type={ListItemTypes.Active}
-              key={item.key}
-              selected={selectedKey === item.key}
-            >
-              {item.label}
-            </StandardListItem>
-          ))}
-        </List>
-      </Popover>
+      <>
+        <div className={classes.VariantManagement}>
+          <Title level={level} className={textClasses}>
+            {selectedItem.label}
+          </Title>
+          <Button
+            onClick={handleOpenVariantManagement}
+            design={ButtonDesign.Transparent}
+            icon="navigation-down-arrow"
+            disabled={disabled}
+          />
+        </div>
+        <ResponsivePopover
+          ref={popoverRef}
+          headerText={popupTitle}
+          placementType={placement}
+          footer={footerButtons}
+          className={className}
+          style={style}
+          tooltip={tooltip}
+          {...passThroughProps}
+        >
+          <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
+            {variantItems.map((item) => (
+              <StandardListItem
+                style={{ width: '300px' }}
+                data-key={item.key}
+                type={ListItemTypes.Active}
+                key={item.key}
+                selected={selectedKey === item.key}
+              >
+                {item.label}
+              </StandardListItem>
+            ))}
+          </List>
+        </ResponsivePopover>
+      </>
     );
   }
 );
diff --git a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
index 2c238a97b0a..190c675397f 100644
--- a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
+++ b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
@@ -1,29 +1,40 @@
 import { action } from '@storybook/addon-actions';
 import { boolean, text } from '@storybook/addon-knobs';
+import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { Dialog } from '@ui5/webcomponents-react/lib/Dialog';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 export default {
   title: 'UI5 Web Components / Dialog',
   component: Dialog
 };
 
-export const generatedDefaultStory = () => (
-  <Dialog
-    stretch={boolean('stretch', false)}
-    headerText={text('headerText', 'Dialog Header Text')}
-    initialFocus={text('initialFocus', '')}
-    footer={<span>Footer</span>}
-    header={null}
-    onAfterClose={action('onAfterClose')}
-    onAfterOpen={action('onAfterOpen')}
-    onBeforeClose={action('onBeforeClose')}
-    onBeforeOpen={action('onBeforeOpen')}
-    open={boolean('open', true)}
-  >
-    Some Content
-  </Dialog>
-);
+export const generatedDefaultStory = () => {
+  const dialogRef = useRef();
+  const onButtonClick = useCallback(() => {
+    dialogRef.current.open();
+  }, [dialogRef]);
+
+  return (
+    <>
+      <Button onClick={onButtonClick}>Open Dialog</Button>
+      <Dialog
+        ref={dialogRef}
+        stretch={boolean('stretch', false)}
+        headerText={text('headerText', 'Dialog Header Text')}
+        initialFocus={text('initialFocus', '')}
+        footer={<span>Footer</span>}
+        header={null}
+        onAfterClose={action('onAfterClose')}
+        onAfterOpen={action('onAfterOpen')}
+        onBeforeClose={action('onBeforeClose')}
+        onBeforeOpen={action('onBeforeOpen')}
+      >
+        Some Content
+      </Dialog>
+    </>
+  );
+};
 
 generatedDefaultStory.story = {
   name: 'Generated default story'
diff --git a/packages/main/src/webComponents/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/main/src/webComponents/Dialog/__snapshots__/Dialog.test.tsx.snap
index 71b22b10a05..ad48f7ff869 100644
--- a/packages/main/src/webComponents/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/main/src/webComponents/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -3,5 +3,6 @@
 exports[`Dialog Basic Test (generated) 1`] = `
 <ui5-dialog
   header-text=""
+  initial-focus=""
 />
 `;
diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx
index 8d83870482c..e90184524ea 100644
--- a/packages/main/src/webComponents/Dialog/index.tsx
+++ b/packages/main/src/webComponents/Dialog/index.tsx
@@ -1,9 +1,6 @@
-import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
 import UI5Dialog from '@ui5/webcomponents/dist/Dialog';
-import React, { FC, ReactNode, RefForwardingComponent, RefObject, useEffect } from 'react';
-import { Ui5DialogDomRef } from '../../interfaces/Ui5DialogDomRef';
-import { Ui5DomRef } from '../../interfaces/Ui5DomRef';
+import React, { FC, ReactNode } from 'react';
 import { WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface DialogPropTypes extends WithWebComponentPropTypes {
@@ -20,17 +17,17 @@ export interface DialogPropTypes extends WithWebComponentPropTypes {
    */
   initialFocus?: string;
   /**
-   * Defines the header HTML Element.
+   * Defines the content of the Web Component.
    */
-  header?: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[];
   /**
    * Defines the footer HTML Element.
    */
   footer?: ReactNode | ReactNode[];
   /**
-   * Defines the content of the Web Component.
+   * Defines the header HTML Element.
    */
-  children?: ReactNode | ReactNode[];
+  header?: ReactNode | ReactNode[];
   /**
    * Fired after the component is closed.
    */
@@ -47,40 +44,21 @@ export interface DialogPropTypes extends WithWebComponentPropTypes {
    * Fired before the component is opened.
    */
   onBeforeOpen?: (event: CustomEvent<{}>) => void;
-  open?: boolean;
 }
 
-const InnerDialog: RefForwardingComponent<Ui5DomRef, DialogPropTypes> = withWebComponent<DialogPropTypes>(UI5Dialog);
-
 /**
  * <code>import { Dialog } from '@ui5/webcomponents-react/lib/Dialog';</code>
  * <br />
  * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Dialog" target="_blank">UI5 Web Components Playground</a>
  */
-const Dialog: FC<DialogPropTypes> = React.forwardRef(
-  (props: DialogPropTypes, dialogRef: RefObject<Ui5DialogDomRef>) => {
-    const localDialogRef = useConsolidatedRef<Ui5DialogDomRef>(dialogRef);
-
-    const setDialogOpen = (open) => {
-      if (!localDialogRef.current || !localDialogRef.current.open) {
-        return;
-      }
-      return open ? localDialogRef.current.open() : localDialogRef.current.close();
-    };
-
-    useEffect(() => {
-      setDialogOpen(props.open);
-    }, [props.open]);
+const Dialog: FC<DialogPropTypes> = withWebComponent<DialogPropTypes>(UI5Dialog);
 
-    return <InnerDialog {...props} ref={localDialogRef} />;
-  }
-);
+Dialog.displayName = 'Dialog';
 
 Dialog.defaultProps = {
-  initialFocus: null,
-  headerText: ''
+  stretch: false,
+  headerText: '',
+  initialFocus: ''
 };
 
-Dialog.displayName = 'Dialog';
-
 export { Dialog };
diff --git a/packages/main/src/webComponents/Popover/Popover.stories.tsx b/packages/main/src/webComponents/Popover/Popover.stories.tsx
index 0cdd7dcf000..09ca66044f9 100644
--- a/packages/main/src/webComponents/Popover/Popover.stories.tsx
+++ b/packages/main/src/webComponents/Popover/Popover.stories.tsx
@@ -5,46 +5,59 @@ import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import { Popover } from '@ui5/webcomponents-react/lib/Popover';
 import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign';
 import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVerticalAlign';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 export default {
   title: 'UI5 Web Components / Popover',
   component: Popover
 };
 
-export const generatedDefaultStory = () => (
-  <Popover
-    allowTargetOverlap={boolean('allowTargetOverlap', true)}
-    headerText={text('headerText', '')}
-    horizontalAlign={select('horizontalAlign', PopoverHorizontalAlign, PopoverHorizontalAlign.Center)}
-    initialFocus={text('initialFocus', '')}
-    modal={boolean('modal', false)}
-    noArrow={boolean('noArrow', false)}
-    placementType={select('placementType', PlacementType, PlacementType.Right)}
-    verticalAlign={select('verticalAlign', PopoverVerticalAlign, PopoverVerticalAlign.Center)}
-    footer={
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          width: 'calc(100% - 1rem)',
-          height: '2.5rem'
-        }}
+export const generatedDefaultStory = () => {
+  const popoverRef = useRef();
+  const onButtonClick = useCallback(
+    (e) => {
+      popoverRef.current.openBy(e.target);
+    },
+    [popoverRef]
+  );
+
+  return (
+    <>
+      <Button onClick={onButtonClick}>Open Popover</Button>
+      <Popover
+        ref={popoverRef}
+        allowTargetOverlap={boolean('allowTargetOverlap', true)}
+        headerText={text('headerText', 'Popover Header Text')}
+        horizontalAlign={select('horizontalAlign', PopoverHorizontalAlign, PopoverHorizontalAlign.Center)}
+        initialFocus={text('initialFocus', '')}
+        modal={boolean('modal', false)}
+        noArrow={boolean('noArrow', false)}
+        placementType={select('placementType', PlacementType, PlacementType.Right)}
+        verticalAlign={select('verticalAlign', PopoverVerticalAlign, PopoverVerticalAlign.Center)}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              width: 'calc(100% - 1rem)',
+              height: '2.5rem'
+            }}
+          >
+            <Button>Button</Button>
+          </div>
+        }
+        header={null}
+        onAfterClose={action('onAfterClose')}
+        onAfterOpen={action('onAfterOpen')}
+        onBeforeClose={action('onBeforeClose')}
+        onBeforeOpen={action('onBeforeOpen')}
       >
-        <Button>Button</Button>
-      </div>
-    }
-    header={null}
-    onAfterClose={action('onAfterClose')}
-    onAfterOpen={action('onAfterOpen')}
-    onBeforeClose={action('onBeforeClose')}
-    onBeforeOpen={action('onBeforeOpen')}
-    openBy={<Button>Open Popover</Button>}
-  >
-    Some Content
-  </Popover>
-);
+        Some Content
+      </Popover>
+    </>
+  );
+};
 
 generatedDefaultStory.story = {
   name: 'Generated default story'
diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx
index 52055ffd6dc..7ffc8d32b6d 100644
--- a/packages/main/src/webComponents/Popover/index.tsx
+++ b/packages/main/src/webComponents/Popover/index.tsx
@@ -1,12 +1,9 @@
-import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign';
 import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVerticalAlign';
 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
 import UI5Popover from '@ui5/webcomponents/dist/Popover';
-import React, { FC, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef';
-import { UI5WebComponentsReactPopoverPropTypes } from '../../interfaces/UI5WebComponentsReactPopoverPropTypes';
+import React, { FC, ReactNode } from 'react';
 import { WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface PopoverPropTypes extends WithWebComponentPropTypes {
@@ -43,17 +40,17 @@ export interface PopoverPropTypes extends WithWebComponentPropTypes {
    */
   verticalAlign?: PopoverVerticalAlign;
   /**
-   * Defines the header HTML Element.
+   * Defines the content of the Web Component.
    */
-  header?: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[];
   /**
    * Defines the footer HTML Element.
    */
   footer?: ReactNode | ReactNode[];
   /**
-   * Defines the content of the Web Component.
+   * Defines the header HTML Element.
    */
-  children?: ReactNode | ReactNode[];
+  header?: ReactNode | ReactNode[];
   /**
    * Fired after the component is closed.
    */
@@ -72,66 +69,14 @@ export interface PopoverPropTypes extends WithWebComponentPropTypes {
   onBeforeOpen?: (event: CustomEvent<{}>) => void;
 }
 
-const InternalPopover = withWebComponent<PopoverPropTypes>(UI5Popover);
-
 /**
  * <code>import { Popover } from '@ui5/webcomponents-react/lib/Popover';</code>
  * <br />
  * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Popover" target="_blank">UI5 Web Components Playground</a>
  */
-const Popover: FC<PopoverPropTypes & UI5WebComponentsReactPopoverPropTypes> = React.forwardRef(
-  (props: PopoverPropTypes & UI5WebComponentsReactPopoverPropTypes, givenRef: RefObject<Ui5PopoverDomRef>) => {
-    const { propagateOpenByClickEvent, openBy, openByStyle, open, ...rest } = props;
+const Popover: FC<PopoverPropTypes> = withWebComponent<PopoverPropTypes>(UI5Popover);
 
-    const openByRef: RefObject<HTMLDivElement> = useRef(null);
-
-    const internalPopoverRef = useConsolidatedRef<Ui5PopoverDomRef>(givenRef);
-
-    const handleOpenPopover = useCallback(
-      (e) => {
-        if (internalPopoverRef.current) {
-          internalPopoverRef.current.openBy(openByRef.current);
-        }
-        if (e && !propagateOpenByClickEvent) {
-          e.stopPropagation();
-        }
-      },
-      [internalPopoverRef, openByRef]
-    );
-
-    const closePopover = useCallback(() => {
-      if (internalPopoverRef.current) {
-        internalPopoverRef.current.close();
-      }
-    }, [internalPopoverRef]);
-
-    useEffect(() => {
-      if (open) {
-        handleOpenPopover(null);
-      } else {
-        closePopover();
-      }
-    }, [open]);
-
-    const style = useMemo(() => {
-      return {
-        display: 'inline-block',
-        ...openByStyle
-      };
-    }, [openByStyle]);
-
-    return (
-      <>
-        {openBy && (
-          <div style={style} onClick={handleOpenPopover} ref={openByRef}>
-            {openBy}
-          </div>
-        )}
-        <InternalPopover {...rest} ref={internalPopoverRef} />
-      </>
-    );
-  }
-);
+Popover.displayName = 'Popover';
 
 Popover.defaultProps = {
   allowTargetOverlap: false,
@@ -140,10 +85,7 @@ Popover.defaultProps = {
   modal: false,
   noArrow: false,
   placementType: PlacementType.Right,
-  verticalAlign: PopoverVerticalAlign.Center,
-  propagateOpenByClickEvent: true
+  verticalAlign: PopoverVerticalAlign.Center
 };
 
-Popover.displayName = 'Popover';
-
 export { Popover };
diff --git a/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx b/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx
index a0c7e76e760..42db94162d2 100644
--- a/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx
+++ b/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx
@@ -5,46 +5,59 @@ import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign';
 import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVerticalAlign';
 import { ResponsivePopover } from '@ui5/webcomponents-react/lib/ResponsivePopover';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 export default {
   title: 'UI5 Web Components / ResponsivePopover',
   component: ResponsivePopover
 };
 
-export const generatedDefaultStory = () => (
-  <ResponsivePopover
-    allowTargetOverlap={boolean('allowTargetOverlap', true)}
-    headerText={text('headerText', 'Responsive Popover Header')}
-    horizontalAlign={select('horizontalAlign', PopoverHorizontalAlign, PopoverHorizontalAlign['Center'])}
-    initialFocus={text('initialFocus', '')}
-    modal={boolean('modal', false)}
-    noArrow={boolean('noArrow', false)}
-    placementType={select('placementType', PlacementType, PlacementType['Right'])}
-    verticalAlign={select('verticalAlign', PopoverVerticalAlign, PopoverVerticalAlign['Center'])}
-    footer={
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          width: 'calc(100% - 1rem)',
-          height: '2.5rem'
-        }}
+export const generatedDefaultStory = () => {
+  const popoverRef = useRef();
+  const onButtonClick = useCallback(
+    (e) => {
+      popoverRef.current.open(e.target);
+    },
+    [popoverRef]
+  );
+
+  return (
+    <>
+      <Button onClick={onButtonClick}>Open Responsive Popover</Button>
+      <ResponsivePopover
+        ref={popoverRef}
+        allowTargetOverlap={boolean('allowTargetOverlap', true)}
+        headerText={text('headerText', 'Responsive Popover Header')}
+        horizontalAlign={select('horizontalAlign', PopoverHorizontalAlign, PopoverHorizontalAlign.Center)}
+        initialFocus={text('initialFocus', '')}
+        modal={boolean('modal', false)}
+        noArrow={boolean('noArrow', false)}
+        placementType={select('placementType', PlacementType, PlacementType.Right)}
+        verticalAlign={select('verticalAlign', PopoverVerticalAlign, PopoverVerticalAlign.Center)}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              width: 'calc(100% - 1rem)',
+              height: '2.5rem'
+            }}
+          >
+            <Button>Button</Button>
+          </div>
+        }
+        header={null}
+        onAfterClose={action('onAfterClose')}
+        onAfterOpen={action('onAfterOpen')}
+        onBeforeClose={action('onBeforeClose')}
+        onBeforeOpen={action('onBeforeOpen')}
       >
-        <Button>Button</Button>
-      </div>
-    }
-    header={null}
-    onAfterClose={action('onAfterClose')}
-    onAfterOpen={action('onAfterOpen')}
-    onBeforeClose={action('onBeforeClose')}
-    onBeforeOpen={action('onBeforeOpen')}
-    openBy={<Button>Open Responsive Popover</Button>}
-  >
-    Some Content
-  </ResponsivePopover>
-);
+        Some Content
+      </ResponsivePopover>
+    </>
+  );
+};
 
 generatedDefaultStory.story = {
   name: 'Generated default story'
diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx
index a1cf534f479..2a2e0417bff 100644
--- a/packages/main/src/webComponents/ResponsivePopover/index.tsx
+++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx
@@ -1,12 +1,9 @@
-import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign';
 import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVerticalAlign';
 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
 import UI5ResponsivePopover from '@ui5/webcomponents/dist/ResponsivePopover';
-import React, { FC, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef';
-import { UI5WebComponentsReactPopoverPropTypes } from '../../interfaces/UI5WebComponentsReactPopoverPropTypes';
+import React, { FC, ReactNode } from 'react';
 import { WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface ResponsivePopoverPropTypes extends WithWebComponentPropTypes {
@@ -43,17 +40,17 @@ export interface ResponsivePopoverPropTypes extends WithWebComponentPropTypes {
    */
   verticalAlign?: PopoverVerticalAlign;
   /**
-   * Defines the header HTML Element.
+   * Defines the content of the Web Component.
    */
-  header?: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[];
   /**
    * Defines the footer HTML Element.
    */
   footer?: ReactNode | ReactNode[];
   /**
-   * Defines the content of the Web Component.
+   * Defines the header HTML Element.
    */
-  children?: ReactNode | ReactNode[];
+  header?: ReactNode | ReactNode[];
   /**
    * Fired after the component is closed.
    */
@@ -72,67 +69,13 @@ export interface ResponsivePopoverPropTypes extends WithWebComponentPropTypes {
   onBeforeOpen?: (event: CustomEvent<{}>) => void;
 }
 
-const ResponsivePopoverWebComponent = withWebComponent<ResponsivePopoverPropTypes>(UI5ResponsivePopover);
-
 /**
  * <code>import { ResponsivePopover } from '@ui5/webcomponents-react/lib/ResponsivePopover';</code>
  * <br />
  * <a href="https://sap.github.io/ui5-webcomponents/playground/components/ResponsivePopover" target="_blank">UI5 Web Components Playground</a>
  */
-const ResponsivePopover: FC<ResponsivePopoverPropTypes & UI5WebComponentsReactPopoverPropTypes> = React.forwardRef(
-  (
-    props: ResponsivePopoverPropTypes & UI5WebComponentsReactPopoverPropTypes,
-    givenRef: RefObject<Ui5ResponsivePopoverDomRef>
-  ) => {
-    const { propagateOpenByClickEvent, openBy, openByStyle, open, ...rest } = props;
-    const openByRef: RefObject<HTMLDivElement> = useRef(null);
-
-    const internalPopoverRef = useConsolidatedRef<Ui5ResponsivePopoverDomRef>(givenRef);
-
-    const handleOpenPopover = useCallback(
-      (e) => {
-        if (internalPopoverRef.current) {
-          internalPopoverRef.current.open(openByRef.current);
-        }
-        if (e && !propagateOpenByClickEvent) {
-          e.stopPropagation();
-        }
-      },
-      [internalPopoverRef, openByRef]
-    );
-
-    const closePopover = useCallback(() => {
-      if (internalPopoverRef.current) {
-        internalPopoverRef.current.close();
-      }
-    }, [internalPopoverRef]);
-
-    useEffect(() => {
-      if (open) {
-        handleOpenPopover(null);
-      } else {
-        closePopover();
-      }
-    }, [open]);
-
-    const style = useMemo(() => {
-      return {
-        display: 'inline-block',
-        ...openByStyle
-      };
-    }, [openByStyle]);
-
-    return (
-      <>
-        {openBy && (
-          <div style={style} onClick={handleOpenPopover} ref={openByRef}>
-            {openBy}
-          </div>
-        )}
-        <ResponsivePopoverWebComponent {...rest} ref={internalPopoverRef} />
-      </>
-    );
-  }
+const ResponsivePopover: FC<ResponsivePopoverPropTypes> = withWebComponent<ResponsivePopoverPropTypes>(
+  UI5ResponsivePopover
 );
 
 ResponsivePopover.displayName = 'ResponsivePopover';
@@ -144,8 +87,7 @@ ResponsivePopover.defaultProps = {
   modal: false,
   noArrow: false,
   placementType: PlacementType.Right,
-  verticalAlign: PopoverVerticalAlign.Center,
-  propagateOpenByClickEvent: true
+  verticalAlign: PopoverVerticalAlign.Center
 };
 
 export { ResponsivePopover };
diff --git a/shared/tests/utils.tsx b/shared/tests/utils.tsx
index 21b7f09e8e2..ddfb67c9fb0 100644
--- a/shared/tests/utils.tsx
+++ b/shared/tests/utils.tsx
@@ -1,6 +1,4 @@
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
-import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React, { ComponentType } from 'react';
 
 export const modifyObjectProperty = (object: any, attr: string, value: any) => {