From 8c54272c058706d81df24d603cc776ede44c3d77 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Wed, 29 Apr 2020 20:07:22 +0200
Subject: [PATCH 1/2] fix(AnalyticalTable): support RTL

closes #460
---
 .../AnalyticalTable/ColumnHeader/index.tsx    | 14 ++----
 .../AnalyticalTable/hooks/useRTL.ts           | 50 +++++++++++++++++++
 .../hooks/useTableCellStyling.ts              |  8 +--
 .../hooks/useTableHeaderStyling.ts            |  4 +-
 .../src/components/AnalyticalTable/index.tsx  |  5 +-
 .../virtualization/VirtualTableBody.tsx       |  2 +
 6 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 packages/main/src/components/AnalyticalTable/hooks/useRTL.ts

diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 798c90896db..0e3ff4d406b 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -28,7 +28,6 @@ export interface ColumnHeaderProps {
   className: string;
   column: ColumnType;
   style: CSSProperties;
-  isLastColumn?: boolean;
   onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
   onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void;
   onDragStart: DragEventHandler<HTMLDivElement>;
@@ -102,7 +101,6 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     column,
     className,
     style,
-    isLastColumn,
     onSort,
     onGroupBy,
     onDragEnter,
@@ -122,13 +120,12 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
   const filterIcon = isFiltered ? <Icon name="filter" /> : null;
   const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
 
-  const isResizable = !isLastColumn && column.canResize;
   const hasPopover = column.canGroupBy || column.canSort || column.canFilter;
   const innerStyle: CSSProperties = useMemo(() => {
     const modifiedStyles: CSSProperties = {
       cursor: hasPopover ? 'pointer' : 'auto'
     };
-    if (isResizable) {
+    if (column.canResize) {
       modifiedStyles.maxWidth = `calc(100% - 16px)`;
     }
     if (dragOver) {
@@ -140,12 +137,9 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     if (column.hAlign === TextAlign.End) {
       modifiedStyles.justifyContent = 'flex-end';
       modifiedStyles.maxWidth = '';
-      if (isLastColumn) {
-        modifiedStyles.paddingRight = `calc(${ThemingParameters.sapScrollBar_Dimension} + 1rem)`;
-      }
     }
     return modifiedStyles;
-  }, [isResizable, dragOver, hasPopover]);
+  }, [column.canResize, dragOver, hasPopover]);
 
   const popoverRef = useRef<Ui5PopoverDomRef>(null);
 
@@ -188,8 +182,8 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
         </div>
       </div>
       {hasPopover && <ColumnHeaderModal column={column} onSort={onSort} onGroupBy={onGroupBy} ref={popoverRef} />}
-      {column.getResizerProps && (
-        <div {...column.getResizerProps()} className={`${classes.resizer} ${isLastColumn ? classes.lastColumn : ''}`} />
+      {column.canResize && column.getResizerProps && (
+        <div {...column.getResizerProps()} className={`${classes.resizer}`} />
       )}
     </div>
   );
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRTL.ts b/packages/main/src/components/AnalyticalTable/hooks/useRTL.ts
new file mode 100644
index 00000000000..f188b575808
--- /dev/null
+++ b/packages/main/src/components/AnalyticalTable/hooks/useRTL.ts
@@ -0,0 +1,50 @@
+import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+
+const visibleColumns = (currentVisibleColumns) => {
+  if (getRTL()) {
+    return currentVisibleColumns.reverse();
+  }
+  return currentVisibleColumns;
+};
+const getHeaderProps = (props, { column, instance }) => {
+  const isRTL = getRTL();
+  const lastColumnId = instance.visibleColumns[isRTL ? 0 : instance.visibleColumns.length - 1].id;
+  const isLastColumn = column.id === lastColumnId;
+  return [
+    props,
+    {
+      style: {
+        paddingLeft: isRTL && isLastColumn ? ThemingParameters.sapScrollBar_Dimension : 0,
+        paddingRight: !isRTL && isLastColumn ? ThemingParameters.sapScrollBar_Dimension : 0
+      }
+    }
+  ];
+};
+
+const getCellProps = (props, { cell, instance }) => {
+  const isRTL = getRTL();
+  const lastColumnId = instance.visibleColumns[isRTL ? 0 : instance.visibleColumns.length - 1].id;
+  const isLastColumn = cell.column.id === lastColumnId;
+  return [
+    props,
+    {
+      style: {
+        left:
+          isRTL && !isLastColumn
+            ? `calc(${cell.column.totalLeft}px - ${ThemingParameters.sapScrollBar_Dimension})`
+            : `${cell.column.totalLeft}px`,
+        width: isLastColumn
+          ? `calc(${cell.column.totalWidth}px - ${ThemingParameters.sapScrollBar_Dimension})`
+          : `${cell.column.totalWidth}px`
+      }
+    }
+  ];
+};
+
+export const useRTL = (hooks) => {
+  hooks.visibleColumns.push(visibleColumns);
+  hooks.getHeaderProps.push(getHeaderProps);
+  hooks.getCellProps.push(getCellProps);
+};
+useRTL.plugiName = 'useRTL';
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
index 87256df0981..e168dc8679a 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
@@ -1,10 +1,9 @@
-import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
 import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
+
 import { CSSProperties } from 'react';
 
 const getCellProps = (cellProps, { cell: { column }, instance }) => {
-  const lastColumnId = instance.visibleColumns[instance.visibleColumns.length - 1]?.id;
   const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id);
   const { classes } = instance.webComponentsReactProperties;
   const style: CSSProperties = {};
@@ -52,11 +51,6 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
     style.padding = 0;
   }
 
-  if (column.id === lastColumnId) {
-    style.paddingRight = `calc(${ThemingParameters.sapScrollBar_Dimension} + 0.5rem)`;
-    style.boxSizing = 'border-box';
-    style.width = `calc(${cellProps.style.width} - ${ThemingParameters.sapScrollBar_Dimension})`;
-  }
   return [
     cellProps,
     {
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
index 7189dcb764d..053ba88d565 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
@@ -1,5 +1,3 @@
-import { PluginHook } from 'react-table';
-
 const getHeaderProps = (columnProps, { instance, column }) => {
   const { classes } = instance.webComponentsReactProperties;
   return [
@@ -15,7 +13,7 @@ const getHeaderProps = (columnProps, { instance, column }) => {
   ];
 };
 
-export const useTableHeaderStyling: PluginHook<{}> = (hooks) => {
+export const useTableHeaderStyling = (hooks) => {
   hooks.getHeaderProps.push(getHeaderProps);
 };
 useTableHeaderStyling.pluginName = 'useTableHeaderStyling';
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 9e5979be687..738a5f3030c 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -44,6 +44,7 @@ import { useDragAndDrop } from './hooks/useDragAndDrop';
 import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths';
 import { useRowHighlight } from './hooks/useRowHighlight';
 import { useRowSelectionColumn } from './hooks/useRowSelectionColumn';
+import { useRTL } from './hooks/useRTL';
 import { useSingleRowStateSelection } from './hooks/useSingleRowStateSelection';
 import { useTableCellStyling } from './hooks/useTableCellStyling';
 import { useTableHeaderGroupStyling } from './hooks/useTableHeaderGroupStyling';
@@ -247,7 +248,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     useDynamicColumnWidths,
     useTableCellStyling,
     useToggleRowExpand,
-    ...tableHooks
+    ...tableHooks,
+    useRTL
   );
 
   const updateTableClientWidth = useCallback(() => {
@@ -378,7 +380,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
                     // eslint-disable-next-line react/jsx-key
                     <ColumnHeader
                       {...column.getHeaderProps()}
-                      isLastColumn={index === headerGroup.headers.length - 1}
                       onSort={onSort}
                       onGroupBy={onGroupByChanged}
                       onDragStart={handleDragStart}
diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
index 587b70850b3..5f9d0f56c9c 100644
--- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -6,6 +6,7 @@ import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionM
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
 import { VirtualTableRow } from './VirtualTableRow';
+import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
 
 interface VirtualTableBodyProps {
   infiniteScroll: boolean;
@@ -188,6 +189,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
       innerRef={innerDivRef}
       overscanCount={overscan}
       onScroll={onScroll}
+      direction={getRTL() ? 'rtl' : 'ltr'}
     >
       {VirtualTableRow}
     </FixedSizeList>

From 3907ec804945d115bfa6319705722954be4e069d Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Wed, 29 Apr 2020 20:10:11 +0200
Subject: [PATCH 2/2] Update AnalyticalTable.test.tsx.snap

---
 .../AnalyticalTable.test.tsx.snap             | 250 +++++++++---------
 1 file changed, 125 insertions(+), 125 deletions(-)

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 60714a8ac69..2b7d9f7fb29 100644
--- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -94,7 +94,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -154,7 +154,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -214,11 +214,11 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -263,7 +263,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -333,7 +333,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -400,7 +400,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -443,7 +443,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -478,7 +478,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -513,7 +513,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -558,7 +558,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -618,7 +618,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -678,7 +678,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -738,11 +738,11 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -787,7 +787,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -857,7 +857,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -924,7 +924,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -967,7 +967,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -1002,7 +1002,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -1037,7 +1037,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -1082,7 +1082,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1142,7 +1142,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1202,7 +1202,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1262,11 +1262,11 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -1311,7 +1311,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -1590,7 +1590,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           draggable="false"
           id="__ui5wcr__internal_selection_column"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 47px;"
+          style="position: absolute; top: 0px; left: 0px; width: 47px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1610,7 +1610,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           draggable="false"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 47px; width: 150px;"
+          style="position: absolute; top: 0px; left: 47px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1687,7 +1687,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           draggable="false"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 197px; width: 150px;"
+          style="position: absolute; top: 0px; left: 197px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1764,7 +1764,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           draggable="false"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 347px; width: 150px;"
+          style="position: absolute; top: 0px; left: 347px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -1841,11 +1841,11 @@ exports[`AnalyticalTable Tree Table 1`] = `
           draggable="false"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 497px; width: 150px;"
+          style="position: absolute; top: 0px; left: 497px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -1907,7 +1907,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -2004,7 +2004,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
               aria-colindex="5"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 497px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 497px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -2092,7 +2092,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
               aria-colindex="5"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 497px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 497px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -2145,7 +2145,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
               aria-colindex="5"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 497px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 497px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -2187,7 +2187,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
               aria-colindex="5"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 497px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 497px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -2229,7 +2229,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
               aria-colindex="5"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 497px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 497px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -2274,7 +2274,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -2334,7 +2334,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -2394,7 +2394,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -2454,11 +2454,11 @@ exports[`AnalyticalTable custom row height 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -2503,7 +2503,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -2573,7 +2573,7 @@ exports[`AnalyticalTable custom row height 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -2640,7 +2640,7 @@ exports[`AnalyticalTable custom row height 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -2683,7 +2683,7 @@ exports[`AnalyticalTable custom row height 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -2718,7 +2718,7 @@ exports[`AnalyticalTable custom row height 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -2753,7 +2753,7 @@ exports[`AnalyticalTable custom row height 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -2798,7 +2798,7 @@ exports[`AnalyticalTable render without data 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -2858,7 +2858,7 @@ exports[`AnalyticalTable render without data 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -2918,7 +2918,7 @@ exports[`AnalyticalTable render without data 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -2978,11 +2978,11 @@ exports[`AnalyticalTable render without data 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -3027,7 +3027,7 @@ exports[`AnalyticalTable render without data 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -3079,7 +3079,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -3139,7 +3139,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -3199,7 +3199,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -3259,11 +3259,11 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -3308,7 +3308,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -3378,7 +3378,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -3445,7 +3445,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -3488,7 +3488,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -3523,7 +3523,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -3558,7 +3558,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -3603,7 +3603,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -3663,7 +3663,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -3723,7 +3723,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -3783,11 +3783,11 @@ exports[`AnalyticalTable test Asc desc 2`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -3832,7 +3832,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -3902,7 +3902,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -3969,7 +3969,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -4012,7 +4012,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -4047,7 +4047,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -4082,7 +4082,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -4127,7 +4127,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -4187,7 +4187,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -4247,7 +4247,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -4307,11 +4307,11 @@ exports[`AnalyticalTable test Asc desc 3`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -4356,7 +4356,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -4426,7 +4426,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -4493,7 +4493,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -4536,7 +4536,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -4571,7 +4571,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -4606,7 +4606,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -4651,7 +4651,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -4711,7 +4711,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -4771,7 +4771,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -4831,11 +4831,11 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -4880,7 +4880,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -4950,7 +4950,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5017,7 +5017,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5060,7 +5060,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -5095,7 +5095,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -5130,7 +5130,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -5175,7 +5175,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
           draggable="false"
           id="__ui5wcr__internal_highlight_column"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 6px;"
+          style="position: absolute; top: 0px; left: 0px; width: 6px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5199,7 +5199,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
           draggable="false"
           id="__ui5wcr__internal_selection_column"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 6px; width: 47px;"
+          style="position: absolute; top: 0px; left: 6px; width: 47px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5219,7 +5219,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 53px; width: 150px;"
+          style="position: absolute; top: 0px; left: 53px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5279,7 +5279,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 203px; width: 150px;"
+          style="position: absolute; top: 0px; left: 203px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5339,7 +5339,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 353px; width: 150px;"
+          style="position: absolute; top: 0px; left: 353px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5399,11 +5399,11 @@ exports[`AnalyticalTable with highlight row 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 503px; width: 150px;"
+          style="position: absolute; top: 0px; left: 503px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -5448,7 +5448,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -5540,7 +5540,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
               aria-colindex="6"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 503px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 503px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5627,7 +5627,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
               aria-colindex="6"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 503px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 503px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -5684,7 +5684,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
               aria-colindex="6"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 503px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 503px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -5733,7 +5733,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
               aria-colindex="6"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 503px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 503px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -5782,7 +5782,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
               aria-colindex="6"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 503px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 503px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -5827,7 +5827,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
           draggable="true"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5887,7 +5887,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
           draggable="true"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 150px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -5947,7 +5947,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
           draggable="true"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 300px; width: 150px; padding-left: 0px; padding-right: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
@@ -6007,11 +6007,11 @@ exports[`AnalyticalTable without selection Column 1`] = `
           draggable="true"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 450px; width: 150px; padding-left: 0px;"
         >
           <div
             class="TableColumnHeader-header-0"
-            style="cursor: pointer;"
+            style="cursor: pointer; max-width: calc(100% - 16px);"
           >
             <span
               style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap;"
@@ -6056,7 +6056,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
             </ui5-list>
           </ui5-popover>
           <div
-            class="TableColumnHeader-resizer-0 TableColumnHeader-lastColumn-0"
+            class="TableColumnHeader-resizer-0"
             draggable="false"
             role="separator"
             style="cursor: ew-resize;"
@@ -6126,7 +6126,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -6193,7 +6193,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             >
               <span
@@ -6236,7 +6236,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -6271,7 +6271,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>
@@ -6306,7 +6306,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
               aria-colindex="4"
               class="AnalyticalTable-tableCell-0"
               role="cell"
-              style="position: absolute; top: 0px; left: 450px; align-items: center; box-sizing: border-box;"
+              style="position: absolute; top: 0px; left: 450px; align-items: center;"
               tabindex="-1"
             />
           </div>