From 253a963b73b28cb859ef2cacea2a88a58b1f6635 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Wed, 4 Dec 2019 15:10:18 +0100
Subject: [PATCH 1/7] refactor(AnalyticalTable): update react-table and replace
 grid layout with absolute layout

BREAKING CHANGE: Update `react-table` to `7.0.0-rc.23`
---
 packages/main/package.json                    |   2 +-
 .../AnalyticalTable/AnayticalTable.jss.ts     |   2 -
 .../AnalyticalTable/ColumnHeader/Resizer.tsx  |  65 -----
 .../AnalyticalTable/ColumnHeader/index.tsx    |  60 +++--
 .../AnalyticalTable/defaults/Column/index.tsx |   7 +-
 .../defaults/FilterComponent/index.tsx        |   4 +-
 .../AnalyticalTable/hooks/useCellStyling.ts   |  16 +-
 .../AnalyticalTable/hooks/useDragAndDrop.ts   |   6 +-
 .../AnalyticalTable/hooks/useResizeColumns.ts |  24 --
 .../hooks/useTableCellStyling.ts              |  17 +-
 .../hooks/useTableHeaderGroupStyling.ts       |  28 +--
 .../hooks/useTableHeaderStyling.ts            |  30 ++-
 .../hooks/useTableRowStyling.ts               |  85 +++----
 .../AnalyticalTable/hooks/useTableStyling.ts  |  27 +--
 .../hooks/useToggleRowExpand.ts               |  40 ++--
 .../AnalyticalTable/hooks/useWindowResize.ts  |  43 ----
 .../components/AnalyticalTable/hooks/utils.ts |   6 +-
 .../src/components/AnalyticalTable/index.tsx  | 225 ++++++++++--------
 .../AnalyticalTable/types/ColumnType.ts       |   5 +-
 .../virtualization/VirtualTableBody.tsx       |  39 +--
 .../virtualization/VirtualTableRow.tsx        |  11 +-
 yarn.lock                                     |   8 +-
 22 files changed, 297 insertions(+), 453 deletions(-)
 delete mode 100644 packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx
 delete mode 100644 packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts
 delete mode 100644 packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts

diff --git a/packages/main/package.json b/packages/main/package.json
index d314cf9d1b3..f57c825e7bc 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -29,7 +29,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-beta.20",
+    "react-table": "7.0.0-beta.23",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },
diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
index cb046f30a2d..8261a9fa12c 100644
--- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
+++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
@@ -15,7 +15,6 @@ const styles = ({ parameters }: JSSTheme) => ({
   tableHeaderRow: {
     boxShadow: 'none !important',
     height: '2.75rem',
-    display: 'grid',
     zIndex: 1,
     position: 'relative'
   },
@@ -58,7 +57,6 @@ const styles = ({ parameters }: JSSTheme) => ({
     }
   },
   tr: {
-    display: 'grid',
     zIndex: 0,
     backgroundColor: parameters.sapUiListBackground,
     color: parameters.sapUiListTextColor
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx
deleted file mode 100644
index a4c7a400339..00000000000
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { RefObject, useCallback, useRef } from 'react';
-
-const Resizer = (props) => {
-  const { column } = props;
-  const { key } = column.getHeaderProps();
-
-  const parentWidth = useRef(0);
-  const startX = useRef(0);
-  const resizerRef: RefObject<HTMLDivElement> = useRef();
-  const onColumnSizeChanged = props['onColumnSizeChanged'];
-  const onColumnBeingResized = props['onColumnBeingResized'];
-
-  const onResize = useCallback(
-    (e) => {
-      e.stopPropagation();
-      const pageX = e.pageX;
-      const newWidth = Math.round(Math.max(parentWidth.current + pageX - startX.current, column.minWidth));
-      onColumnSizeChanged({
-        column,
-        width: newWidth
-      });
-    },
-    [column, parentWidth, key, startX, onColumnSizeChanged]
-  );
-
-  const onEndResize = useCallback(
-    (e) => {
-      e.stopPropagation();
-      document.removeEventListener('mousemove', onResize);
-      document.removeEventListener('mouseup', onEndResize);
-      document.removeEventListener('mouseleave', onEndResize);
-
-      delete resizerRef.current.parentElement.style.userSelect;
-      onColumnBeingResized({ value: false });
-    },
-    [onResize, resizerRef, onColumnBeingResized]
-  );
-
-  const onStartResize = useCallback(
-    (e) => {
-      e.stopPropagation();
-      parentWidth.current = resizerRef.current.parentElement.getBoundingClientRect().width;
-      startX.current = e.pageX;
-      resizerRef.current.parentElement.style.userSelect = 'none';
-
-      document.addEventListener('mousemove', onResize);
-      document.addEventListener('mouseup', onEndResize);
-      document.addEventListener('mouseleave', onEndResize);
-      onColumnBeingResized({ value: true });
-    },
-    [onResize, onEndResize, parentWidth, startX, resizerRef, onColumnBeingResized]
-  );
-
-  return (
-    <div
-      style={{ width: '16px', float: 'right', height: '100%', cursor: 'ew-resize' }}
-      onMouseDown={onStartResize}
-      ref={resizerRef}
-    />
-  );
-};
-
-Resizer.displayName = 'Resizer';
-
-export { Resizer };
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 7a72d7076e4..7ce74ecc33b 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -1,16 +1,15 @@
+import '@ui5/webcomponents-icons/dist/icons/filter';
+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 { Event } from '@ui5/webcomponents-react-base/lib/Event';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import React, { CSSProperties, DragEventHandler, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
 import { createUseStyles, useTheme } from 'react-jss';
 import { JSSTheme } from '../../../interfaces/JSSTheme';
-import { Resizer } from './Resizer';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
-import '@ui5/webcomponents-icons/dist/icons/filter';
-import '@ui5/webcomponents-icons/dist/icons/group-2';
-import '@ui5/webcomponents-icons/dist/icons/sort-descending';
-import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
 
 export interface ColumnHeaderProps {
   id: string;
@@ -64,6 +63,16 @@ const styles = ({ parameters }: JSSTheme) => ({
     '& :last-child': {
       marginLeft: '0.25rem'
     }
+  },
+  resizer: {
+    display: 'inline-block',
+    width: '16px',
+    height: '100%',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    transform: 'translateX(50%)',
+    zIndex: 1
   }
 });
 
@@ -125,8 +134,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
   const isResizable = !isLastColumn && column.canResize;
   const theme = useTheme() as JSSTheme;
   const innerStyle: CSSProperties = useMemo(() => {
-    const modifiedStyles = {
-      ...style,
+    const modifiedStyles: CSSProperties = {
       width: '100%',
       fontWeight: 'normal',
       cursor: 'pointer',
@@ -137,10 +145,10 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
       modifiedStyles.maxWidth = `calc(100% - 16px)`;
     }
     if (dragOver) {
-      modifiedStyles.borderLeft = '3px solid ' + theme.parameters.sapSelectedColor;
+      modifiedStyles.borderLeft = `3px solid ${theme.parameters.sapSelectedColor}`;
     }
-    return modifiedStyles as CSSProperties;
-  }, [style, isResizable]);
+    return modifiedStyles;
+  }, [isResizable, dragOver]);
 
   if (!column) return null;
 
@@ -157,21 +165,23 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
       onDrop={onDrop}
       onDragEnd={onDragEnd}
     >
-      {groupable || sortable || filterable ? (
-        <ColumnHeaderModal
-          openBy={openBy}
-          showFilter={filterable}
-          showGroup={groupable && column.disableGrouping !== true}
-          showSort={sortable}
-          column={column}
-          style={innerStyle}
-          onSort={onSort}
-          onGroupBy={onGroupBy}
-        />
-      ) : (
-        <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
-      )}
-      {isResizable && <Resizer {...props} />}
+      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+        {groupable || sortable || filterable ? (
+          <ColumnHeaderModal
+            openBy={openBy}
+            showFilter={filterable}
+            showGroup={groupable && column.disableGrouping !== true}
+            showSort={sortable}
+            column={column}
+            style={innerStyle}
+            onSort={onSort}
+            onGroupBy={onGroupBy}
+          />
+        ) : (
+          <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
+        )}
+        <div {...column.getResizerProps()} className={classes.resizer} />
+      </div>
     </div>
   );
 };
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx
index bc55a4d352d..4cbc1160fe7 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx
@@ -1,9 +1,8 @@
 import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
 import { DefaultFilterComponent } from '../FilterComponent';
-import { Column } from 'react-table';
+import { Cell } from './Cell';
 import { Expandable } from './Expandable';
 import { Grouped } from './Grouped';
-import { Cell } from './Cell';
 import { RepeatedValue } from './RepeatedValue';
 
 export const DEFAULT_COLUMN_WIDTH = 60;
@@ -12,12 +11,10 @@ const defaultFilterMethod = (filter, row) => {
   return new RegExp(filter.value, 'gi').test(String(row[filter.id]));
 };
 
-export const DefaultColumn: Column = {
+export const DefaultColumn = {
   Filter: DefaultFilterComponent,
   canResize: true,
   minWidth: DEFAULT_COLUMN_WIDTH,
-  // @ts-ignore
-  width: '1fr',
   vAlign: VerticalAlign.Middle,
   Aggregated: () => null,
   defaultFilter: defaultFilterMethod,
diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
index 59959b05094..35e8924ba9c 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
@@ -1,7 +1,7 @@
 import { Input } from '@ui5/webcomponents-react/lib/Input';
-import React, { useCallback } from 'react';
+import React, { useCallback, FC } from 'react';
 
-export const DefaultFilterComponent = ({ column }) => {
+export const DefaultFilterComponent: FC<any> = ({ column }) => {
   const handleChange = useCallback(
     (e) => {
       column.setFilter(e.getParameter('value'));
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
index 5780a6c331e..0260fb830ab 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
@@ -10,30 +10,30 @@ export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => {
   }
   switch (column.hAlign) {
     case TextAlign.Begin:
-      style.justifyContent = 'flex-start';
+      style.textAlign = 'start';
       break;
     case TextAlign.Center:
-      style.justifyContent = 'center';
+      style.textAlign = 'center';
       break;
     case TextAlign.End:
-      style.justifyContent = 'flex-end';
+      style.textAlign = 'end';
       break;
     case TextAlign.Left:
-      style.justifyContent = 'left';
+      style.textAlign = 'left';
       break;
     case TextAlign.Right:
-      style.justifyContent = 'right';
+      style.textAlign = 'right';
       break;
   }
   switch (column.vAlign) {
     case VerticalAlign.Bottom:
-      style.alignItems = 'flex-end';
+      style.verticalAlign = 'bottom';
       break;
     case VerticalAlign.Middle:
-      style.alignItems = 'center';
+      style.verticalAlign = 'middle';
       break;
     case VerticalAlign.Top:
-      style.alignItems = 'flex-start';
+      style.verticalAlign = 'top';
       break;
   }
 
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
index d9e123c61cd..ce3136b475f 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
@@ -5,20 +5,20 @@ const getColumnId = (column) => {
   return typeof column.accessor === 'string' ? column.accessor : column.id;
 };
 
-export const useDragAndDrop = (props, setColumnOrder, columnOrder, isBeingResized) => {
+export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo) => {
   const { onColumnsReordered } = props;
 
   const [dragOver, setDragOver] = useState('');
 
   const handleDragStart = useCallback(
     (e) => {
-      if (isBeingResized) {
+      if (resizeInfo.isResizingColumn === e.currentTarget.id) {
         e.preventDefault();
         return;
       }
       e.dataTransfer.setData('colId', e.currentTarget.id);
     },
-    [isBeingResized]
+    [resizeInfo.isResizingColumn]
   );
 
   const handleDragOver = useCallback((e) => {
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts b/packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts
deleted file mode 100644
index 7c92b397267..00000000000
--- a/packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useState, useCallback } from 'react';
-
-export const useResizeColumns = () => {
-  const [resizedColumns, setResizedColumns] = useState({});
-  const onColumnSizeChanged = useCallback(
-    ({ column, width }) => {
-      setResizedColumns({
-        ...resizedColumns,
-        [column.id]: width
-      });
-    },
-    [setResizedColumns, resizedColumns]
-  );
-
-  const [isBeingResized, setBeingResized] = useState(false);
-  const onColumnBeingResized = useCallback(
-    ({ value }) => {
-      setBeingResized(value);
-    },
-    [setBeingResized]
-  );
-
-  return [resizedColumns, onColumnSizeChanged, isBeingResized, onColumnBeingResized];
-};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
index c35ad7fc169..a0767d5a3d3 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
@@ -1,11 +1,10 @@
+import { PluginHook } from 'react-table';
 import { useCellStyling } from './useCellStyling';
-import { useCallback } from 'react';
 
-export const useTableCellStyling = (classes, rowHeight) =>
-  useCallback(
-    (instance) => {
-      instance.getCellProps.push(useCellStyling({ rowHeight }, classes));
-      return instance;
-    },
-    [rowHeight, classes]
-  );
+export const useTableCellStyling = (classes, rowHeight) => {
+  const hook: PluginHook<{}> = (instance) => {
+    instance.getCellProps.push(useCellStyling({ rowHeight }, classes));
+  };
+  hook.pluginName = 'useTableCellStyling';
+  return hook;
+};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts
index 2c729d23304..7916c4069f0 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts
@@ -1,18 +1,14 @@
-import { useCallback } from 'react';
+import { PluginHook } from 'react-table';
 import { makeTemplateColumns } from './utils';
 
-export const useTableHeaderGroupStyling = (classes, resizedColumns) =>
-  useCallback(
-    (instance) => {
-      instance.getHeaderGroupProps.push((table) => {
-        return {
-          className: classes.tableHeaderRow,
-          style: {
-            gridTemplateColumns: makeTemplateColumns(table.headers, resizedColumns)
-          }
-        };
-      });
-      return instance;
-    },
-    [resizedColumns, classes.tableHeaderRow]
-  );
+export const useTableHeaderGroupStyling = (classes) => {
+  const hook: PluginHook<{}> = (instance) => {
+    instance.getHeaderGroupProps.push(() => {
+      return {
+        className: classes.tableHeaderRow
+      };
+    });
+  };
+  hook.pluginName = 'useTableHeaderGroupStyling';
+  return hook;
+};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
index 07ac953bc7e..ed3620f20c1 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
@@ -1,17 +1,15 @@
-import { useCallback } from 'react';
+import { PluginHook } from 'react-table';
 
-export const useTableHeaderStyling = (classes, onColumnSizeChanged, onColumnBeingResized) =>
-  useCallback(
-    (instance) => {
-      instance.getHeaderProps.push((column) => {
-        return {
-          className: classes.th,
-          onColumnSizeChanged,
-          onColumnBeingResized,
-          column
-        };
-      });
-      return instance;
-    },
-    [classes.th, onColumnSizeChanged, onColumnBeingResized]
-  );
+export const useTableHeaderStyling = (classes) => {
+  const hook: PluginHook<{}> = (instance) => {
+    instance.getHeaderProps.push((column) => {
+      return {
+        className: classes.th,
+        column
+      };
+    });
+    return instance;
+  };
+  hook.pluginName = 'useTableHeaderStyling';
+  return hook;
+};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
index 4ddddd211dc..a979e5adf25 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { PluginHook } from 'react-table';
 
 export const useTableRowStyling = (
   classes,
-  resizedColumns,
   selectable,
   selectedRow,
   selectedRowKey,
@@ -30,59 +30,48 @@ export const useTableRowStyling = (
     prevSelectedRowKey.current = selectedRowKey;
   }, [selectedRowKey]);
 
-  return useCallback(
-    (instance) => {
-      instance.getRowProps.push((row) => {
-        const rowKey = row.path.reduce((acc, val) => `${acc}_${val}`, 'row');
-        let selected = false;
+  const hook: PluginHook<{}> = (instance) => {
+    instance.getRowProps.push((row) => {
+      const rowKey = row.path.reduce((acc, val) => `${acc}_${val}`, 'row');
+      let selected = false;
 
-        if (!row.isAggregated && selectable) {
-          if (applySelectedRow) {
-            if (selectedRow.length && selectedRow.length > 0) {
-              selected = row.path.length === selectedRow.length && row.path.every((item, i) => item === selectedRow[i]);
-            }
-          } else if (selectedRowKey && rowKey === selectedRowKey) {
-            selected = true;
+      if (!row.isAggregated && selectable) {
+        if (applySelectedRow) {
+          if (selectedRow.length && selectedRow.length > 0) {
+            selected = row.path.length === selectedRow.length && row.path.every((item, i) => item === selectedRow[i]);
           }
+        } else if (selectedRowKey && rowKey === selectedRowKey) {
+          selected = true;
         }
+      }
 
-        let className = classes.tr;
-        if (row.isAggregated) {
-          className += ` ${classes.tableGroupHeader}`;
-        }
-        if (selected) {
-          className += ` ${classes.selectedRow}`;
-        }
+      let className = classes.tr;
+      if (row.isAggregated) {
+        className += ` ${classes.tableGroupHeader}`;
+      }
+      if (selected) {
+        className += ` ${classes.selectedRow}`;
+      }
 
-        if (alternateRowColor) {
-          if (row.index % 2 === 1) {
-            className += ` ${classes.alternateRowColor}`;
-          }
+      if (alternateRowColor) {
+        if (row.index % 2 === 1) {
+          className += ` ${classes.alternateRowColor}`;
         }
+      }
 
-        if (selectable) {
-          return {
-            className,
-            onClick: onRowClicked(row)
-          };
-        }
+      if (selectable) {
         return {
-          className
+          className,
+          onClick: onRowClicked(row)
         };
-      });
-      return instance;
-    },
-    [
-      classes.tr,
-      classes.tableGroupHeader,
-      classes.selectedRow,
-      classes.alternateRowColor,
-      resizedColumns,
-      selectable,
-      selectedRow,
-      selectedRowKey,
-      onRowClicked,
-      alternateRowColor
-    ]
-  );
+      }
+      return {
+        className
+      };
+    });
+    return instance;
+  };
+
+  hook.pluginName = 'useTableRowStyling';
+  return hook;
 };
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts
index bbfeb014327..a1fe3ab94e8 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts
@@ -1,16 +1,13 @@
-import { useCallback } from 'react';
+import { PluginHook } from 'react-table';
 
-export const useTableStyling = (classes) =>
-  useCallback(
-    (instance) => {
-      instance.getTableProps.push(() => {
-        return {
-          className: classes.table
-        };
-      });
-      return instance;
-    },
-    [classes.table]
-  );
-
-useTableStyling.pluginName = 'useTableStyling';
+export const useTableStyling = (classes) => {
+  const hook: PluginHook<{}> = (tableHooks) => {
+    tableHooks.getTableProps.push(() => {
+      return {
+        className: classes.table
+      };
+    });
+  };
+  hook.pluginName = 'useTableStyling';
+  return hook;
+};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
index d55d6b70ca0..e57de276ddc 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
@@ -1,25 +1,25 @@
 import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import { useCallback } from 'react';
+import { PluginHook } from 'react-table';
 
 export const useToggleRowExpand = (onRowExpandChange, isTreeTable) => {
-  return useCallback(
-    (instance) => {
-      instance.getExpandedToggleProps.push((row) => {
-        return {
-          onClick: (e) => {
-            e.stopPropagation();
-            e.persist();
-            row.toggleExpanded();
-            let column = null;
-            if (!isTreeTable) {
-              column = row.cells.find((cell) => cell.column.id === row.groupByID).column;
-            }
-
-            onRowExpandChange(Event.of(null, e, { row, column }));
+  const hook: PluginHook<any> = (instance) => {
+    // @ts-ignore
+    instance.getExpandedToggleProps.push((row) => {
+      return {
+        onClick: (e) => {
+          e.stopPropagation();
+          e.persist();
+          row.toggleExpanded();
+          let column = null;
+          if (!isTreeTable) {
+            column = row.cells.find((cell) => cell.column.id === row.groupByID).column;
           }
-        };
-      });
-    },
-    [onRowExpandChange, isTreeTable]
-  );
+
+          onRowExpandChange(Event.of(null, e, { row, column }));
+        }
+      };
+    });
+  };
+  hook.pluginName = 'useToggleRowExpand';
+  return hook;
 };
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts b/packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts
deleted file mode 100644
index 6bf0393f911..00000000000
--- a/packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Device } from '@ui5/webcomponents-react-base/lib/Device';
-
-export const useWindowResize = () => {
-  const headerRef = useRef(null);
-  const [tableWidth, setTableWidth] = useState(0);
-  const onWindowResize = useCallback(() => {
-    if (headerRef.current) {
-      setTableWidth(headerRef.current.getBoundingClientRect().width);
-    }
-  }, [setTableWidth, headerRef.current]);
-
-  const observer = useRef(new MutationObserver(onWindowResize));
-
-  useEffect(() => {
-    if (headerRef.current && headerRef.current.getBoundingClientRect().width !== 0) {
-      setTableWidth(headerRef.current.getBoundingClientRect().width);
-    }
-  }, [headerRef.current, setTableWidth]);
-
-  useEffect(() => {
-    Device.resize.attachHandler(onWindowResize, null);
-    return () => {
-      Device.resize.detachHandler(onWindowResize, null);
-    };
-  }, [onWindowResize]);
-
-  useEffect(() => {
-    if (headerRef.current) {
-      observer.current.observe(headerRef.current, {
-        attributes: true,
-        subtree: true,
-        childList: true
-      });
-    }
-
-    return () => {
-      observer.current.disconnect();
-    };
-  }, [headerRef.current, observer.current]);
-
-  return [headerRef, tableWidth];
-};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/utils.ts b/packages/main/src/components/AnalyticalTable/hooks/utils.ts
index c7dbd24dcc9..ca9eaa44075 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/utils.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/utils.ts
@@ -1,10 +1,6 @@
-export const makeTemplateColumns = (columns, resizedColumns) => {
+export const makeTemplateColumns = (columns) => {
   return columns
     .map((column) => {
-      if (resizedColumns[column.id]) {
-        return `${resizedColumns[column.id]}px`;
-      }
-
       let columnWidth = column.width;
       if (typeof columnWidth === 'number') {
         columnWidth = `${columnWidth}px`;
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 63a2dd917ee..e64f8660bb8 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -10,12 +10,25 @@ import React, {
   ReactNode,
   ReactText,
   Ref,
+  RefObject,
   useCallback,
   useEffect,
-  useMemo
+  useMemo,
+  useRef,
+  useState
 } from 'react';
 import { createUseStyles, useTheme } from 'react-jss';
-import { useExpanded, useFilters, useGroupBy, useSortBy, useTable, useColumnOrder } from 'react-table';
+import {
+  PluginHook,
+  useAbsoluteLayout,
+  useColumnOrder,
+  useExpanded,
+  useFilters,
+  useGroupBy,
+  useResizeColumns,
+  useSortBy,
+  useTable
+} from 'react-table';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './AnayticalTable.jss';
@@ -24,7 +37,7 @@ import { DefaultColumn } from './defaults/Column';
 import { DefaultLoadingComponent } from './defaults/LoadingComponent';
 import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder';
 import { DefaultNoDataComponent } from './defaults/NoDataComponent';
-import { useResizeColumns } from './hooks/useResizeColumns';
+import { useDragAndDrop } from './hooks/useDragAndDrop';
 import { useRowSelection } from './hooks/useRowSelection';
 import { useTableCellStyling } from './hooks/useTableCellStyling';
 import { useTableHeaderGroupStyling } from './hooks/useTableHeaderGroupStyling';
@@ -33,12 +46,9 @@ import { useTableRowStyling } from './hooks/useTableRowStyling';
 import { useTableScrollHandles } from './hooks/useTableScrollHandles';
 import { useTableStyling } from './hooks/useTableStyling';
 import { useToggleRowExpand } from './hooks/useToggleRowExpand';
-import { useWindowResize } from './hooks/useWindowResize';
-import { makeTemplateColumns } from './hooks/utils';
+import { reducer } from './tableReducer/reducer';
 import { TitleBar } from './TitleBar';
 import { VirtualTableBody } from './virtualization/VirtualTableBody';
-import { useDragAndDrop } from './hooks/useDragAndDrop';
-import { reducer } from './tableReducer/reducer';
 
 export interface ColumnConfiguration {
   accessor?: string;
@@ -100,7 +110,7 @@ export interface TableProps extends CommonProps {
    * additional options which will be passed to [react-table´s useTable hook](https://github.com/tannerlinsley/react-table/blob/master/docs/api.md#table-options)
    */
   reactTableOptions?: object;
-  tableHooks?: Array<() => any>;
+  tableHooks?: Array<PluginHook<any>>;
   subRowsKey?: string;
   selectedRowKey?: string;
   isTreeTable?: boolean;
@@ -150,16 +160,46 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   const classes = useStyles({ rowHeight: props.rowHeight });
 
   const [selectedRowPath, onRowClicked] = useRowSelection(onRowSelected, selectedRowKey);
-  const [resizedColumns, onColumnSizeChanged, isBeingResized, onColumnBeingResized] = useResizeColumns();
   const [analyticalTableRef, reactWindowRef] = useTableScrollHandles(ref);
+  const tableRef: RefObject<HTMLDivElement> = useRef();
 
   const getSubRows = useCallback((row) => row[subRowsKey] || [], [subRowsKey]);
 
-  const { getTableProps, headerGroups, rows, prepareRow, state: tableState, setColumnOrder, dispatch } = useTable(
+  const [columnWidth, setColumnWidth] = useState(null);
+
+  const defaultColumn = useMemo(() => {
+    if (columnWidth) {
+      return {
+        width: columnWidth,
+        ...DefaultColumn
+      };
+    }
+    return DefaultColumn;
+  }, [columnWidth]);
+
+  useEffect(() => {
+    const visibleColumns = columns.filter(Boolean).filter(({ show }) => show ?? true).length;
+    if (visibleColumns > 0) {
+      setColumnWidth(tableRef.current.clientWidth / visibleColumns);
+    } else {
+      setColumnWidth(150);
+    }
+  }, []);
+
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: tableState,
+    setColumnOrder,
+    dispatch,
+    totalColumnsWidth
+  } = useTable(
     {
       columns,
       data,
-      defaultColumn: DefaultColumn,
+      defaultColumn,
       getSubRows,
       reducer,
       ...reactTableOptions
@@ -169,18 +209,12 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     useColumnOrder,
     useSortBy,
     useExpanded,
+    useAbsoluteLayout,
+    useResizeColumns,
     useTableStyling(classes),
-    useTableHeaderGroupStyling(classes, resizedColumns),
-    useTableHeaderStyling(classes, onColumnSizeChanged, onColumnBeingResized),
-    useTableRowStyling(
-      classes,
-      resizedColumns,
-      selectable,
-      selectedRowPath,
-      selectedRowKey,
-      onRowClicked,
-      alternateRowColor
-    ),
+    useTableHeaderGroupStyling(classes),
+    useTableHeaderStyling(classes),
+    useTableRowStyling(classes, selectable, selectedRowPath, selectedRowKey, onRowClicked, alternateRowColor),
     useTableCellStyling(classes, rowHeight),
     useToggleRowExpand(onRowExpandChange, isTreeTable),
     ...tableHooks
@@ -218,12 +252,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     };
   }, [tableBodyHeight]);
 
-  const rowContainerStyling = useMemo(() => {
-    return {
-      gridTemplateColumns: makeTemplateColumns(headerGroups.map(({ headers }) => headers).flat(), resizedColumns)
-    };
-  }, [headerGroups, resizedColumns]);
-
   const onGroupByChanged = useCallback(
     (e) => {
       const { column, isGrouped } = e.getParameters();
@@ -244,87 +272,86 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     [tableState.groupBy, onGroup, dispatch]
   );
 
-  const [headerRef, tableWidth] = useWindowResize();
   const [dragOver, handleDragEnter, handleDragStart, handleDragOver, handleOnDrop, handleOnDragEnd] = useDragAndDrop(
     props,
     setColumnOrder,
     tableState.columnOrder,
-    isBeingResized
+    tableState.columnResizing
   );
 
   return (
     <div className={className} style={style} title={tooltip} ref={analyticalTableRef}>
       {title && <TitleBar>{title}</TitleBar>}
       {typeof renderExtension === 'function' && <div>{renderExtension()}</div>}
-      <div className={tableContainerClasses.valueOf()}>
-        <div {...getTableProps()} ref={headerRef} role="table" aria-rowcount={rows.length}>
-          {headerGroups.map((headerGroup) => {
-            let headerProps = {};
-            if (headerGroup.getHeaderGroupProps) {
-              headerProps = headerGroup.getHeaderGroupProps();
-            }
-            return (
-              <header {...headerProps} role="rowgroup">
-                {headerGroup.headers.map((column, index) => (
-                  <ColumnHeader
-                    id={column.id}
-                    {...column.getHeaderProps()}
-                    isLastColumn={index === columns.length - 1}
-                    groupable={props.groupable}
-                    sortable={props.sortable}
-                    filterable={props.filterable}
-                    onSort={props.onSort}
-                    onGroupBy={onGroupByChanged}
-                    onDragStart={handleDragStart}
-                    onDragOver={handleDragOver}
-                    onDrop={handleOnDrop}
-                    onDragEnter={handleDragEnter}
-                    onDragEnd={handleOnDragEnd}
-                    dragOver={column.id === dragOver}
-                    column={column}
-                    isDraggable={!isTreeTable}
-                  >
-                    {column.render('Header')}
-                  </ColumnHeader>
-                ))}
-              </header>
-            );
-          })}
-          {loading && busyIndicatorEnabled && data.length > 0 && <LoadingComponent />}
-          {loading && data.length === 0 && (
-            <TablePlaceholder
-              columns={columns.filter((col) => col.show ?? true).length}
-              rows={props.minRows}
-              style={noDataStyles}
-              rowHeight={internalRowHeight}
-            />
-          )}
-          {!loading && data.length === 0 && (
-            <NoDataComponent noDataText={noDataText} className={classes.noDataContainer} style={noDataStyles} />
-          )}
-          {data.length > 0 && (
-            <VirtualTableBody
-              classes={classes}
-              rowContainerStyling={rowContainerStyling}
-              prepareRow={prepareRow}
-              rows={rows}
-              minRows={minRows}
-              columns={columns}
-              selectedRow={selectedRowKey}
-              selectedRowPath={selectedRowPath}
-              selectable={selectable}
-              reactWindowRef={reactWindowRef}
-              tableWidth={tableWidth}
-              resizedColumns={resizedColumns}
-              isTreeTable={isTreeTable}
-              internalRowHeight={internalRowHeight}
-              tableBodyHeight={tableBodyHeight}
-              visibleRows={visibleRows}
-              alternateRowColor={alternateRowColor}
-              overscanCount={overscanCount}
-            />
-          )}
-        </div>
+      <div className={tableContainerClasses.valueOf()} ref={tableRef}>
+        {columnWidth && (
+          <div {...getTableProps()} role="table" aria-rowcount={rows.length}>
+            {headerGroups.map((headerGroup) => {
+              let headerProps = {};
+              if (headerGroup.getHeaderGroupProps) {
+                headerProps = headerGroup.getHeaderGroupProps();
+              }
+              return (
+                <header {...headerProps} role="rowgroup">
+                  {headerGroup.headers.map((column, index) => (
+                    <ColumnHeader
+                      id={column.id}
+                      {...column.getHeaderProps()}
+                      isLastColumn={index === columns.length - 1}
+                      groupable={props.groupable}
+                      sortable={props.sortable}
+                      filterable={props.filterable}
+                      onSort={props.onSort}
+                      onGroupBy={onGroupByChanged}
+                      onDragStart={handleDragStart}
+                      onDragOver={handleDragOver}
+                      onDrop={handleOnDrop}
+                      onDragEnter={handleDragEnter}
+                      onDragEnd={handleOnDragEnd}
+                      dragOver={column.id === dragOver}
+                      column={column}
+                      isDraggable={!isTreeTable}
+                    >
+                      {column.render('Header')}
+                    </ColumnHeader>
+                  ))}
+                </header>
+              );
+            })}
+            {loading && busyIndicatorEnabled && data.length > 0 && <LoadingComponent />}
+            {loading && data.length === 0 && (
+              <TablePlaceholder
+                columns={columns.filter((col) => col.show ?? true).length}
+                rows={props.minRows}
+                style={noDataStyles}
+                rowHeight={internalRowHeight}
+              />
+            )}
+            {!loading && data.length === 0 && (
+              <NoDataComponent noDataText={noDataText} className={classes.noDataContainer} style={noDataStyles} />
+            )}
+            {data.length > 0 && (
+              <VirtualTableBody
+                classes={classes}
+                prepareRow={prepareRow}
+                rows={rows}
+                minRows={minRows}
+                columns={columns}
+                selectedRow={selectedRowKey}
+                selectedRowPath={selectedRowPath}
+                selectable={selectable}
+                reactWindowRef={reactWindowRef}
+                isTreeTable={isTreeTable}
+                internalRowHeight={internalRowHeight}
+                tableBodyHeight={tableBodyHeight}
+                visibleRows={visibleRows}
+                alternateRowColor={alternateRowColor}
+                overscanCount={overscanCount}
+                totalColumnsWidth={totalColumnsWidth}
+              />
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts
index 16a21379671..93ffa6544f6 100644
--- a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts
+++ b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts
@@ -1,6 +1,7 @@
 import { ComponentType } from 'react';
+import { Column } from 'react-table';
 
-export interface ColumnType {
+export interface ColumnType extends Column {
   show: boolean;
   id: string;
   Filter: ComponentType<{ column: ColumnType }>;
@@ -15,4 +16,6 @@ export interface ColumnType {
   isSorted: boolean;
   isSortedDesc: boolean;
   disableGrouping: boolean;
+  getResizerProps: () => any;
+  isResizing: boolean;
 }
diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
index 3337f0dfcdc..353e4e479dd 100644
--- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -2,13 +2,11 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow';
 import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
-import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column';
 import { VirtualTableRow } from './VirtualTableRow';
 
 export const VirtualTableBody = (props) => {
   const {
     classes,
-    rowContainerStyling,
     prepareRow,
     rows,
     minRows,
@@ -17,14 +15,13 @@ export const VirtualTableBody = (props) => {
     selectedRowPath,
     selectable,
     reactWindowRef,
-    tableWidth,
-    resizedColumns,
     isTreeTable,
     internalRowHeight,
     tableBodyHeight,
     visibleRows,
     alternateRowColor,
-    overscanCount
+    overscanCount,
+    totalColumnsWidth
   } = props;
 
   const innerDivRef = useRef(null);
@@ -42,42 +39,16 @@ export const VirtualTableBody = (props) => {
   const itemCount = Math.max(minRows, rows.length);
   const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
 
-  const columnsWidth = useMemo(() => {
-    const aggregatedWidth = columns
-      .map((item) => {
-        if (resizedColumns.hasOwnProperty(item.accessor)) {
-          return resizedColumns[item.accessor];
-        }
-        if (item.hasOwnProperty('show') && !item.show) {
-          return 0;
-        }
-        return item.minWidth ? item.minWidth : DEFAULT_COLUMN_WIDTH;
-      })
-      .reduce((acc, val) => acc + val, 0);
-    return tableWidth > aggregatedWidth || tableWidth === 0 ? null : aggregatedWidth;
-  }, [columns, tableWidth, resizedColumns]);
-
   const tableData = useMemo(() => {
     return {
       rows,
       additionalProps: {
         isTreeTable,
         classes,
-        columns,
-        rowContainerStyling
+        columns
       }
     };
-  }, [
-    rows,
-    prepareRow,
-    isTreeTable,
-    classes,
-    columns,
-    rowContainerStyling,
-    alternateRowColor,
-    selectedRow,
-    selectedRowPath
-  ]);
+  }, [rows, prepareRow, isTreeTable, classes, columns, alternateRowColor, selectedRow, selectedRowPath]);
 
   const getItemKey = useCallback(
     (index, data) => {
@@ -99,7 +70,7 @@ export const VirtualTableBody = (props) => {
     <FixedSizeList
       ref={reactWindowRef}
       height={tableBodyHeight}
-      width={columnsWidth}
+      width={totalColumnsWidth}
       itemData={tableData}
       itemCount={itemCount}
       itemSize={internalRowHeight}
diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx
index 264f0070f3a..ded94b3f591 100644
--- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx
+++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx
@@ -3,17 +3,12 @@ import React from 'react';
 export const VirtualTableRow = (props) => {
   const { style, index, data } = props;
   const { additionalProps, rows } = data;
-  const { isTreeTable, classes, columns, rowContainerStyling } = additionalProps;
+  const { isTreeTable, classes, columns } = additionalProps;
   const row = rows[index];
 
-  const rowStyle = {
-    ...style,
-    gridTemplateColumns: rowContainerStyling.gridTemplateColumns
-  };
-
   if (!row) {
     return (
-      <div key={`minRow-${index}`} className={classes.tr} style={rowStyle} role="row">
+      <div key={`minRow-${index}`} className={classes.tr} style={style} role="row">
         {columns.map((col, colIndex) => {
           let classNames = classes.tableCell;
           if (col.className) {
@@ -26,7 +21,7 @@ export const VirtualTableRow = (props) => {
   }
 
   return (
-    <div {...row.getRowProps()} style={rowStyle} role="row" aria-rowindex={index}>
+    <div {...row.getRowProps()} style={style} role="row" aria-rowindex={index}>
       {row.cells.map((cell, i) => {
         let contentToRender = 'Cell';
         if (isTreeTable) {
diff --git a/yarn.lock b/yarn.lock
index 5485849c712..ea8dc322013 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14519,10 +14519,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-table@7.0.0-beta.20:
-  version "7.0.0-beta.20"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.20.tgz#2125726549a15d5fd1d264145c92b9807a82aa1e"
-  integrity sha512-809Zj/OHX+Jbfnb+kxULZDvDstHrpzjFl2+mYOF9pU1CcJKkL2GdBmlWr9pcDmznxMU6veJUYnAxXYqvAWKVrQ==
+react-table@7.0.0-beta.23:
+  version "7.0.0-beta.23"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.23.tgz#ceb1efa8487671d08897b51d39dffc098f789dbb"
+  integrity sha512-2Lr5xSgvwA+4eCuR2zyhCgpcxmD5dvssFtSI+wXTsC7roScmnc5FqSI3utvF2dY91rc6y9oeKtNKdNl88oGqFw==
 
 react-test-renderer@^16.0.0-0:
   version "16.8.6"

From e46237655d1d3191688da47ddebd4bc2307fa971 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 5 Dec 2019 08:52:17 +0100
Subject: [PATCH 2/7] WIP: Update tests

---
 package.json                                  |    2 +-
 packages/main/package.json                    |    2 +-
 .../AnalyticalTable.test.tsx.snap             | 3149 +++++++++--------
 .../src/components/AnalyticalTable/index.tsx  |    2 +-
 shared/tests/utils.tsx                        |    5 -
 yarn.lock                                     |   59 +-
 6 files changed, 1724 insertions(+), 1495 deletions(-)

diff --git a/package.json b/package.json
index ee09a4a9984..9462111bed7 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-canvas-mock": "^2.2.0",
-    "jest-environment-jsdom-fifteen": "^1.0.0",
+    "jest-environment-jsdom-fifteen": "^1.0.2",
     "jest-enzyme": "^7.1.2",
     "jss-snapshot-serializer": "^1.0.0",
     "lerna": "^3.19.0",
diff --git a/packages/main/package.json b/packages/main/package.json
index f57c825e7bc..b007145d6dc 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -29,7 +29,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-beta.23",
+    "react-table": "7.0.0-beta.26",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },
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 02efcf22a16..2f1abd03892 100644
--- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -23,261 +23,292 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -287,11 +318,11 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             aria-rowindex="0"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -303,7 +334,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -315,7 +346,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -327,7 +358,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -342,11 +373,11 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             aria-rowindex="1"
             class="AnalyticalTable--tr- AnalyticalTable--alternateRowColor-"
             role="row"
-            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -358,7 +389,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -370,7 +401,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -382,7 +413,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -396,7 +427,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -414,7 +445,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -432,7 +463,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -477,261 +508,292 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -741,11 +803,11 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             aria-rowindex="0"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -757,7 +819,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -769,7 +831,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -781,7 +843,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -796,11 +858,11 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             aria-rowindex="1"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -812,7 +874,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -824,7 +886,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -836,7 +898,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -850,7 +912,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -868,7 +930,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -886,7 +948,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -931,257 +993,288 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <svg
@@ -1440,345 +1533,376 @@ exports[`AnalyticalTable Tree Table 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           draggable="false"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-              <ui5-li-custom
+              <ui5-list
                 class=""
-                type="Inactive"
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
               >
-                <div
-                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                  style="padding: 0px 1rem;"
-                >
-                  <ui5-icon
-                    class=""
-                    name="filter"
-                    style="padding-right: 1rem;"
-                  />
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
-              </ui5-li-custom>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+                <ui5-li-custom
+                  class=""
+                  type="Inactive"
+                >
+                  <div
+                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                    style="padding: 0px 1rem;"
+                  >
+                    <ui5-icon
+                      class=""
+                      name="filter"
+                      style="padding-right: 1rem;"
+                    />
+                    <ui5-input
+                      class=""
+                      type="Text"
+                      value=""
+                      value-state="None"
+                    />
+                  </div>
+                </ui5-li-custom>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           draggable="false"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-              <ui5-li-custom
+              <ui5-list
                 class=""
-                type="Inactive"
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
               >
-                <div
-                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                  style="padding: 0px 1rem;"
-                >
-                  <ui5-icon
-                    class=""
-                    name="filter"
-                    style="padding-right: 1rem;"
-                  />
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
-              </ui5-li-custom>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+                <ui5-li-custom
+                  class=""
+                  type="Inactive"
+                >
+                  <div
+                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                    style="padding: 0px 1rem;"
+                  >
+                    <ui5-icon
+                      class=""
+                      name="filter"
+                      style="padding-right: 1rem;"
+                    />
+                    <ui5-input
+                      class=""
+                      type="Text"
+                      value=""
+                      value-state="None"
+                    />
+                  </div>
+                </ui5-li-custom>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           draggable="false"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-              <ui5-li-custom
-                class=""
-                type="Inactive"
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
               >
-                <div
-                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                  style="padding: 0px 1rem;"
-                >
-                  <ui5-icon
-                    class=""
-                    name="filter"
-                    style="padding-right: 1rem;"
-                  />
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
-              </ui5-li-custom>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+                <ui5-li-custom
+                  class=""
+                  type="Inactive"
+                >
+                  <div
+                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                    style="padding: 0px 1rem;"
+                  >
+                    <ui5-icon
+                      class=""
+                      name="filter"
+                      style="padding-right: 1rem;"
+                    />
+                    <ui5-input
+                      class=""
+                      type="Text"
+                      value=""
+                      value-state="None"
+                    />
+                  </div>
+                </ui5-li-custom>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           draggable="false"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-              <ui5-li-custom
-                class=""
-                type="Inactive"
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
               >
-                <div
-                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                  style="padding: 0px 1rem;"
-                >
-                  <ui5-icon
-                    class=""
-                    name="filter"
-                    style="padding-right: 1rem;"
-                  />
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
-              </ui5-li-custom>
-            </ui5-list>
-          </ui5-popover>
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+                <ui5-li-custom
+                  class=""
+                  type="Inactive"
+                >
+                  <div
+                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                    style="padding: 0px 1rem;"
+                  >
+                    <ui5-icon
+                      class=""
+                      name="filter"
+                      style="padding-right: 1rem;"
+                    />
+                    <ui5-input
+                      class=""
+                      type="Text"
+                      value=""
+                      value-state="None"
+                    />
+                  </div>
+                </ui5-li-custom>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
@@ -1788,11 +1912,11 @@ exports[`AnalyticalTable Tree Table 1`] = `
             aria-rowindex="0"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 style="cursor: pointer; padding-left: 0px;"
@@ -1814,7 +1938,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1829,7 +1953,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1844,7 +1968,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1862,11 +1986,11 @@ exports[`AnalyticalTable Tree Table 1`] = `
             aria-rowindex="1"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span />
               <span
@@ -1879,7 +2003,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1894,7 +2018,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1909,7 +2033,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1926,7 +2050,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -1944,7 +2068,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -1962,7 +2086,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2007,261 +2131,292 @@ exports[`AnalyticalTable custom row height 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <div
-        style="position: relative; height: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 300px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -2271,11 +2426,11 @@ exports[`AnalyticalTable custom row height 1`] = `
             aria-rowindex="0"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 0px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 0px; height: 60px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2287,7 +2442,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2299,7 +2454,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2311,7 +2466,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2326,11 +2481,11 @@ exports[`AnalyticalTable custom row height 1`] = `
             aria-rowindex="1"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 60px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 60px; height: 60px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2342,7 +2497,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2354,7 +2509,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2366,7 +2521,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="height: 60px; align-items: center;"
+              style="height: 60px; vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2380,7 +2535,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 120px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 120px; height: 60px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2398,7 +2553,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 180px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 180px; height: 60px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2416,7 +2571,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 240px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 240px; height: 60px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2461,261 +2616,292 @@ exports[`AnalyticalTable test Asc desc 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -2725,11 +2911,11 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             aria-rowindex="0"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2741,7 +2927,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2753,7 +2939,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2765,7 +2951,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2780,11 +2966,11 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             aria-rowindex="1"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2796,7 +2982,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2808,7 +2994,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2820,7 +3006,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2834,7 +3020,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2852,7 +3038,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2870,7 +3056,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -2915,261 +3101,292 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+        style="position: relative; width: 600px;"
       >
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Age"
-              >
-                Age
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Age"
+                >
+                  Age
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Name"
-              >
-                Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Name"
+                >
+                  Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
-                class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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; max-width: calc(100% - 16px);"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                title="Friend Name"
-              >
-                Friend Name
-              </span>
               <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                class="TableColumnHeader--header-"
+              >
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                  title="Friend Name"
+                >
+                  Friend Name
+                </span>
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
-          <div
-            style="width: 16px; float: right; height: 100%; cursor: ew-resize;"
-          />
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
         <div
           class="AnalyticalTable--th-"
           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;"
+            style="position: relative; width: 100%; height: 100%;"
           >
             <div
-              class="TableColumnHeader--header-"
+              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
             >
-              <span
-                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+              <div
+                class="TableColumnHeader--header-"
               >
-                <span>
-                  Friend Age
+                <span
+                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                >
+                  <span>
+                    Friend Age
+                  </span>
                 </span>
-              </span>
-              <div
-                class="TableColumnHeader--iconContainer-"
-              />
+                <div
+                  class="TableColumnHeader--iconContainer-"
+                />
+              </div>
             </div>
-          </div>
-          <ui5-popover
-            class=""
-            horizontal-align="Left"
-            no-arrow="true"
-            placement-type="Bottom"
-            style="font-weight: normal;"
-            vertical-align="Center"
-          >
-            <ui5-list
+            <ui5-popover
               class=""
-              footer-text=""
-              header-text=""
-              mode="None"
-              no-data-text=""
-              separators="All"
+              horizontal-align="Left"
+              no-arrow="true"
+              placement-type="Bottom"
+              style="font-weight: normal;"
+              vertical-align="Center"
             >
-              <ui5-li
-                class=""
-                data-sort="asc"
-                icon="sort-ascending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Ascending
-              </ui5-li>
-              <ui5-li
+              <ui5-list
                 class=""
-                data-sort="desc"
-                icon="sort-descending"
-                info-state="None"
-                type="Active"
-              >
-                Sort Descending
-              </ui5-li>
-            </ui5-list>
-          </ui5-popover>
+                footer-text=""
+                header-text=""
+                mode="None"
+                no-data-text=""
+                separators="All"
+              >
+                <ui5-li
+                  class=""
+                  data-sort="asc"
+                  icon="sort-ascending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Ascending
+                </ui5-li>
+                <ui5-li
+                  class=""
+                  data-sort="desc"
+                  icon="sort-descending"
+                  info-state="None"
+                  type="Active"
+                >
+                  Sort Descending
+                </ui5-li>
+              </ui5-list>
+            </ui5-popover>
+            <div
+              class="TableColumnHeader--resizer-"
+              draggable="false"
+              style="cursor: ew-resize;"
+            />
+          </div>
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -3179,11 +3396,11 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             aria-rowindex="0"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3195,7 +3412,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3207,7 +3424,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3219,7 +3436,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3234,11 +3451,11 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             aria-rowindex="1"
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3250,7 +3467,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 150px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3262,7 +3479,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 300px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3274,7 +3491,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="align-items: center;"
+              style="vertical-align: middle; position: absolute; top: 0px; left: 450px; width: 150px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3288,7 +3505,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -3306,7 +3523,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
@@ -3324,7 +3541,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           <div
             class="AnalyticalTable--tr-"
             role="row"
-            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
+            style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
           >
             <div
               class="AnalyticalTable--tableCell-"
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index e64f8660bb8..de0157d98a9 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -179,7 +179,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
 
   useEffect(() => {
     const visibleColumns = columns.filter(Boolean).filter(({ show }) => show ?? true).length;
-    if (visibleColumns > 0) {
+    if (visibleColumns > 0 && tableRef.current.clientWidth > 0) {
       setColumnWidth(tableRef.current.clientWidth / visibleColumns);
     } else {
       setColumnWidth(150);
diff --git a/shared/tests/utils.tsx b/shared/tests/utils.tsx
index 1250af4e533..313426d537c 100644
--- a/shared/tests/utils.tsx
+++ b/shared/tests/utils.tsx
@@ -25,11 +25,6 @@ export const mountThemedComponent = (
   contextOverwrite: { [key: string]: string } = {},
   enzymeOptions = {}
 ) => {
-  // const searchParams = Object.entries(contextOverwrite)
-  //   .map(([key, val]) => `sap-ui-${key}=${`${val}`.toLowerCase()}`)
-  //   .join('&');
-  // window.location.search = `?${searchParams}`;
-
   return mount(<ThemeProvider {...contextOverwrite}>{component}</ThemeProvider>, enzymeOptions);
 };
 
diff --git a/yarn.lock b/yarn.lock
index ea8dc322013..62ff3cbb545 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3699,7 +3699,7 @@ acorn@^5.2.1, acorn@^5.5.3:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.1, acorn@^6.1.1, acorn@^6.2.0, acorn@^6.2.1:
+acorn@^6.0.1, acorn@^6.2.0, acorn@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.2.1.tgz#3ed8422d6dec09e6121cc7a843ca86a330a86b51"
   integrity sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==
@@ -6306,18 +6306,30 @@ csso@^3.5.1:
   dependencies:
     css-tree "1.0.0-alpha.29"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.6:
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@^1.0.0, cssstyle@^1.2.2:
+cssom@^0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssstyle@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
   integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
   dependencies:
     cssom "0.3.x"
 
+cssstyle@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.0.0.tgz#911f0fe25532db4f5d44afc83f89cc4b82c97fe3"
+  integrity sha512-QXSAu2WBsSRXCPjvI43Y40m6fMevvyRm8JVAuF9ksQz5jha4pWP1wpaK7Yu5oLFc6+XAY+hj8YhefyXcBB53gg==
+  dependencies:
+    cssom "~0.3.6"
+
 csstype@^2.2.0, csstype@^2.5.7:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
@@ -9964,17 +9976,17 @@ jest-environment-enzyme@^7.1.2:
   dependencies:
     jest-environment-jsdom "^24.0.0"
 
-jest-environment-jsdom-fifteen@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.0.tgz#9634f78d7cedcc1fdf55b4052051c422935a68ab"
-  integrity sha512-TNGpp8HUzpvrpweantzipQo6M2YbvmKkj1WGsdf29xpU0fgSa8nrL2fQgZDxpvrh77AexXtuXuwee0cl2iiLvg==
+jest-environment-jsdom-fifteen@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.2.tgz#49a0af55e0d32737a6114a1575dd714702ad63b0"
+  integrity sha512-nfrnAfwklE1872LIB31HcjM65cWTh1wzvMSp10IYtPJjLDUbTTvDpajZgIxUnhRmzGvogdHDayCIlerLK0OBBg==
   dependencies:
     "@jest/environment" "^24.3.0"
     "@jest/fake-timers" "^24.3.0"
     "@jest/types" "^24.3.0"
     jest-mock "^24.0.0"
     jest-util "^24.0.0"
-    jsdom "^15.1.0"
+    jsdom "^15.2.1"
 
 jest-environment-jsdom@^24.0.0:
   version "24.8.0"
@@ -10437,22 +10449,22 @@ jsdom@^11.5.1:
     ws "^5.2.0"
     xml-name-validator "^3.0.0"
 
-jsdom@^15.1.0:
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.1.1.tgz#21ed01f81d95ef4327f3e564662aef5e65881252"
-  integrity sha512-cQZRBB33arrDAeCrAEWn1U3SvrvC8XysBua9Oqg1yWrsY/gYcusloJC3RZJXuY5eehSCmws8f2YeliCqGSkrtQ==
+jsdom@^15.2.1:
+  version "15.2.1"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5"
+  integrity sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==
   dependencies:
     abab "^2.0.0"
-    acorn "^6.1.1"
+    acorn "^7.1.0"
     acorn-globals "^4.3.2"
     array-equal "^1.0.0"
-    cssom "^0.3.6"
-    cssstyle "^1.2.2"
+    cssom "^0.4.1"
+    cssstyle "^2.0.0"
     data-urls "^1.1.0"
     domexception "^1.0.1"
     escodegen "^1.11.1"
     html-encoding-sniffer "^1.0.2"
-    nwsapi "^2.1.4"
+    nwsapi "^2.2.0"
     parse5 "5.1.0"
     pn "^1.1.0"
     request "^2.88.0"
@@ -12551,11 +12563,16 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nwsapi@^2.0.7, nwsapi@^2.1.4:
+nwsapi@^2.0.7:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f"
   integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw==
 
+nwsapi@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -14519,10 +14536,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-table@7.0.0-beta.23:
-  version "7.0.0-beta.23"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.23.tgz#ceb1efa8487671d08897b51d39dffc098f789dbb"
-  integrity sha512-2Lr5xSgvwA+4eCuR2zyhCgpcxmD5dvssFtSI+wXTsC7roScmnc5FqSI3utvF2dY91rc6y9oeKtNKdNl88oGqFw==
+react-table@7.0.0-beta.26:
+  version "7.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.26.tgz#20ab9a7bd21f01930e764198410a642a3ae28e79"
+  integrity sha512-Pw/1T9kiAjV1cIf6K6bQV6yNQc3O7XUGin1RcSR1xFKw0RNGC5vl1VDPZrNep1BXDsbR6o8O63X45HFNVg6HzA==
 
 react-test-renderer@^16.0.0-0:
   version "16.8.6"

From 2965c2d8484a20f8a3338744437974db72bd97ac Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 5 Dec 2019 15:42:50 +0100
Subject: [PATCH 3/7] WIP: Update react-table and add resize handler

---
 packages/main/package.json                    |  2 +-
 .../AnalyticalTable/ColumnHeader/index.tsx    | 72 +++++++++++--------
 .../AnalyticalTable/hooks/useDragAndDrop.ts   |  8 +--
 .../src/components/AnalyticalTable/index.tsx  | 29 +++++---
 yarn.lock                                     |  8 +--
 5 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/packages/main/package.json b/packages/main/package.json
index b007145d6dc..237bdfaae55 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -29,7 +29,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-beta.26",
+    "react-table": "7.0.0-beta.27",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 7ce74ecc33b..643942401b8 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -115,7 +115,16 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
     const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
 
     return (
-      <div className={classNames.valueOf()}>
+      <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' }}
@@ -129,7 +138,21 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
         </div>
       </div>
     );
-  }, [classes, column.filterValue, column.isSorted, column.isGrouped, column.isSortedDesc, children]);
+  }, [
+    classes,
+    column.filterValue,
+    column.isSorted,
+    column.isGrouped,
+    column.isSortedDesc,
+    children,
+    isDraggable,
+    onDragEnter,
+    onDragOver,
+    onDragStart,
+    onDrop,
+    onDragEnd,
+    id
+  ]);
 
   const isResizable = !isLastColumn && column.canResize;
   const theme = useTheme() as JSSTheme;
@@ -153,35 +176,22 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
   if (!column) return null;
 
   return (
-    <div
-      id={id}
-      className={className}
-      style={style}
-      role="columnheader"
-      draggable={isDraggable}
-      onDragEnter={onDragEnter}
-      onDragOver={onDragOver}
-      onDragStart={onDragStart}
-      onDrop={onDrop}
-      onDragEnd={onDragEnd}
-    >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-        {groupable || sortable || filterable ? (
-          <ColumnHeaderModal
-            openBy={openBy}
-            showFilter={filterable}
-            showGroup={groupable && column.disableGrouping !== true}
-            showSort={sortable}
-            column={column}
-            style={innerStyle}
-            onSort={onSort}
-            onGroupBy={onGroupBy}
-          />
-        ) : (
-          <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
-        )}
-        <div {...column.getResizerProps()} className={classes.resizer} />
-      </div>
+    <div id={id} className={className} style={style} role="columnheader">
+      {groupable || sortable || filterable ? (
+        <ColumnHeaderModal
+          openBy={openBy}
+          showFilter={filterable}
+          showGroup={groupable && column.disableGrouping !== true}
+          showSort={sortable}
+          column={column}
+          style={innerStyle}
+          onSort={onSort}
+          onGroupBy={onGroupBy}
+        />
+      ) : (
+        <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
+      )}
+      <div {...column.getResizerProps()} className={classes.resizer} />
     </div>
   );
 };
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
index ce3136b475f..783a89afa31 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
@@ -12,11 +12,11 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo) =
 
   const handleDragStart = useCallback(
     (e) => {
-      if (resizeInfo.isResizingColumn === e.currentTarget.id) {
+      if (resizeInfo.isResizingColumn === e.currentTarget.dataset.columnId) {
         e.preventDefault();
         return;
       }
-      e.dataTransfer.setData('colId', e.currentTarget.id);
+      e.dataTransfer.setData('colId', e.currentTarget.dataset.columnId);
     },
     [resizeInfo.isResizingColumn]
   );
@@ -26,14 +26,14 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo) =
   }, []);
 
   const handleDragEnter = useCallback((e) => {
-    setDragOver(e.currentTarget.id);
+    setDragOver(e.currentTarget.dataset.columnId);
   }, []);
 
   const handleOnDrop = useCallback(
     (e) => {
       setDragOver('');
 
-      const droppedColId = e.currentTarget.id;
+      const droppedColId = e.currentTarget.dataset.columnId;
       const draggedColId = e.dataTransfer.getData('colId');
       if (droppedColId === draggedColId) return;
 
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index de0157d98a9..27c4047c97c 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -1,3 +1,4 @@
+import { Device } from '@ui5/webcomponents-react-base/lib/Device';
 import { Event } from '@ui5/webcomponents-react-base/lib/Event';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
@@ -177,15 +178,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     return DefaultColumn;
   }, [columnWidth]);
 
-  useEffect(() => {
-    const visibleColumns = columns.filter(Boolean).filter(({ show }) => show ?? true).length;
-    if (visibleColumns > 0 && tableRef.current.clientWidth > 0) {
-      setColumnWidth(tableRef.current.clientWidth / visibleColumns);
-    } else {
-      setColumnWidth(150);
-    }
-  }, []);
-
   const {
     getTableProps,
     headerGroups,
@@ -220,6 +212,25 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     ...tableHooks
   );
 
+  const updateTableSizes = useCallback(() => {
+    const visibleColumns = columns.filter(Boolean).filter(({ show }) => show ?? true);
+    const columnsWithFixedWidth = columns.filter(({ width }) => width ?? false).map(({ width }) => width);
+    const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0);
+    if (visibleColumns.length > 0 && tableRef.current.clientWidth > 0) {
+      setColumnWidth(
+        (tableRef.current.clientWidth - fixedWidth) / (visibleColumns.length - columnsWithFixedWidth.length)
+      );
+    } else {
+      setColumnWidth(150);
+    }
+  }, []);
+
+  useEffect(() => {
+    updateTableSizes();
+    Device.resize.attachHandler(updateTableSizes, null);
+    return () => Device.resize.detachHandler(updateTableSizes, null);
+  }, [updateTableSizes]);
+
   useEffect(() => {
     dispatch({ type: 'SET_GROUP_BY', payload: groupBy });
   }, [groupBy, dispatch]);
diff --git a/yarn.lock b/yarn.lock
index 62ff3cbb545..f8194f1a35a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14536,10 +14536,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-table@7.0.0-beta.26:
-  version "7.0.0-beta.26"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.26.tgz#20ab9a7bd21f01930e764198410a642a3ae28e79"
-  integrity sha512-Pw/1T9kiAjV1cIf6K6bQV6yNQc3O7XUGin1RcSR1xFKw0RNGC5vl1VDPZrNep1BXDsbR6o8O63X45HFNVg6HzA==
+react-table@7.0.0-beta.27:
+  version "7.0.0-beta.27"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.27.tgz#0505aed2beffedc596dd003e72c91a4709b91456"
+  integrity sha512-Lkc8xIwc6OhV4RV753zJt/29WdPh0H5TlZVT8KRjiCaX4Xcrx/MI0kAG+WljxIz9USN6+FYiKrYVtOcScHIxBA==
 
 react-test-renderer@^16.0.0-0:
   version "16.8.6"

From 7fbf85ee90b84666dcce95d5b48767fdaab2fd09 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 5 Dec 2019 15:49:29 +0100
Subject: [PATCH 4/7] Update tests

---
 .../AnalyticalTable/AnalyticalTable.test.tsx  |    2 +-
 .../AnalyticalTable.test.tsx.snap             | 3120 ++++++++---------
 2 files changed, 1519 insertions(+), 1603 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
index 6428596c823..21ff58ba8b8 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
@@ -226,7 +226,7 @@ describe('AnalyticalTable', () => {
     const wrapper = mountThemedComponent(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
 
     // get first column of the table and simulate dragging of it
-    let componentDrag = wrapper.find({ role: 'columnheader' }).at(0);
+    let componentDrag = wrapper.find('div[role="columnheader"] div[draggable]').at(0);
     let inst = componentDrag.instance();
     // @ts-ignore
     let dragColumnId = inst.id;
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 2f1abd03892..5170eca8ade 100644
--- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -27,284 +27,272 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Age
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <div
@@ -512,284 +500,272 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Age
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <div
@@ -997,284 +973,272 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Age
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <svg
@@ -1537,368 +1501,356 @@ exports[`AnalyticalTable Tree Table 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="false"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="false"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
+                class=""
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+              <ui5-li-custom
+                class=""
+                type="Inactive"
               >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-                <ui5-li-custom
-                  class=""
-                  type="Inactive"
-                >
-                  <div
-                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                    style="padding: 0px 1rem;"
-                  >
-                    <ui5-icon
-                      class=""
-                      name="filter"
-                      style="padding-right: 1rem;"
-                    />
-                    <ui5-input
-                      class=""
-                      type="Text"
-                      value=""
-                      value-state="None"
-                    />
-                  </div>
-                </ui5-li-custom>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                <div
+                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                  style="padding: 0px 1rem;"
+                >
+                  <ui5-icon
+                    class=""
+                    name="filter"
+                    style="padding-right: 1rem;"
+                  />
+                  <ui5-input
+                    class=""
+                    type="Text"
+                    value=""
+                    value-state="None"
+                  />
+                </div>
+              </ui5-li-custom>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="false"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="false"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Age
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+              <ui5-li-custom
+                class=""
+                type="Inactive"
               >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-                <ui5-li-custom
-                  class=""
-                  type="Inactive"
-                >
-                  <div
-                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                    style="padding: 0px 1rem;"
-                  >
-                    <ui5-icon
-                      class=""
-                      name="filter"
-                      style="padding-right: 1rem;"
-                    />
-                    <ui5-input
-                      class=""
-                      type="Text"
-                      value=""
-                      value-state="None"
-                    />
-                  </div>
-                </ui5-li-custom>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                <div
+                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                  style="padding: 0px 1rem;"
+                >
+                  <ui5-icon
+                    class=""
+                    name="filter"
+                    style="padding-right: 1rem;"
+                  />
+                  <ui5-input
+                    class=""
+                    type="Text"
+                    value=""
+                    value-state="None"
+                  />
+                </div>
+              </ui5-li-custom>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="false"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="false"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
+                class=""
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+              <ui5-li-custom
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
+                type="Inactive"
               >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-                <ui5-li-custom
-                  class=""
-                  type="Inactive"
-                >
-                  <div
-                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                    style="padding: 0px 1rem;"
-                  >
-                    <ui5-icon
-                      class=""
-                      name="filter"
-                      style="padding-right: 1rem;"
-                    />
-                    <ui5-input
-                      class=""
-                      type="Text"
-                      value=""
-                      value-state="None"
-                    />
-                  </div>
-                </ui5-li-custom>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                <div
+                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                  style="padding: 0px 1rem;"
+                >
+                  <ui5-icon
+                    class=""
+                    name="filter"
+                    style="padding-right: 1rem;"
+                  />
+                  <ui5-input
+                    class=""
+                    type="Text"
+                    value=""
+                    value-state="None"
+                  />
+                </div>
+              </ui5-li-custom>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="false"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="false"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
+                class=""
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+              <ui5-li-custom
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
+                type="Inactive"
               >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-                <ui5-li-custom
-                  class=""
-                  type="Inactive"
-                >
-                  <div
-                    class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
-                    style="padding: 0px 1rem;"
-                  >
-                    <ui5-icon
-                      class=""
-                      name="filter"
-                      style="padding-right: 1rem;"
-                    />
-                    <ui5-input
-                      class=""
-                      type="Text"
-                      value=""
-                      value-state="None"
-                    />
-                  </div>
-                </ui5-li-custom>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                <div
+                  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsCenter- FlexBox--flexWrapNoWrap-"
+                  style="padding: 0px 1rem;"
+                >
+                  <ui5-icon
+                    class=""
+                    name="filter"
+                    style="padding-right: 1rem;"
+                  />
+                  <ui5-input
+                    class=""
+                    type="Text"
+                    value=""
+                    value-state="None"
+                  />
+                </div>
+              </ui5-li-custom>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <div
@@ -2135,284 +2087,272 @@ exports[`AnalyticalTable custom row height 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="true"
             >
+              <span
+                style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
+                title="Age"
+              >
+                Age
+              </span>
               <div
-                class="TableColumnHeader--header-"
-              >
-                <span
-                  style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
-                  title="Age"
-                >
-                  Age
-                </span>
-                <div
-                  class="TableColumnHeader--iconContainer-"
-                />
-              </div>
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <div
@@ -2620,284 +2560,272 @@ exports[`AnalyticalTable test Asc desc 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Age
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <div
@@ -3105,284 +3033,272 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       >
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
-          id="age"
+          id="name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 0px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
-          id="name"
+          id="age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 150px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Age
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.name"
           role="columnheader"
           style="position: absolute; top: 0px; left: 300px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.name"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+                Friend Name
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
         <div
           class="AnalyticalTable--th-"
-          draggable="true"
           id="friend.age"
           role="columnheader"
           style="position: absolute; top: 0px; left: 450px; width: 150px;"
         >
           <div
-            style="position: relative; width: 100%; height: 100%;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
-              style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
+              class="TableColumnHeader--header-"
+              data-column-id="friend.age"
+              draggable="true"
             >
-              <div
-                class="TableColumnHeader--header-"
+              <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-"
-                />
-              </div>
+              </span>
+              <div
+                class="TableColumnHeader--iconContainer-"
+              />
             </div>
-            <ui5-popover
+          </div>
+          <ui5-popover
+            class=""
+            horizontal-align="Left"
+            no-arrow="true"
+            placement-type="Bottom"
+            style="font-weight: normal;"
+            vertical-align="Center"
+          >
+            <ui5-list
               class=""
-              horizontal-align="Left"
-              no-arrow="true"
-              placement-type="Bottom"
-              style="font-weight: normal;"
-              vertical-align="Center"
+              footer-text=""
+              header-text=""
+              mode="None"
+              no-data-text=""
+              separators="All"
             >
-              <ui5-list
+              <ui5-li
                 class=""
-                footer-text=""
-                header-text=""
-                mode="None"
-                no-data-text=""
-                separators="All"
-              >
-                <ui5-li
-                  class=""
-                  data-sort="asc"
-                  icon="sort-ascending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Ascending
-                </ui5-li>
-                <ui5-li
-                  class=""
-                  data-sort="desc"
-                  icon="sort-descending"
-                  info-state="None"
-                  type="Active"
-                >
-                  Sort Descending
-                </ui5-li>
-              </ui5-list>
-            </ui5-popover>
-            <div
-              class="TableColumnHeader--resizer-"
-              draggable="false"
-              style="cursor: ew-resize;"
-            />
-          </div>
+                data-sort="asc"
+                icon="sort-ascending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Ascending
+              </ui5-li>
+              <ui5-li
+                class=""
+                data-sort="desc"
+                icon="sort-descending"
+                info-state="None"
+                type="Active"
+              >
+                Sort Descending
+              </ui5-li>
+            </ui5-list>
+          </ui5-popover>
+          <div
+            class="TableColumnHeader--resizer-"
+            draggable="false"
+            style="cursor: ew-resize;"
+          />
         </div>
       </header>
       <div
@@ -3405,9 +3321,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               <span
                 class="Text--text- Text--noWrap-"
                 style="width: 100%;"
-                title="40"
+                title="Fra"
               >
-                40
+                Fra
               </span>
             </div>
             <div
@@ -3417,9 +3333,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               <span
                 class="Text--text- Text--noWrap-"
                 style="width: 100%;"
-                title="Fra"
+                title="40"
               >
-                Fra
+                40
               </span>
             </div>
             <div
@@ -3460,9 +3376,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               <span
                 class="Text--text- Text--noWrap-"
                 style="width: 100%;"
-                title="20"
+                title="bla"
               >
-                20
+                bla
               </span>
             </div>
             <div
@@ -3472,9 +3388,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               <span
                 class="Text--text- Text--noWrap-"
                 style="width: 100%;"
-                title="bla"
+                title="20"
               >
-                bla
+                20
               </span>
             </div>
             <div

From 17daa550ed387f35ce760e3cdb2cc4ffe79f3e2b Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 5 Dec 2019 15:50:45 +0100
Subject: [PATCH 5/7] Update AnalyticalTable.test.tsx

---
 .../src/components/AnalyticalTable/AnalyticalTable.test.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
index 21ff58ba8b8..661f13522f7 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
@@ -229,7 +229,7 @@ describe('AnalyticalTable', () => {
     let componentDrag = wrapper.find('div[role="columnheader"] div[draggable]').at(0);
     let inst = componentDrag.instance();
     // @ts-ignore
-    let dragColumnId = inst.id;
+    let dragColumnId = inst.dataset.columnId;
 
     // @ts-ignore
     expect(inst.draggable).toBeDefined();
@@ -244,7 +244,7 @@ describe('AnalyticalTable', () => {
     dataTransfer.getData = () => {
       return dragColumnId;
     };
-    let componentDrop = wrapper.find({ role: 'columnheader' }).at(1);
+    let componentDrop = wrapper.find('div[role="columnheader"] div[draggable]').at(1);
     // @ts-ignore
     componentDrop.simulate('drop', { dataTransfer: dataTransfer });
 

From e85e84e2b39bd5574e8547274271b42d62b6edd2 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 9 Dec 2019 09:32:31 +0100
Subject: [PATCH 6/7] WIP: Update react-table to rc.5

---
 packages/main/package.json                               | 2 +-
 packages/main/src/components/AnalyticalTable/index.tsx   | 9 +++++----
 .../tableReducer/{reducer.ts => stateReducer.ts}         | 2 +-
 yarn.lock                                                | 8 ++++----
 4 files changed, 11 insertions(+), 10 deletions(-)
 rename packages/main/src/components/AnalyticalTable/tableReducer/{reducer.ts => stateReducer.ts} (73%)

diff --git a/packages/main/package.json b/packages/main/package.json
index 237bdfaae55..d1b7b3a6ecd 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -29,7 +29,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-beta.27",
+    "react-table": "7.0.0-rc.5",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 27c4047c97c..706a4d8c28e 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -28,7 +28,8 @@ import {
   useGroupBy,
   useResizeColumns,
   useSortBy,
-  useTable
+  useTable,
+  Column
 } from 'react-table';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
@@ -47,11 +48,11 @@ import { useTableRowStyling } from './hooks/useTableRowStyling';
 import { useTableScrollHandles } from './hooks/useTableScrollHandles';
 import { useTableStyling } from './hooks/useTableStyling';
 import { useToggleRowExpand } from './hooks/useToggleRowExpand';
-import { reducer } from './tableReducer/reducer';
+import { stateReducer } from './tableReducer/stateReducer';
 import { TitleBar } from './TitleBar';
 import { VirtualTableBody } from './virtualization/VirtualTableBody';
 
-export interface ColumnConfiguration {
+export interface ColumnConfiguration extends Column {
   accessor?: string;
   width?: number;
   hAlign?: TextAlign;
@@ -193,7 +194,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       data,
       defaultColumn,
       getSubRows,
-      reducer,
+      stateReducer,
       ...reactTableOptions
     },
     useFilters,
diff --git a/packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
similarity index 73%
rename from packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts
rename to packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
index 140ba47dfb6..35f0bf1109e 100644
--- a/packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts
+++ b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
@@ -1,4 +1,4 @@
-export const reducer = (newState, action, prevState) => {
+export const stateReducer = (newState, action, prevState) => {
   const { payload } = action;
   switch (action.type) {
     case 'SET_GROUP_BY':
diff --git a/yarn.lock b/yarn.lock
index f8194f1a35a..6ddf5bed7de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14536,10 +14536,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-table@7.0.0-beta.27:
-  version "7.0.0-beta.27"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.27.tgz#0505aed2beffedc596dd003e72c91a4709b91456"
-  integrity sha512-Lkc8xIwc6OhV4RV753zJt/29WdPh0H5TlZVT8KRjiCaX4Xcrx/MI0kAG+WljxIz9USN6+FYiKrYVtOcScHIxBA==
+react-table@7.0.0-rc.5:
+  version "7.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.5.tgz#6d0caf6b6003c19c3e36dfd7c926f5b40dee0c30"
+  integrity sha512-hMrnKMvKOfqbHv3WUxmActkTj06Y8r3v/HIZ2H6CRqhgjGV3gtONn2N1w9lLCY7NE3x7BtD+YhtmacYhWkGtJA==
 
 react-test-renderer@^16.0.0-0:
   version "16.8.6"

From 529ac00bc81e0ccdf61db14e12b13c2f5b7cb21b Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 9 Dec 2019 13:45:52 +0100
Subject: [PATCH 7/7] WIP: Remove redundant cell styling hook

---
 .../AnalyticalTable/hooks/useCellStyling.ts   | 48 ------------------
 .../hooks/useTableCellStyling.ts              | 49 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 50 deletions(-)
 delete mode 100644 packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
deleted file mode 100644
index 0260fb830ab..00000000000
--- a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
-import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
-import { CSSProperties } from 'react';
-
-export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => {
-  const style: CSSProperties = {};
-
-  if (rowHeight) {
-    style.height = `${rowHeight}px`;
-  }
-  switch (column.hAlign) {
-    case TextAlign.Begin:
-      style.textAlign = 'start';
-      break;
-    case TextAlign.Center:
-      style.textAlign = 'center';
-      break;
-    case TextAlign.End:
-      style.textAlign = 'end';
-      break;
-    case TextAlign.Left:
-      style.textAlign = 'left';
-      break;
-    case TextAlign.Right:
-      style.textAlign = 'right';
-      break;
-  }
-  switch (column.vAlign) {
-    case VerticalAlign.Bottom:
-      style.verticalAlign = 'bottom';
-      break;
-    case VerticalAlign.Middle:
-      style.verticalAlign = 'middle';
-      break;
-    case VerticalAlign.Top:
-      style.verticalAlign = 'top';
-      break;
-  }
-
-  let className = classes.tableCell;
-  if (column.className) {
-    className += ` ${column.className}`;
-  }
-  return {
-    className,
-    style
-  };
-};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
index a0767d5a3d3..047761254a7 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
@@ -1,9 +1,54 @@
+import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
+import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
+import { CSSProperties } from 'react';
 import { PluginHook } from 'react-table';
-import { useCellStyling } from './useCellStyling';
 
 export const useTableCellStyling = (classes, rowHeight) => {
   const hook: PluginHook<{}> = (instance) => {
-    instance.getCellProps.push(useCellStyling({ rowHeight }, classes));
+    instance.getCellProps.push(({ column }) => {
+      const style: CSSProperties = {};
+
+      if (rowHeight) {
+        style.height = `${rowHeight}px`;
+      }
+      switch (column.hAlign) {
+        case TextAlign.Begin:
+          style.textAlign = 'start';
+          break;
+        case TextAlign.Center:
+          style.textAlign = 'center';
+          break;
+        case TextAlign.End:
+          style.textAlign = 'end';
+          break;
+        case TextAlign.Left:
+          style.textAlign = 'left';
+          break;
+        case TextAlign.Right:
+          style.textAlign = 'right';
+          break;
+      }
+      switch (column.vAlign) {
+        case VerticalAlign.Bottom:
+          style.verticalAlign = 'bottom';
+          break;
+        case VerticalAlign.Middle:
+          style.verticalAlign = 'middle';
+          break;
+        case VerticalAlign.Top:
+          style.verticalAlign = 'top';
+          break;
+      }
+
+      let className = classes.tableCell;
+      if (column.className) {
+        className += ` ${column.className}`;
+      }
+      return {
+        className,
+        style
+      };
+    });
   };
   hook.pluginName = 'useTableCellStyling';
   return hook;