From 46f0bee8840166a4d1358c7e84ebf9ff391b06a6 Mon Sep 17 00:00:00 2001
From: Papa-Santo <165276313+Papa-Santo@users.noreply.github.com>
Date: Thu, 25 Apr 2024 06:07:22 -0400
Subject: [PATCH 1/8] Feat(AnalyticalTable): introduce autoResize column
 feature (#3196)

A functionality by which the cell width gets auto adjusted when we double click the data-resizer columns. Implemented for text.
---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    |  59 +++++++++
 .../AnalyticalTable.stories.tsx               |   8 +-
 .../ColumnHeader/ColumnHeaderContainer.tsx    |  10 +-
 .../TableBody/VirtualTableBody.tsx            |  42 +------
 .../src/components/AnalyticalTable/index.tsx  | 117 ++++++++++++++++--
 .../tableReducer/stateReducer.ts              |  11 ++
 .../components/AnalyticalTable/types/index.ts |  11 +-
 7 files changed, 204 insertions(+), 54 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 8400b05597a..bdcc8c68387 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -239,6 +239,65 @@ describe('AnalyticalTable', () => {
     cy.findByText('Name-3').should('not.be.visible');
   });
 
+  it('autoResize', () => {
+    let resizeColumns = columns.map((el) => {
+      return { ...el, autoResizable: true };
+    });
+
+    let dataFixed = data.map((el, i) => {
+      if (i === 2) return { ...el, name: 'Much Longer Name To Resize Larger For Testing A Larger Auto Resize' };
+      return el;
+    });
+
+    cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} onAutoResize={(e) => e.preventDefault()} />);
+    cy.wait(200);
+    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 476);
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 476);
+
+    cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
+    cy.wait(200);
+    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 451);
+
+    dataFixed = generateMoreData(200);
+
+    dataFixed = dataFixed.map((el, i) => {
+      if (i === 2) return { ...el, name: 'Much Longer Name To Resize Larger For Testing A Larger Auto Resize' };
+      else if (i > 50) return { ...el, name: 'Short Name' };
+      return el;
+    });
+
+    const loadMore = cy.spy().as('more');
+    cy.mount(
+      <AnalyticalTable
+        data={dataFixed}
+        columns={resizeColumns}
+        onLoadMore={loadMore}
+        infiniteScroll={true}
+        infiniteScrollThreshold={0}
+      />
+    );
+
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 94);
+
+    resizeColumns = columns.map((el) => {
+      return { ...el, autoResizable: false };
+    });
+
+    cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
+    cy.wait(200);
+    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 472.75);
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 472.75);
+  });
+
   it('scrollTo', () => {
     interface ScrollTableProps {
       scrollFn: string;
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
index 8f398baafd8..5ae00702ed7 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -32,11 +32,13 @@ const meta = {
       {
         Header: 'Name',
         headerTooltip: 'Full Name', // A more extensive description!
-        accessor: 'name' // String-based value accessors!
+        accessor: 'name', // String-based value accessors!
+        autoResizable: true // Double clicking the resize bar auto resizes the column!
       },
       {
         Header: 'Age',
         accessor: 'age',
+        autoResizable: true,
         hAlign: TextAlign.End,
         disableGroupBy: true,
         disableSortBy: false,
@@ -45,12 +47,14 @@ const meta = {
       },
       {
         Header: 'Friend Name',
-        accessor: 'friend.name'
+        accessor: 'friend.name',
+        autoResizable: true
       },
       {
         Header: () => <span>Friend Age</span>,
         headerLabel: 'Friend Age',
         accessor: 'friend.age',
+        autoResizable: true,
         hAlign: TextAlign.End,
         filter: (rows, accessor, filterValue) => {
           if (filterValue === 'all') {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
index ddcfae533aa..80fc78ed086 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -17,6 +17,7 @@ interface ColumnHeaderContainerProps {
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   uniqueId: string;
   showVerticalEndBorder: boolean;
+  onAutoResize: (e: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>, accessor: string) => void;
 }
 
 export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
@@ -30,7 +31,8 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     portalContainer,
     columnVirtualizer,
     uniqueId,
-    showVerticalEndBorder
+    showVerticalEndBorder,
+    onAutoResize
   } = props;
 
   useStylesheet(styleData, 'Resizer');
@@ -65,8 +67,14 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
               <div
                 {...column.getResizerProps()}
                 data-resizer
+                data-cy={`data-resizer-${index}`}
                 className={classNames.resizer}
                 style={resizerDirectionStyle}
+                onDoubleClick={(e) => {
+                  if (column.autoResizable) {
+                    onAutoResize(e, rest.id);
+                  }
+                }}
               />
             )}
             <ColumnHeader
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
index 1768963b3de..9e7e53061d0 100644
--- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -1,8 +1,7 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
 import type { MutableRefObject, ReactNode } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js';
 import type {
   AnalyticalTablePropTypes,
@@ -18,15 +17,10 @@ interface VirtualTableBodyProps {
   classes: Record<string, string>;
   prepareRow: (row: unknown) => void;
   rows: Record<string, any>[];
-  itemCount: number;
-  scrollToRef: MutableRefObject<ScrollToRefType>;
   isTreeTable: boolean;
   internalRowHeight: number;
-  visibleRows: number;
   alternateRowColor: boolean;
-  overscanCount: number;
   visibleColumns: Record<string, unknown>[];
-  parentRef: MutableRefObject<HTMLDivElement>;
   renderRowSubComponent: (row?: Record<string, unknown>) => ReactNode;
   popInRowHeight: number;
   isRtl: boolean;
@@ -40,26 +34,20 @@ interface VirtualTableBodyProps {
   scrollContainerRef?: MutableRefObject<HTMLDivElement>;
   subComponentsBehavior: AnalyticalTablePropTypes['subComponentsBehavior'];
   triggerScroll?: TriggerScrollState;
+  scrollToRef: MutableRefObject<ScrollToRefType>;
+  rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
 }
 
-const measureElement = (el: HTMLElement) => {
-  return el.offsetHeight;
-};
-
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
   const {
     alternateRowColor,
     classes,
     prepareRow,
     rows,
-    itemCount,
     scrollToRef,
     isTreeTable,
     internalRowHeight,
-    visibleRows,
-    overscanCount,
     visibleColumns,
-    parentRef,
     renderRowSubComponent,
     popInRowHeight,
     markNavigatedRow,
@@ -72,33 +60,13 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     subRowsKey,
     scrollContainerRef,
     subComponentsBehavior,
-    triggerScroll
+    triggerScroll,
+    rowVirtualizer
   } = props;
 
-  const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
   const rowHeight = popInRowHeight !== internalRowHeight ? popInRowHeight : internalRowHeight;
   const lastNonEmptyRow = useRef(null);
 
-  const rowVirtualizer = useVirtualizer({
-    count: itemCount,
-    getScrollElement: () => parentRef.current,
-    estimateSize: useCallback(
-      (index) => {
-        if (
-          renderRowSubComponent &&
-          (rows[index]?.isExpanded || alwaysShowSubComponent) &&
-          subComponentsHeight?.[index]?.rowId === rows[index]?.id
-        ) {
-          return rowHeight + (subComponentsHeight?.[index]?.subComponentHeight ?? 0);
-        }
-        return rowHeight;
-      },
-      [rowHeight, rows, renderRowSubComponent, alwaysShowSubComponent, subComponentsHeight]
-    ),
-    overscan,
-    measureElement,
-    indexAttribute: 'data-virtual-row-index'
-  });
   scrollToRef.current = {
     ...scrollToRef.current,
     scrollToOffset: rowVirtualizer.scrollToOffset,
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 629b0eecc6a..572401a1423 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -149,6 +149,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     onRowSelect,
     onSort,
     onTableScroll,
+    onAutoResize,
     LoadingComponent,
     NoDataComponent,
     additionalEmptyRowsCount = 0,
@@ -655,6 +656,105 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     );
   };
 
+  const handleOnAutoResize = (e, accessor) => {
+    // Helpers
+    interface canvasHolderProps {
+      canvas?: HTMLCanvasElement;
+    }
+    const canvasHolder: canvasHolderProps = { canvas: undefined };
+    // Text Width Analysis
+    function getTextWidth(text: string, font: string) {
+      // Reusing the canvas is more efficient
+      const canvas = canvasHolder.canvas || (canvasHolder.canvas = document.createElement('canvas'));
+      const context = canvas.getContext('2d');
+      context.font = font;
+      const metrics = context.measureText(text);
+      return metrics.width;
+    }
+
+    function getCssStyle(element: Element, prop: string) {
+      return window.getComputedStyle(element, null).getPropertyValue(prop);
+    }
+
+    function getCanvasFont(el: Element = document.body) {
+      const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
+      const fontSize = getCssStyle(el, 'font-size') || '12px';
+      const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
+
+      return `${fontWeight} ${fontSize} ${fontFamily}`;
+    }
+
+    const findWidth = (text: string, el: Element) => {
+      let font: string | undefined;
+      if (!font) font = getCanvasFont(el);
+      return getTextWidth(text, font);
+    };
+    // End Helpers
+    let largest = 0;
+    // Currently Including Overscan
+    const items = rowVirtualizer.getVirtualItems();
+    const [start, end] = [items[0].index, items[items.length - 1].index];
+
+    for (let i = start; i < end; i++) {
+      // Use the classname for the span where the text lives AnalyticalTable.module.css.js
+      const collection = document.getElementsByClassName(clsx(classNames.tableText));
+      const current = findWidth(rows[i].values[accessor], collection[0]);
+      largest = current > largest ? current : largest;
+    }
+    // Assign padding
+    largest = Math.ceil(largest + 20);
+    // Smallest column allowed is 60px
+    largest = largest < 60 ? 60 : largest;
+    onAutoResize(
+      enrichEventWithDetails(e, {
+        accessor,
+        width: largest
+      })
+    );
+    if (e.defaultPrevented) {
+      return;
+    }
+    dispatch({
+      type: 'DOUBLE_CLICK_RESIZE',
+      payload: { [accessor]: largest }
+    });
+  };
+
+  const measureElement = (el: HTMLElement) => {
+    return el.offsetHeight;
+  };
+
+  const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
+  const rHeight = popInRowHeight !== internalRowHeight ? popInRowHeight : internalRowHeight;
+
+  const itemCount =
+    Math.max(
+      minRows,
+      rows.length,
+      visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows ? internalVisibleRowCount : 0
+    ) + (!tableState.isScrollable ? additionalEmptyRowsCount : 0);
+
+  const rowVirtualizer = useVirtualizer({
+    count: itemCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: useCallback(
+      (index) => {
+        if (
+          renderRowSubComponent &&
+          (rows[index]?.isExpanded || alwaysShowSubComponent) &&
+          tableState.subComponentsHeight?.[index]?.rowId === rows[index]?.id
+        ) {
+          return rHeight + (tableState.subComponentsHeight?.[index]?.subComponentHeight ?? 0);
+        }
+        return rHeight;
+      },
+      [rHeight, rows, renderRowSubComponent, alwaysShowSubComponent, tableState.subComponentsHeight]
+    ),
+    overscan,
+    measureElement,
+    indexAttribute: 'data-virtual-row-index'
+  });
+
   return (
     <>
       <div
@@ -723,6 +823,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     columnVirtualizer={columnVirtualizer}
                     uniqueId={uniqueId}
                     showVerticalEndBorder={showVerticalEndBorder}
+                    onAutoResize={handleOnAutoResize}
                   />
                 )
               );
@@ -760,23 +861,11 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                   classes={classNames}
                   prepareRow={prepareRow}
                   rows={rows}
-                  itemCount={
-                    Math.max(
-                      minRows,
-                      rows.length,
-                      visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows
-                        ? internalVisibleRowCount
-                        : 0
-                    ) + (!tableState.isScrollable ? additionalEmptyRowsCount : 0)
-                  }
                   scrollToRef={scrollToRef}
                   isTreeTable={isTreeTable}
                   internalRowHeight={internalRowHeight}
                   popInRowHeight={popInRowHeight}
-                  visibleRows={internalVisibleRowCount}
                   alternateRowColor={alternateRowColor}
-                  overscanCount={overscanCount}
-                  parentRef={parentRef}
                   visibleColumns={visibleColumns}
                   renderRowSubComponent={renderRowSubComponent}
                   alwaysShowSubComponent={alwaysShowSubComponent}
@@ -789,6 +878,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                   subRowsKey={subRowsKey}
                   subComponentsBehavior={subComponentsBehavior}
                   triggerScroll={tableState.triggerScroll}
+                  rowVirtualizer={rowVirtualizer}
                 />
               </VirtualTableBodyContainer>
             )}
@@ -870,7 +960,8 @@ AnalyticalTable.defaultProps = {
   isTreeTable: false,
   alternateRowColor: false,
   overscanCountHorizontal: 5,
-  visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed
+  visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed,
+  onAutoResize: () => {}
 };
 
 export { AnalyticalTable };
diff --git a/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
index 215c5b77de6..57f35ac2ea0 100644
--- a/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
+++ b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
@@ -67,6 +67,17 @@ export const stateReducer = (state, action, _prevState, instance) => {
     // fallback if the component wasn't ready yet for scrolling (elements are not initialized), e.g. when calling `.scrollToItem` on mount
     case 'TRIGGER_PROG_SCROLL':
       return { ...state, triggerScroll: payload };
+    case 'DOUBLE_CLICK_RESIZE':
+      return {
+        ...state,
+        columnResizing: {
+          ...state.columnResizing,
+          columnWidths: {
+            ...state.columnResizing.columnWidths,
+            ...payload
+          }
+        }
+      };
     default:
       return state;
   }
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index c4333db4aaf..b79f5ee86fc 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -257,7 +257,12 @@ export interface AnalyticalTableColumnDefinition {
    * Disable resizing for this column.
    */
   disableResizing?: boolean;
-
+  /**
+   * Defines whether double clicking a columns data-resizer will automatically resize the column.
+   *
+   * Available on text columns
+   */
+  autoResizable?: boolean;
   // ui5 web components react properties
   /**
    * Horizontal alignment of the cell.
@@ -676,6 +681,10 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * Fired when the body of the table is scrolled.
    */
   onTableScroll?: (e?: CustomEvent<{ rows: Record<string, any>[]; rowElements: HTMLCollection }>) => void;
+  /**
+   * Fired when the table is resized by double-clicking the data-resizer.
+   */
+  onAutoResize?: (e?: CustomEvent<{ accessor: string; width: number }>) => void;
   // default components
   /**
    * Component that will be rendered when the table is not loading and has no data.

From d5879a21dd4d066de77f16680df9ba402d2b8258 Mon Sep 17 00:00:00 2001
From: Papa-Santo <165276313+Papa-Santo@users.noreply.github.com>
Date: Sun, 12 May 2024 08:35:55 -0400
Subject: [PATCH 2/8] Refactored code into useAutoResize hook. Changed pattern
 to resemble useDynamicColumnWidths. Detecting expandable rows and adjusting
 for the icon/button space. Removed support for isTreeTable and tables with
 strings in the groupBy array

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    | 26 ++++-
 .../ColumnHeader/ColumnHeaderContainer.tsx    | 16 ++-
 .../defaults/Column/Expandable.tsx            |  7 +-
 .../AnalyticalTable/hooks/useAutoResize.tsx   | 98 +++++++++++++++++++
 .../hooks/useDynamicColumnWidths.ts           |  2 +-
 .../src/components/AnalyticalTable/index.tsx  | 71 ++------------
 .../tableReducer/stateReducer.ts              |  2 +-
 .../components/AnalyticalTable/types/index.ts |  1 +
 8 files changed, 147 insertions(+), 76 deletions(-)
 create mode 100644 packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index bdcc8c68387..f1e3a30ff0a 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -245,7 +245,7 @@ describe('AnalyticalTable', () => {
     });
 
     let dataFixed = data.map((el, i) => {
-      if (i === 2) return { ...el, name: 'Much Longer Name To Resize Larger For Testing A Larger Auto Resize' };
+      if (i === 2) return { ...el, name: 'Longer Name Too' };
       return el;
     });
 
@@ -261,7 +261,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 451);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 127);
 
     dataFixed = generateMoreData(200);
 
@@ -284,7 +284,7 @@ describe('AnalyticalTable', () => {
 
     cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 94);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 91);
 
     resizeColumns = columns.map((el) => {
       return { ...el, autoResizable: false };
@@ -296,6 +296,26 @@ describe('AnalyticalTable', () => {
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 472.75);
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
     cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 472.75);
+
+    const dataSub = data.map((el, i) => {
+      if (i === 2) return { ...el, name: 'Longer Name Too' };
+      return el;
+    });
+
+    resizeColumns = columns.map((el) => {
+      return { ...el, autoResizable: true };
+    });
+
+    const renderRowSubComponent = () => {
+      return <div title="subcomponent">SubComponent</div>;
+    };
+
+    cy.mount(<AnalyticalTable data={dataSub} columns={resizeColumns} renderRowSubComponent={renderRowSubComponent} />);
+    cy.wait(200);
+    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 165);
   });
 
   it('scrollTo', () => {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
index 80fc78ed086..7f1cd7faeb7 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -17,7 +17,10 @@ interface ColumnHeaderContainerProps {
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   uniqueId: string;
   showVerticalEndBorder: boolean;
-  onAutoResize: (e: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>, accessor: string) => void;
+  isTreeTable: boolean;
+  rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
+  onAutoResize: (e?: CustomEvent<{ accessor: string; width: number }>) => void;
+  groupBy: string[];
 }
 
 export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
@@ -32,7 +35,10 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     columnVirtualizer,
     uniqueId,
     showVerticalEndBorder,
-    onAutoResize
+    onAutoResize,
+    rowVirtualizer,
+    isTreeTable,
+    groupBy
   } = props;
 
   useStylesheet(styleData, 'Resizer');
@@ -71,8 +77,10 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
                 className={classNames.resizer}
                 style={resizerDirectionStyle}
                 onDoubleClick={(e) => {
-                  if (column.autoResizable) {
-                    onAutoResize(e, rest.id);
+                  if (column.autoResizable && !isTreeTable && !groupBy.length) {
+                    const items = rowVirtualizer.getVirtualItems();
+                    const [start, end] = [items[0].index, items[items.length - 1].index];
+                    column.getResizerProps().onDoubleClick(e, start, end, rest.id, onAutoResize);
                   }
                 }}
               />
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
index 9edbd2a3f37..0cb97c8ce1d 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -1,6 +1,6 @@
 import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
-import { CssSizeVariables, useCurrentTheme, useStylesheet } from '@ui5/webcomponents-react-base';
+import { CssSizeVariables, useCurrentTheme, useStylesheet, useIsomorphicId } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React from 'react';
 import { ButtonDesign } from '../../../../enums/index.js';
@@ -24,7 +24,7 @@ const getPadding = (level) => {
 
 export const Expandable = (props) => {
   const { cell, row, column, visibleColumns: columns, webComponentsReactProperties } = props;
-  const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts } = webComponentsReactProperties;
+  const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts, uniqueId } = webComponentsReactProperties;
   const currentTheme = useCurrentTheme();
   useStylesheet(styleData, Expandable.displayName);
   const shouldRenderButton = currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark';
@@ -41,6 +41,8 @@ export const Expandable = (props) => {
   const subComponentExpandable =
     typeof renderRowSubComponent === 'function' && !!renderRowSubComponent(row) && !alwaysShowSubComponent;
 
+  const expandId = useIsomorphicId();
+
   return (
     <>
       {columnIndex === 0 && (
@@ -53,6 +55,7 @@ export const Expandable = (props) => {
               className={classNames.container}
               aria-expanded={row.isExpanded}
               aria-label={row.isExpanded ? translatableTexts.collapseA11yText : translatableTexts.expandA11yText}
+              id={`scaleModeHelperExpand-${uniqueId}-${expandId}`}
             >
               {shouldRenderButton ? (
                 <Button
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
new file mode 100644
index 00000000000..850265dbf9c
--- /dev/null
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -0,0 +1,98 @@
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
+import type { ReactTableHooks } from '../types/index.js';
+import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
+
+const handleAutoResize = (props, { instance }) => {
+  return {
+    ...props,
+    onDoubleClick: (e, start, end, accessor, onAutoResize) => {
+      // Find first in column to compare to accessor
+      let columnFirst;
+      const { columnOrder } = instance.state;
+      let colOrder = [];
+      if (columnOrder.length) {
+        colOrder = columnOrder.filter(
+          (col) =>
+            col !== '__ui5wcr__internal_selection_column' &&
+            col !== '__ui5wcr__internal_highlight_column' &&
+            col !== '__ui5wcr__internal_navigation_column'
+        );
+        columnFirst = colOrder[0];
+      }
+      if (!columnFirst) {
+        colOrder = instance.visibleColumns?.filter(
+          (col) =>
+            col.id !== '__ui5wcr__internal_selection_column' &&
+            col.id !== '__ui5wcr__internal_highlight_column' &&
+            col.id !== '__ui5wcr__internal_navigation_column'
+        );
+        columnFirst = colOrder[0].id;
+      }
+
+      // Undefined accessor should not occur but checking to be safe
+      columnFirst = columnFirst ? columnFirst === accessor : false;
+
+      const rows = instance.rows;
+      const dispatch = instance.dispatch;
+      const rowSlice = rows.slice(start, end);
+      let largest = getContentPxMax(rowSlice, accessor, instance?.webComponentsReactProperties.uniqueId, columnFirst);
+      largest = largest > DEFAULT_COLUMN_WIDTH ? largest : DEFAULT_COLUMN_WIDTH;
+      onAutoResize(
+        enrichEventWithDetails(e, {
+          accessor,
+          width: largest
+        })
+      );
+      if (e.defaultPrevented) {
+        return;
+      }
+      dispatch({
+        type: 'AUTO_RESIZE',
+        payload: { [accessor]: largest }
+      });
+    }
+  };
+};
+
+function getContentPxMax(rowSlice, accessor, uniqueId, isFirstColumn) {
+  let high = 0,
+    current,
+    ruler,
+    expand,
+    expandPx = 0,
+    style,
+    margin = 0;
+
+  // Check for Expandable Row
+  // If found in range: All rows treated as expandable
+  if (isFirstColumn) {
+    expand = document.querySelector(`[id^="scaleModeHelperExpand-${uniqueId}"]`);
+    if (expand) {
+      style = getComputedStyle(expand, null);
+      margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+      margin = margin > 0 ? margin : 0;
+    }
+    console.log(margin);
+    expandPx = expand ? expand.offsetWidth + margin : 0 + margin;
+  }
+
+  for (let i = 0; i < rowSlice.length; i++) {
+    const dataPoint = rowSlice[i]?.values?.[accessor];
+    if (dataPoint) {
+      ruler = ruler ? ruler : document.getElementById(`scaleModeHelper-${uniqueId}`);
+      if (ruler) {
+        ruler.innerHTML = `${dataPoint}`;
+        current = ruler.scrollWidth + CELL_PADDING_PX + expandPx;
+      } else current = 0;
+      high = high > current ? high : current;
+    }
+  }
+  return high ?? 0;
+}
+
+export const useAutoResize = (hooks: ReactTableHooks) => {
+  hooks.getResizerProps.push(handleAutoResize);
+};
+
+useAutoResize.pluginName = 'useAutoResize';
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts b/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts
index 7001aa3550f..80215fe6abc 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts
@@ -5,7 +5,7 @@ import type { AnalyticalTableColumnDefinition, ReactTableHooks } from '../types/
 
 const ROW_SAMPLE_SIZE = 20;
 const MAX_WIDTH = 700;
-const CELL_PADDING_PX = 18; /* padding left and right 0.5rem each (16px) + borders (1px) + buffer (1px) */
+export const CELL_PADDING_PX = 18; /* padding left and right 0.5rem each (16px) + borders (1px) + buffer (1px) */
 
 function findLongestString(str1, str2) {
   if (typeof str1 !== 'string' || typeof str2 !== 'string') {
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 572401a1423..29e3dbcf1fa 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -58,6 +58,7 @@ import { DefaultLoadingComponent } from './defaults/LoadingComponent/index.js';
 import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder.js';
 import { DefaultNoDataComponent } from './defaults/NoDataComponent/index.js';
 import { useA11y } from './hooks/useA11y.js';
+import { useAutoResize } from './hooks/useAutoResize.js';
 import { useColumnDragAndDrop } from './hooks/useDragAndDrop.js';
 import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths.js';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
@@ -248,6 +249,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     useResizeColumns,
     useResizeColumnsConfig,
     useRowSelectionColumn,
+    useAutoResize,
     useSingleRowStateSelection,
     useSelectionChangeCallback,
     useRowHighlight,
@@ -656,70 +658,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     );
   };
 
-  const handleOnAutoResize = (e, accessor) => {
-    // Helpers
-    interface canvasHolderProps {
-      canvas?: HTMLCanvasElement;
-    }
-    const canvasHolder: canvasHolderProps = { canvas: undefined };
-    // Text Width Analysis
-    function getTextWidth(text: string, font: string) {
-      // Reusing the canvas is more efficient
-      const canvas = canvasHolder.canvas || (canvasHolder.canvas = document.createElement('canvas'));
-      const context = canvas.getContext('2d');
-      context.font = font;
-      const metrics = context.measureText(text);
-      return metrics.width;
-    }
-
-    function getCssStyle(element: Element, prop: string) {
-      return window.getComputedStyle(element, null).getPropertyValue(prop);
-    }
-
-    function getCanvasFont(el: Element = document.body) {
-      const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
-      const fontSize = getCssStyle(el, 'font-size') || '12px';
-      const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
-
-      return `${fontWeight} ${fontSize} ${fontFamily}`;
-    }
-
-    const findWidth = (text: string, el: Element) => {
-      let font: string | undefined;
-      if (!font) font = getCanvasFont(el);
-      return getTextWidth(text, font);
-    };
-    // End Helpers
-    let largest = 0;
-    // Currently Including Overscan
-    const items = rowVirtualizer.getVirtualItems();
-    const [start, end] = [items[0].index, items[items.length - 1].index];
-
-    for (let i = start; i < end; i++) {
-      // Use the classname for the span where the text lives AnalyticalTable.module.css.js
-      const collection = document.getElementsByClassName(clsx(classNames.tableText));
-      const current = findWidth(rows[i].values[accessor], collection[0]);
-      largest = current > largest ? current : largest;
-    }
-    // Assign padding
-    largest = Math.ceil(largest + 20);
-    // Smallest column allowed is 60px
-    largest = largest < 60 ? 60 : largest;
-    onAutoResize(
-      enrichEventWithDetails(e, {
-        accessor,
-        width: largest
-      })
-    );
-    if (e.defaultPrevented) {
-      return;
-    }
-    dispatch({
-      type: 'DOUBLE_CLICK_RESIZE',
-      payload: { [accessor]: largest }
-    });
-  };
-
   const measureElement = (el: HTMLElement) => {
     return el.offsetHeight;
   };
@@ -821,9 +759,12 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     isRtl={isRtl}
                     portalContainer={portalContainer}
                     columnVirtualizer={columnVirtualizer}
+                    isTreeTable={isTreeTable}
+                    rowVirtualizer={rowVirtualizer}
                     uniqueId={uniqueId}
                     showVerticalEndBorder={showVerticalEndBorder}
-                    onAutoResize={handleOnAutoResize}
+                    onAutoResize={onAutoResize}
+                    groupBy={groupBy}
                   />
                 )
               );
diff --git a/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
index 57f35ac2ea0..25b28c3ce1e 100644
--- a/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
+++ b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts
@@ -67,7 +67,7 @@ export const stateReducer = (state, action, _prevState, instance) => {
     // fallback if the component wasn't ready yet for scrolling (elements are not initialized), e.g. when calling `.scrollToItem` on mount
     case 'TRIGGER_PROG_SCROLL':
       return { ...state, triggerScroll: payload };
-    case 'DOUBLE_CLICK_RESIZE':
+    case 'AUTO_RESIZE':
       return {
         ...state,
         columnResizing: {
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index b79f5ee86fc..e04f5eb69a7 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -261,6 +261,7 @@ export interface AnalyticalTableColumnDefinition {
    * Defines whether double clicking a columns data-resizer will automatically resize the column.
    *
    * Available on text columns
+   * Disabled if isTreeTable is true or groupBy is used
    */
   autoResizable?: boolean;
   // ui5 web components react properties

From 3142f0fa39f5b429e29b6b16a6eefc72456a689c Mon Sep 17 00:00:00 2001
From: Papa-Santo <165276313+Papa-Santo@users.noreply.github.com>
Date: Thu, 16 May 2024 23:07:07 -0400
Subject: [PATCH 3/8] autoResizable supports all element types and all table
 types

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    | 18 +++-
 .../ColumnHeader/ColumnHeaderContainer.tsx    | 13 +--
 .../defaults/Column/Expandable.tsx            |  7 +-
 .../AnalyticalTable/hooks/useAutoResize.tsx   | 88 ++++++-------------
 .../AnalyticalTable/hooks/useStyling.ts       |  3 +-
 .../src/components/AnalyticalTable/index.tsx  |  2 +-
 .../components/AnalyticalTable/types/index.ts |  1 -
 7 files changed, 55 insertions(+), 77 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index f1e3a30ff0a..3142880226d 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -250,14 +250,14 @@ describe('AnalyticalTable', () => {
     });
 
     cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} onAutoResize={(e) => e.preventDefault()} />);
-    cy.wait(200);
+    cy.wait(100);
     cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 476);
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
     cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 476);
 
     cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
-    cy.wait(200);
+    cy.wait(100);
     cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
@@ -291,7 +291,7 @@ describe('AnalyticalTable', () => {
     });
 
     cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
-    cy.wait(200);
+    cy.wait(100);
     cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 472.75);
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
@@ -311,11 +311,21 @@ describe('AnalyticalTable', () => {
     };
 
     cy.mount(<AnalyticalTable data={dataSub} columns={resizeColumns} renderRowSubComponent={renderRowSubComponent} />);
-    cy.wait(200);
+    cy.wait(100);
     cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
     cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
     cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 165);
+
+    const dataResizeTree = [...dataTree];
+    dataResizeTree[0].subRows[0].name = 'Longer Name To Resize Here';
+    cy.mount(<AnalyticalTable columns={resizeColumns} data={dataResizeTree} isTreeTable />);
+    cy.wait(100);
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 169);
+    cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 251);
   });
 
   it('scrollTo', () => {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
index 7f1cd7faeb7..b8f516ff79c 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -20,7 +20,7 @@ interface ColumnHeaderContainerProps {
   isTreeTable: boolean;
   rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
   onAutoResize: (e?: CustomEvent<{ accessor: string; width: number }>) => void;
-  groupBy: string[];
+  grouped: boolean;
 }
 
 export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
@@ -38,7 +38,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     onAutoResize,
     rowVirtualizer,
     isTreeTable,
-    groupBy
+    grouped
   } = props;
 
   useStylesheet(styleData, 'Resizer');
@@ -77,10 +77,11 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
                 className={classNames.resizer}
                 style={resizerDirectionStyle}
                 onDoubleClick={(e) => {
-                  if (column.autoResizable && !isTreeTable && !groupBy.length) {
-                    const items = rowVirtualizer.getVirtualItems();
-                    const [start, end] = [items[0].index, items[items.length - 1].index];
-                    column.getResizerProps().onDoubleClick(e, start, end, rest.id, onAutoResize);
+                  if (column.autoResizable) {
+                    const { startIndex, endIndex } = rowVirtualizer.range;
+                    column
+                      .getResizerProps()
+                      .onDoubleClick(e, startIndex, endIndex, rest.id, onAutoResize, isTreeTable, grouped);
                   }
                 }}
               />
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
index 0cb97c8ce1d..9edbd2a3f37 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -1,6 +1,6 @@
 import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
-import { CssSizeVariables, useCurrentTheme, useStylesheet, useIsomorphicId } from '@ui5/webcomponents-react-base';
+import { CssSizeVariables, useCurrentTheme, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React from 'react';
 import { ButtonDesign } from '../../../../enums/index.js';
@@ -24,7 +24,7 @@ const getPadding = (level) => {
 
 export const Expandable = (props) => {
   const { cell, row, column, visibleColumns: columns, webComponentsReactProperties } = props;
-  const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts, uniqueId } = webComponentsReactProperties;
+  const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts } = webComponentsReactProperties;
   const currentTheme = useCurrentTheme();
   useStylesheet(styleData, Expandable.displayName);
   const shouldRenderButton = currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark';
@@ -41,8 +41,6 @@ export const Expandable = (props) => {
   const subComponentExpandable =
     typeof renderRowSubComponent === 'function' && !!renderRowSubComponent(row) && !alwaysShowSubComponent;
 
-  const expandId = useIsomorphicId();
-
   return (
     <>
       {columnIndex === 0 && (
@@ -55,7 +53,6 @@ export const Expandable = (props) => {
               className={classNames.container}
               aria-expanded={row.isExpanded}
               aria-label={row.isExpanded ? translatableTexts.collapseA11yText : translatableTexts.expandA11yText}
-              id={`scaleModeHelperExpand-${uniqueId}-${expandId}`}
             >
               {shouldRenderButton ? (
                 <Button
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
index 850265dbf9c..e11bfb3096e 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -6,37 +6,12 @@ import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 const handleAutoResize = (props, { instance }) => {
   return {
     ...props,
-    onDoubleClick: (e, start, end, accessor, onAutoResize) => {
-      // Find first in column to compare to accessor
-      let columnFirst;
-      const { columnOrder } = instance.state;
-      let colOrder = [];
-      if (columnOrder.length) {
-        colOrder = columnOrder.filter(
-          (col) =>
-            col !== '__ui5wcr__internal_selection_column' &&
-            col !== '__ui5wcr__internal_highlight_column' &&
-            col !== '__ui5wcr__internal_navigation_column'
-        );
-        columnFirst = colOrder[0];
-      }
-      if (!columnFirst) {
-        colOrder = instance.visibleColumns?.filter(
-          (col) =>
-            col.id !== '__ui5wcr__internal_selection_column' &&
-            col.id !== '__ui5wcr__internal_highlight_column' &&
-            col.id !== '__ui5wcr__internal_navigation_column'
-        );
-        columnFirst = colOrder[0].id;
-      }
-
-      // Undefined accessor should not occur but checking to be safe
-      columnFirst = columnFirst ? columnFirst === accessor : false;
-
-      const rows = instance.rows;
+    onDoubleClick: (e, start, end, accessor, onAutoResize, isTreeTable, grouped) => {
+      if (!instance.rows.length) return;
       const dispatch = instance.dispatch;
-      const rowSlice = rows.slice(start, end);
-      let largest = getContentPxMax(rowSlice, accessor, instance?.webComponentsReactProperties.uniqueId, columnFirst);
+      let rowSlice = instance.rows.slice(start, end + 1);
+      if (isTreeTable || grouped) rowSlice = getExpandedRowsRecursive(rowSlice);
+      let largest = getMeasureMax(rowSlice, accessor, instance.webComponentsReactProperties.uniqueId);
       largest = largest > DEFAULT_COLUMN_WIDTH ? largest : DEFAULT_COLUMN_WIDTH;
       onAutoResize(
         enrichEventWithDetails(e, {
@@ -55,41 +30,36 @@ const handleAutoResize = (props, { instance }) => {
   };
 };
 
-function getContentPxMax(rowSlice, accessor, uniqueId, isFirstColumn) {
-  let high = 0,
-    current,
-    ruler,
-    expand,
-    expandPx = 0,
-    style,
-    margin = 0;
-
-  // Check for Expandable Row
-  // If found in range: All rows treated as expandable
-  if (isFirstColumn) {
-    expand = document.querySelector(`[id^="scaleModeHelperExpand-${uniqueId}"]`);
-    if (expand) {
-      style = getComputedStyle(expand, null);
-      margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      margin = margin > 0 ? margin : 0;
+const getMeasureMax = (rowSlice, accessor, uniqueId) => {
+  let maxWidth = 0;
+  for (let i = 0; i < rowSlice.length; i++) {
+    const element = document.getElementById(`cell_${rowSlice[i].id}_${accessor}-${uniqueId}`);
+    let currWidth = 0;
+    const children = element.children;
+    for (let j = 0; j < children.length; j++) {
+      const computedStyle = getComputedStyle(children[j]);
+      currWidth += children[j].scrollWidth;
+      currWidth += parseFloat(computedStyle.marginLeft) + parseFloat(computedStyle.marginRight);
+      currWidth += parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
     }
-    console.log(margin);
-    expandPx = expand ? expand.offsetWidth + margin : 0 + margin;
+    currWidth = currWidth + CELL_PADDING_PX;
+    maxWidth = maxWidth > currWidth ? maxWidth : currWidth;
   }
+  return Math.ceil(maxWidth);
+};
 
+const getExpandedRowsRecursive = (rowSlice, allRows = []) => {
+  if (!rowSlice.length) return allRows;
+  allRows = [...allRows, ...rowSlice];
+  const nextRows = [];
+  // Iterate to find expanded rows then call recursively
   for (let i = 0; i < rowSlice.length; i++) {
-    const dataPoint = rowSlice[i]?.values?.[accessor];
-    if (dataPoint) {
-      ruler = ruler ? ruler : document.getElementById(`scaleModeHelper-${uniqueId}`);
-      if (ruler) {
-        ruler.innerHTML = `${dataPoint}`;
-        current = ruler.scrollWidth + CELL_PADDING_PX + expandPx;
-      } else current = 0;
-      high = high > current ? high : current;
+    if (rowSlice[i].isExpanded) {
+      nextRows.push(...rowSlice[i].subRows);
     }
   }
-  return high ?? 0;
-}
+  return getExpandedRowsRecursive(nextRows, allRows);
+};
 
 export const useAutoResize = (hooks: ReactTableHooks) => {
   hooks.getResizerProps.push(handleAutoResize);
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
index 08daab4a977..bfbc7ee61dd 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
@@ -102,7 +102,8 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
     {
       className,
       style,
-      tabIndex: -1
+      tabIndex: -1,
+      id: `${cellProps.key}-${instance?.webComponentsReactProperties.uniqueId}`
     }
   ];
 };
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 29e3dbcf1fa..01321515110 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -764,7 +764,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     uniqueId={uniqueId}
                     showVerticalEndBorder={showVerticalEndBorder}
                     onAutoResize={onAutoResize}
-                    groupBy={groupBy}
+                    grouped={groupBy.length > 0}
                   />
                 )
               );
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index e04f5eb69a7..609116b6f79 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -260,7 +260,6 @@ export interface AnalyticalTableColumnDefinition {
   /**
    * Defines whether double clicking a columns data-resizer will automatically resize the column.
    *
-   * Available on text columns
    * Disabled if isTreeTable is true or groupBy is used
    */
   autoResizable?: boolean;

From c8e19dd367290093f8e04482fe23cc67e695bb49 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 17 May 2024 17:11:24 +0200
Subject: [PATCH 4/8] refactor: encapsulate logic in hook, support rtl, improve
 performance

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    | 75 ++++++++++++++-----
 .../ColumnHeader/ColumnHeaderContainer.tsx    | 20 +----
 .../TableBody/VirtualTableBody.tsx            |  5 +-
 .../AnalyticalTable/defaults/Column/Cell.tsx  |  4 +-
 .../AnalyticalTable/hooks/useAutoResize.tsx   | 69 +++++++++--------
 .../src/components/AnalyticalTable/index.tsx  | 17 +++--
 .../components/AnalyticalTable/types/index.ts |  4 +-
 7 files changed, 110 insertions(+), 84 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 3142880226d..b20c3210bbc 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -249,19 +249,38 @@ describe('AnalyticalTable', () => {
       return el;
     });
 
-    cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} onAutoResize={(e) => e.preventDefault()} />);
+    const resizeSpy = cy.spy().as('resize');
+
+    cy.mount(
+      <AnalyticalTable
+        data={dataFixed}
+        columns={resizeColumns}
+        onAutoResize={(e) => {
+          resizeSpy(e);
+          e.preventDefault();
+        }}
+      />
+    );
     cy.wait(100);
-    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+
+    cy.get('[data-component-name="AnalyticalTableResizer"]').eq(0).as('resizer1');
+    cy.get('[data-component-name="AnalyticalTableResizer"]').eq(1).as('resizer2');
+
+    cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 476);
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('@resizer1').should('be.visible').dblclick();
     cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 476);
 
-    cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
+    cy.get('@resize').should('have.callCount', 2);
+
+    cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} onAutoResize={resizeSpy} />);
     cy.wait(100);
-    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 127);
+    cy.get('@resizer1').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 135);
+
+    cy.get('@resize').should('have.callCount', 4);
 
     dataFixed = generateMoreData(200);
 
@@ -279,12 +298,15 @@ describe('AnalyticalTable', () => {
         onLoadMore={loadMore}
         infiniteScroll={true}
         infiniteScrollThreshold={0}
+        onAutoResize={resizeSpy}
       />
     );
 
     cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 91);
+    cy.get('@resizer1').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 99);
+
+    cy.get('@resize').should('have.callCount', 5);
 
     resizeColumns = columns.map((el) => {
       return { ...el, autoResizable: false };
@@ -292,11 +314,13 @@ describe('AnalyticalTable', () => {
 
     cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
     cy.wait(100);
-    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 472.75);
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
+    cy.get('@resizer1').should('be.visible').dblclick();
     cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 472.75);
 
+    cy.get('@resize').should('have.callCount', 5);
+
     const dataSub = data.map((el, i) => {
       if (i === 2) return { ...el, name: 'Longer Name Too' };
       return el;
@@ -310,22 +334,33 @@ describe('AnalyticalTable', () => {
       return <div title="subcomponent">SubComponent</div>;
     };
 
-    cy.mount(<AnalyticalTable data={dataSub} columns={resizeColumns} renderRowSubComponent={renderRowSubComponent} />);
+    cy.mount(
+      <AnalyticalTable
+        data={dataSub}
+        columns={resizeColumns}
+        renderRowSubComponent={renderRowSubComponent}
+        onAutoResize={resizeSpy}
+      />
+    );
     cy.wait(100);
-    cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
+    cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 165);
+    cy.get('@resizer1').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 173);
+
+    cy.get('@resize').should('have.callCount', 7);
 
     const dataResizeTree = [...dataTree];
     dataResizeTree[0].subRows[0].name = 'Longer Name To Resize Here';
-    cy.mount(<AnalyticalTable columns={resizeColumns} data={dataResizeTree} isTreeTable />);
+    cy.mount(<AnalyticalTable columns={resizeColumns} data={dataResizeTree} isTreeTable onAutoResize={resizeSpy} />);
     cy.wait(100);
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 169);
+    cy.get('@resizer1').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 177);
     cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
-    cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 251);
+    cy.get('@resizer1').should('be.visible').dblclick();
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 259);
+
+    cy.get('@resize').should('have.callCount', 9);
   });
 
   it('scrollTo', () => {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
index b8f516ff79c..4606dd3d4f3 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -17,10 +17,6 @@ interface ColumnHeaderContainerProps {
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   uniqueId: string;
   showVerticalEndBorder: boolean;
-  isTreeTable: boolean;
-  rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
-  onAutoResize: (e?: CustomEvent<{ accessor: string; width: number }>) => void;
-  grouped: boolean;
 }
 
 export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
@@ -34,11 +30,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     portalContainer,
     columnVirtualizer,
     uniqueId,
-    showVerticalEndBorder,
-    onAutoResize,
-    rowVirtualizer,
-    isTreeTable,
-    grouped
+    showVerticalEndBorder
   } = props;
 
   useStylesheet(styleData, 'Resizer');
@@ -73,17 +65,9 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
               <div
                 {...column.getResizerProps()}
                 data-resizer
-                data-cy={`data-resizer-${index}`}
+                data-component-name="AnalyticalTableResizer"
                 className={classNames.resizer}
                 style={resizerDirectionStyle}
-                onDoubleClick={(e) => {
-                  if (column.autoResizable) {
-                    const { startIndex, endIndex } = rowVirtualizer.range;
-                    column
-                      .getResizerProps()
-                      .onDoubleClick(e, startIndex, endIndex, rest.id, onAutoResize, isTreeTable, grouped);
-                  }
-                }}
               />
             )}
             <ColumnHeader
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
index 9e7e53061d0..348739c4ad7 100644
--- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -36,6 +36,7 @@ interface VirtualTableBodyProps {
   triggerScroll?: TriggerScrollState;
   scrollToRef: MutableRefObject<ScrollToRefType>;
   rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
+  uniqueId: string;
 }
 
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
@@ -61,7 +62,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     scrollContainerRef,
     subComponentsBehavior,
     triggerScroll,
-    rowVirtualizer
+    rowVirtualizer,
+    uniqueId
   } = props;
 
   const rowHeight = popInRowHeight !== internalRowHeight ? popInRowHeight : internalRowHeight;
@@ -97,6 +99,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     <div
       ref={scrollContainerRef}
       data-component-name="AnalyticalTableBodyScrollableContainer"
+      data-react-id={uniqueId}
       style={{
         position: 'relative',
         height: `${rowVirtualizer.getTotalSize()}px`,
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
index b5158dfa417..bfc0a968cd1 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-export const Cell = ({ cell: { value = '', isGrouped }, row, webComponentsReactProperties }) => {
+export const Cell = ({ cell: { value = '', isGrouped }, column, row, webComponentsReactProperties }) => {
   let cellContent = `${value ?? ''}`;
   if (isGrouped) {
     cellContent += ` (${row.subRows.length})`;
   }
   return (
-    <span title={cellContent} className={webComponentsReactProperties.classes.tableText}>
+    <span title={cellContent} className={webComponentsReactProperties.classes.tableText} data-id={column.id}>
       {cellContent}
     </span>
   );
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
index e11bfb3096e..0815eed7419 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -3,15 +3,20 @@ import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
 import type { ReactTableHooks } from '../types/index.js';
 import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 
-const handleAutoResize = (props, { instance }) => {
+function setResizerProps(...params) {
+  const [props, { instance, header }] = params;
+  const { dispatch, virtualRowsRange, rows, webComponentsReactProperties, state } = instance;
+  const { uniqueId, onAutoResize } = webComponentsReactProperties;
+  const { autoResizable, id: accessor } = header;
+
+  if (!document || !autoResizable || !rows.length || !virtualRowsRange) {
+    return props;
+  }
+
   return {
     ...props,
-    onDoubleClick: (e, start, end, accessor, onAutoResize, isTreeTable, grouped) => {
-      if (!instance.rows.length) return;
-      const dispatch = instance.dispatch;
-      let rowSlice = instance.rows.slice(start, end + 1);
-      if (isTreeTable || grouped) rowSlice = getExpandedRowsRecursive(rowSlice);
-      let largest = getMeasureMax(rowSlice, accessor, instance.webComponentsReactProperties.uniqueId);
+    onDoubleClick: (e) => {
+      let largest = getMeasureMax(accessor, uniqueId, virtualRowsRange, state.isRtl);
       largest = largest > DEFAULT_COLUMN_WIDTH ? largest : DEFAULT_COLUMN_WIDTH;
       onAutoResize(
         enrichEventWithDetails(e, {
@@ -28,41 +33,39 @@ const handleAutoResize = (props, { instance }) => {
       });
     }
   };
-};
+}
 
-const getMeasureMax = (rowSlice, accessor, uniqueId) => {
+function getMeasureMax(accessor, uniqueId, virtualRowsRange, isRtl) {
   let maxWidth = 0;
-  for (let i = 0; i < rowSlice.length; i++) {
-    const element = document.getElementById(`cell_${rowSlice[i].id}_${accessor}-${uniqueId}`);
+  const firstRowQuery = `[data-component-name="AnalyticalTableBodyScrollableContainer"][data-react-id="${uniqueId}"] [data-virtual-row-index="${virtualRowsRange.startIndex}"]`;
+  const rowsDOM = document.querySelectorAll(`${firstRowQuery}, ${firstRowQuery} ~ [data-virtual-row-index]`);
+  const start = virtualRowsRange.startIndex;
+  const end = virtualRowsRange.endIndex;
+
+  for (let i = 0; i <= end - start; i++) {
+    const cellTextElement: HTMLSpanElement = rowsDOM[i]?.querySelector(`[data-id="${accessor}"]`);
     let currWidth = 0;
-    const children = element.children;
-    for (let j = 0; j < children.length; j++) {
-      const computedStyle = getComputedStyle(children[j]);
-      currWidth += children[j].scrollWidth;
-      currWidth += parseFloat(computedStyle.marginLeft) + parseFloat(computedStyle.marginRight);
-      currWidth += parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
+    if (!cellTextElement) {
+      continue;
     }
-    currWidth = currWidth + CELL_PADDING_PX;
+    const computedStyle = getComputedStyle(cellTextElement);
+    currWidth += cellTextElement.scrollWidth;
+    // cannot use `offsetLeft` for RTL direction
+    currWidth += !isRtl
+      ? cellTextElement.offsetLeft
+      : cellTextElement.parentElement.getBoundingClientRect().right - cellTextElement.getBoundingClientRect().right;
+    currWidth += parseFloat(computedStyle.marginInlineEnd);
+    currWidth += parseFloat(computedStyle.borderInlineEndWidth);
+    currWidth += CELL_PADDING_PX;
+
     maxWidth = maxWidth > currWidth ? maxWidth : currWidth;
   }
-  return Math.ceil(maxWidth);
-};
 
-const getExpandedRowsRecursive = (rowSlice, allRows = []) => {
-  if (!rowSlice.length) return allRows;
-  allRows = [...allRows, ...rowSlice];
-  const nextRows = [];
-  // Iterate to find expanded rows then call recursively
-  for (let i = 0; i < rowSlice.length; i++) {
-    if (rowSlice[i].isExpanded) {
-      nextRows.push(...rowSlice[i].subRows);
-    }
-  }
-  return getExpandedRowsRecursive(nextRows, allRows);
-};
+  return Math.ceil(maxWidth);
+}
 
 export const useAutoResize = (hooks: ReactTableHooks) => {
-  hooks.getResizerProps.push(handleAutoResize);
+  hooks.getResizerProps.push(setResizerProps);
 };
 
 useAutoResize.pluginName = 'useAutoResize';
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 01321515110..59e9f1bed1e 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -92,6 +92,11 @@ import { VerticalResizer } from './VerticalResizer.js';
 const sortTypesFallback = {
   undefined: () => undefined
 };
+
+const measureElement = (el: HTMLElement) => {
+  return el.offsetHeight;
+};
+
 /**
  * The `AnalyticalTable` provides a set of convenient functions for responsive table design, including virtualization of rows and columns, infinite scrolling and customizable columns that will, unless otherwise defined, distribute the available space equally among themselves.
  * It also provides several possibilities for working with the data, including sorting, filtering, grouping and aggregation.
@@ -219,6 +224,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
         selectionMode,
         selectionBehavior,
         classes: classNames,
+        onAutoResize,
         onRowSelect: onRowSelect,
         onRowClick,
         onRowExpandChange,
@@ -658,10 +664,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     );
   };
 
-  const measureElement = (el: HTMLElement) => {
-    return el.offsetHeight;
-  };
-
   const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
   const rHeight = popInRowHeight !== internalRowHeight ? popInRowHeight : internalRowHeight;
 
@@ -692,6 +694,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     measureElement,
     indexAttribute: 'data-virtual-row-index'
   });
+  // add range to instance for `useAutoResize` plugin hook
+  tableInstanceRef.current.virtualRowsRange = rowVirtualizer.range;
 
   return (
     <>
@@ -759,12 +763,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     isRtl={isRtl}
                     portalContainer={portalContainer}
                     columnVirtualizer={columnVirtualizer}
-                    isTreeTable={isTreeTable}
-                    rowVirtualizer={rowVirtualizer}
                     uniqueId={uniqueId}
                     showVerticalEndBorder={showVerticalEndBorder}
-                    onAutoResize={onAutoResize}
-                    grouped={groupBy.length > 0}
                   />
                 )
               );
@@ -820,6 +820,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                   subComponentsBehavior={subComponentsBehavior}
                   triggerScroll={tableState.triggerScroll}
                   rowVirtualizer={rowVirtualizer}
+                  uniqueId={uniqueId}
                 />
               </VirtualTableBodyContainer>
             )}
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index 609116b6f79..a81bb186eaf 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -258,9 +258,9 @@ export interface AnalyticalTableColumnDefinition {
    */
   disableResizing?: boolean;
   /**
-   * Defines whether double clicking a columns data-resizer will automatically resize the column.
+   * Defines whether double-clicking a columns resizer will automatically resize the column to fit the largest cell content of visible rows.
    *
-   * Disabled if isTreeTable is true or groupBy is used
+   * __Note:__ Only default text content is supported by this option.
    */
   autoResizable?: boolean;
   // ui5 web components react properties

From e65c73b4fdabafeff09a199268f9f24e9f067371 Mon Sep 17 00:00:00 2001
From: Papa-Santo <165276313+Papa-Santo@users.noreply.github.com>
Date: Sat, 18 May 2024 12:43:08 -0400
Subject: [PATCH 5/8] Adapted last commit to support custom cells. Fixed bug on
 age column

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    | 10 ++---
 .../AnalyticalTable/defaults/Column/Cell.tsx  |  4 +-
 .../AnalyticalTable/hooks/useAutoResize.tsx   | 45 ++++++++++++-------
 .../AnalyticalTable/hooks/useStyling.ts       |  2 +-
 4 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index b20c3210bbc..cb313400170 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -278,7 +278,7 @@ describe('AnalyticalTable', () => {
     cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 135);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 127);
 
     cy.get('@resize').should('have.callCount', 4);
 
@@ -304,7 +304,7 @@ describe('AnalyticalTable', () => {
 
     cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 99);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 91);
 
     cy.get('@resize').should('have.callCount', 5);
 
@@ -346,7 +346,7 @@ describe('AnalyticalTable', () => {
     cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 173);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 165);
 
     cy.get('@resize').should('have.callCount', 7);
 
@@ -355,10 +355,10 @@ describe('AnalyticalTable', () => {
     cy.mount(<AnalyticalTable columns={resizeColumns} data={dataResizeTree} isTreeTable onAutoResize={resizeSpy} />);
     cy.wait(100);
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 177);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 169);
     cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 259);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 251);
 
     cy.get('@resize').should('have.callCount', 9);
   });
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
index bfc0a968cd1..b5158dfa417 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-export const Cell = ({ cell: { value = '', isGrouped }, column, row, webComponentsReactProperties }) => {
+export const Cell = ({ cell: { value = '', isGrouped }, row, webComponentsReactProperties }) => {
   let cellContent = `${value ?? ''}`;
   if (isGrouped) {
     cellContent += ` (${row.subRows.length})`;
   }
   return (
-    <span title={cellContent} className={webComponentsReactProperties.classes.tableText} data-id={column.id}>
+    <span title={cellContent} className={webComponentsReactProperties.classes.tableText}>
       {cellContent}
     </span>
   );
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
index 0815eed7419..dfc7da60b58 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -5,7 +5,7 @@ import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 
 function setResizerProps(...params) {
   const [props, { instance, header }] = params;
-  const { dispatch, virtualRowsRange, rows, webComponentsReactProperties, state } = instance;
+  const { dispatch, virtualRowsRange, rows, webComponentsReactProperties } = instance;
   const { uniqueId, onAutoResize } = webComponentsReactProperties;
   const { autoResizable, id: accessor } = header;
 
@@ -16,7 +16,9 @@ function setResizerProps(...params) {
   return {
     ...props,
     onDoubleClick: (e) => {
-      let largest = getMeasureMax(accessor, uniqueId, virtualRowsRange, state.isRtl);
+      // isRtl not currently implemented
+      //  let largest = getMeasureMax(accessor, uniqueId, virtualRowsRange, state.isRtl);
+      let largest = getMeasureMax(accessor, uniqueId, virtualRowsRange);
       largest = largest > DEFAULT_COLUMN_WIDTH ? largest : DEFAULT_COLUMN_WIDTH;
       onAutoResize(
         enrichEventWithDetails(e, {
@@ -35,29 +37,40 @@ function setResizerProps(...params) {
   };
 }
 
-function getMeasureMax(accessor, uniqueId, virtualRowsRange, isRtl) {
+// Currently not implementing isRtl logic
+//function getMeasureMax(accessor, uniqueId, virtualRowsRange, isRtl) {
+function getMeasureMax(accessor, uniqueId, virtualRowsRange) {
   let maxWidth = 0;
-  const firstRowQuery = `[data-component-name="AnalyticalTableBodyScrollableContainer"][data-react-id="${uniqueId}"] [data-virtual-row-index="${virtualRowsRange.startIndex}"]`;
-  const rowsDOM = document.querySelectorAll(`${firstRowQuery}, ${firstRowQuery} ~ [data-virtual-row-index]`);
+  // We won't need to know it is the first row if we use this measuring method
+  const rowsDOM = document.querySelectorAll(
+    `[data-component-name="AnalyticalTableBodyScrollableContainer"][data-react-id="${uniqueId}"]`
+  );
+  const elements = rowsDOM[0].querySelectorAll(`[dataid="${accessor}"]`);
   const start = virtualRowsRange.startIndex;
   const end = virtualRowsRange.endIndex;
 
   for (let i = 0; i <= end - start; i++) {
-    const cellTextElement: HTMLSpanElement = rowsDOM[i]?.querySelector(`[data-id="${accessor}"]`);
+    // Column based dataids give us the cell
+    // This is an attempt to support other types rather than only text
+    const element = elements[i];
     let currWidth = 0;
-    if (!cellTextElement) {
+    if (!element) {
       continue;
     }
-    const computedStyle = getComputedStyle(cellTextElement);
-    currWidth += cellTextElement.scrollWidth;
-    // cannot use `offsetLeft` for RTL direction
-    currWidth += !isRtl
-      ? cellTextElement.offsetLeft
-      : cellTextElement.parentElement.getBoundingClientRect().right - cellTextElement.getBoundingClientRect().right;
-    currWidth += parseFloat(computedStyle.marginInlineEnd);
-    currWidth += parseFloat(computedStyle.borderInlineEndWidth);
-    currWidth += CELL_PADDING_PX;
 
+    // This inner loop is not ideal, but the number of
+    // children of a cell should be low.
+
+    // I do not know how this should be adapted for isRtl
+    // But, I can look into isRtl if we prefer this type of measuring
+    const children = element.children;
+    for (let j = 0; j < children.length; j++) {
+      const computedStyle = getComputedStyle(children[j]);
+      currWidth += children[j].scrollWidth;
+      currWidth += parseFloat(computedStyle.marginLeft) + parseFloat(computedStyle.marginRight);
+      currWidth += parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
+    }
+    currWidth = currWidth + CELL_PADDING_PX;
     maxWidth = maxWidth > currWidth ? maxWidth : currWidth;
   }
 
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
index bfbc7ee61dd..1b49ea05e8e 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
@@ -103,7 +103,7 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
       className,
       style,
       tabIndex: -1,
-      id: `${cellProps.key}-${instance?.webComponentsReactProperties.uniqueId}`
+      dataid: column.id
     }
   ];
 };

From 51e72cc541913046b2ac6719a262234fa5725cca Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 22 May 2024 15:29:41 +0200
Subject: [PATCH 6/8] measure cell content `dir` agnostic, types, comments,
 cleanup

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    |   4 +-
 .../TableBody/VirtualTableBody.tsx            |   5 +-
 .../AnalyticalTable/defaults/Column/Cell.tsx  |   8 +-
 .../AnalyticalTable/hooks/useAutoResize.tsx   | 108 +++++++++++-------
 .../AnalyticalTable/hooks/useStyling.ts       |   3 +-
 .../src/components/AnalyticalTable/index.tsx  |   4 +-
 .../components/AnalyticalTable/types/index.ts |  12 +-
 7 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index cb313400170..c19d177261e 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -278,7 +278,7 @@ describe('AnalyticalTable', () => {
     cy.get('@resizer2').should('be.visible').dblclick();
     cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 127);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 129);
 
     cy.get('@resize').should('have.callCount', 4);
 
@@ -304,7 +304,7 @@ describe('AnalyticalTable', () => {
 
     cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
     cy.get('@resizer1').should('be.visible').dblclick();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 91);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 93);
 
     cy.get('@resize').should('have.callCount', 5);
 
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
index 348739c4ad7..9e7e53061d0 100644
--- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -36,7 +36,6 @@ interface VirtualTableBodyProps {
   triggerScroll?: TriggerScrollState;
   scrollToRef: MutableRefObject<ScrollToRefType>;
   rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
-  uniqueId: string;
 }
 
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
@@ -62,8 +61,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     scrollContainerRef,
     subComponentsBehavior,
     triggerScroll,
-    rowVirtualizer,
-    uniqueId
+    rowVirtualizer
   } = props;
 
   const rowHeight = popInRowHeight !== internalRowHeight ? popInRowHeight : internalRowHeight;
@@ -99,7 +97,6 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     <div
       ref={scrollContainerRef}
       data-component-name="AnalyticalTableBodyScrollableContainer"
-      data-react-id={uniqueId}
       style={{
         position: 'relative',
         height: `${rowVirtualizer.getTotalSize()}px`,
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
index b5158dfa417..254e5a9aea8 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 
-export const Cell = ({ cell: { value = '', isGrouped }, row, webComponentsReactProperties }) => {
+export const Cell = ({ cell: { value = '', isGrouped }, column, row, webComponentsReactProperties }) => {
   let cellContent = `${value ?? ''}`;
   if (isGrouped) {
     cellContent += ` (${row.subRows.length})`;
   }
   return (
-    <span title={cellContent} className={webComponentsReactProperties.classes.tableText}>
+    <span
+      title={cellContent}
+      className={webComponentsReactProperties.classes.tableText}
+      data-column-id-cell-text={column.id}
+    >
       {cellContent}
     </span>
   );
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
index dfc7da60b58..cf67722ae70 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -3,29 +3,31 @@ import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
 import type { ReactTableHooks } from '../types/index.js';
 import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 
-function setResizerProps(...params) {
-  const [props, { instance, header }] = params;
+function setResizerProps(props, { instance, header }) {
   const { dispatch, virtualRowsRange, rows, webComponentsReactProperties } = instance;
-  const { uniqueId, onAutoResize } = webComponentsReactProperties;
+  const { onAutoResize, tableRef } = webComponentsReactProperties;
   const { autoResizable, id: accessor } = header;
 
-  if (!document || !autoResizable || !rows.length || !virtualRowsRange) {
+  if (!document || !tableRef.current || !autoResizable || !rows.length || !virtualRowsRange) {
     return props;
   }
 
   return {
     ...props,
     onDoubleClick: (e) => {
-      // isRtl not currently implemented
-      //  let largest = getMeasureMax(accessor, uniqueId, virtualRowsRange, state.isRtl);
-      let largest = getMeasureMax(accessor, uniqueId, virtualRowsRange);
+      let largest = getMeasureMax(accessor, virtualRowsRange, tableRef.current);
+      if (largest === -1) {
+        return;
+      }
       largest = largest > DEFAULT_COLUMN_WIDTH ? largest : DEFAULT_COLUMN_WIDTH;
-      onAutoResize(
-        enrichEventWithDetails(e, {
-          accessor,
-          width: largest
-        })
-      );
+      if (typeof onAutoResize === 'function') {
+        onAutoResize(
+          enrichEventWithDetails(e, {
+            columnId: accessor,
+            width: largest
+          })
+        );
+      }
       if (e.defaultPrevented) {
         return;
       }
@@ -37,48 +39,66 @@ function setResizerProps(...params) {
   };
 }
 
-// Currently not implementing isRtl logic
-//function getMeasureMax(accessor, uniqueId, virtualRowsRange, isRtl) {
-function getMeasureMax(accessor, uniqueId, virtualRowsRange) {
+function getMeasureMax(accessor, virtualRowsRange, tableNode): number {
   let maxWidth = 0;
-  // We won't need to know it is the first row if we use this measuring method
-  const rowsDOM = document.querySelectorAll(
-    `[data-component-name="AnalyticalTableBodyScrollableContainer"][data-react-id="${uniqueId}"]`
-  );
-  const elements = rowsDOM[0].querySelectorAll(`[dataid="${accessor}"]`);
-  const start = virtualRowsRange.startIndex;
-  const end = virtualRowsRange.endIndex;
+  let cellWithMaxWidthContent = null;
 
-  for (let i = 0; i <= end - start; i++) {
-    // Column based dataids give us the cell
-    // This is an attempt to support other types rather than only text
-    const element = elements[i];
-    let currWidth = 0;
-    if (!element) {
-      continue;
+  /**
+   * recursively find the largest visible cell of the current column
+   */
+  function recursiveFindMaxWidth(row, accessor, remainingRows) {
+    if (!row || remainingRows === 0) {
+      return;
     }
+    const cellNode = row.querySelector(`[data-column-id-cell="${accessor}"]`);
+    const cellTextElement = cellNode.querySelector(`[data-column-id-cell-text="${accessor}"]`);
 
-    // This inner loop is not ideal, but the number of
-    // children of a cell should be low.
-
-    // I do not know how this should be adapted for isRtl
-    // But, I can look into isRtl if we prefer this type of measuring
-    const children = element.children;
-    for (let j = 0; j < children.length; j++) {
-      const computedStyle = getComputedStyle(children[j]);
-      currWidth += children[j].scrollWidth;
-      currWidth += parseFloat(computedStyle.marginLeft) + parseFloat(computedStyle.marginRight);
-      currWidth += parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
+    if (cellTextElement) {
+      const currWidth = cellTextElement.scrollWidth;
+      if (maxWidth < currWidth) {
+        maxWidth = currWidth;
+        // only use the cell with the largest content for measuring
+        cellWithMaxWidthContent = cellNode;
+      }
+    }
+    // if custom content (`Cell`) is rendered, the `cellTextElement` is not available.
+    // In this case only the content of the first visible cell is used for measuring
+    if (cellWithMaxWidthContent === null) {
+      cellWithMaxWidthContent = cellNode;
     }
-    currWidth = currWidth + CELL_PADDING_PX;
-    maxWidth = maxWidth > currWidth ? maxWidth : currWidth;
+
+    recursiveFindMaxWidth(row.nextElementSibling, accessor, remainingRows - 1);
   }
 
-  return Math.ceil(maxWidth);
+  const firstRow = tableNode.querySelector(`[data-virtual-row-index="${virtualRowsRange.startIndex}"]`);
+  recursiveFindMaxWidth(firstRow, accessor, virtualRowsRange.endIndex - virtualRowsRange.startIndex);
+
+  if (!cellWithMaxWidthContent) {
+    return -1;
+  }
+
+  let contentWidth = 0;
+  Array.from<HTMLElement>(cellWithMaxWidthContent.children).forEach((child) => {
+    contentWidth += child.scrollWidth;
+  });
+
+  return Math.ceil(contentWidth + CELL_PADDING_PX + 2 /* account for rounding error and border */);
 }
 
+const setCellProps = (
+  props,
+  {
+    cell: {
+      column: { id }
+    }
+  }
+) => {
+  return [props, { ['data-column-id-cell']: id }];
+};
+
 export const useAutoResize = (hooks: ReactTableHooks) => {
   hooks.getResizerProps.push(setResizerProps);
+  hooks.getCellProps.push(setCellProps);
 };
 
 useAutoResize.pluginName = 'useAutoResize';
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
index 1b49ea05e8e..08daab4a977 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
@@ -102,8 +102,7 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
     {
       className,
       style,
-      tabIndex: -1,
-      dataid: column.id
+      tabIndex: -1
     }
   ];
 };
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 59e9f1bed1e..68476ea9957 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -820,7 +820,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                   subComponentsBehavior={subComponentsBehavior}
                   triggerScroll={tableState.triggerScroll}
                   rowVirtualizer={rowVirtualizer}
-                  uniqueId={uniqueId}
                 />
               </VirtualTableBodyContainer>
             )}
@@ -902,8 +901,7 @@ AnalyticalTable.defaultProps = {
   isTreeTable: false,
   alternateRowColor: false,
   overscanCountHorizontal: 5,
-  visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed,
-  onAutoResize: () => {}
+  visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed
 };
 
 export { AnalyticalTable };
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index a81bb186eaf..ef0b801484e 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -260,7 +260,7 @@ export interface AnalyticalTableColumnDefinition {
   /**
    * Defines whether double-clicking a columns resizer will automatically resize the column to fit the largest cell content of visible rows.
    *
-   * __Note:__ Only default text content is supported by this option.
+   * __Note:__ Only default text content is supported by this option, for custom content it might work as well, but we recommend checking the behavior carefully as the logic can't account for all possible implementations.
    */
   autoResizable?: boolean;
   // ui5 web components react properties
@@ -343,6 +343,10 @@ export interface AnalyticalTableDomRef extends Omit<HTMLDivElement, 'scrollTo'>
 
 type HighlightColor = ValueState | keyof typeof ValueState | IndicationColor | keyof typeof IndicationColor;
 
+interface OnAutoResizeMouseEvent extends Omit<MouseEvent, 'detail'> {
+  detail: { columnId: string; width: number };
+}
+
 export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * Defines the columns array where you can define the configuration for each column.
@@ -682,9 +686,11 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    */
   onTableScroll?: (e?: CustomEvent<{ rows: Record<string, any>[]; rowElements: HTMLCollection }>) => void;
   /**
-   * Fired when the table is resized by double-clicking the data-resizer.
+   * Fired when the table is resized by double-clicking the Resizer.
+   *
+   * __Note:__ Auto-resize is only available on columns that have the `autoResizable` option set to `true`.
    */
-  onAutoResize?: (e?: CustomEvent<{ accessor: string; width: number }>) => void;
+  onAutoResize?: (e?: OnAutoResizeMouseEvent) => void;
   // default components
   /**
    * Component that will be rendered when the table is not loading and has no data.

From 0ed976b8a07513944125f7c12b6b9f66ad18a2d5 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 22 May 2024 16:04:08 +0200
Subject: [PATCH 7/8] support tree tables

---
 .../AnalyticalTable/hooks/useAutoResize.tsx   | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
index cf67722ae70..db5ebae8b85 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -5,7 +5,7 @@ import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 
 function setResizerProps(props, { instance, header }) {
   const { dispatch, virtualRowsRange, rows, webComponentsReactProperties } = instance;
-  const { onAutoResize, tableRef } = webComponentsReactProperties;
+  const { onAutoResize, tableRef, isTreeTable } = webComponentsReactProperties;
   const { autoResizable, id: accessor } = header;
 
   if (!document || !tableRef.current || !autoResizable || !rows.length || !virtualRowsRange) {
@@ -15,7 +15,7 @@ function setResizerProps(props, { instance, header }) {
   return {
     ...props,
     onDoubleClick: (e) => {
-      let largest = getMeasureMax(accessor, virtualRowsRange, tableRef.current);
+      let largest = getMeasureMax(accessor, virtualRowsRange, tableRef.current, isTreeTable);
       if (largest === -1) {
         return;
       }
@@ -39,9 +39,17 @@ function setResizerProps(props, { instance, header }) {
   };
 }
 
-function getMeasureMax(accessor, virtualRowsRange, tableNode): number {
+function calculateContentWidth(cell) {
+  let contentWidth = 0;
+  Array.from<HTMLElement>(cell.children).forEach((child) => {
+    contentWidth += child.scrollWidth;
+  });
+  return contentWidth;
+}
+
+function getMeasureMax(accessor, virtualRowsRange, tableNode, isTreeTable): number {
   let maxWidth = 0;
-  let cellWithMaxWidthContent = null;
+  let cellWithMaxWidthContent: HTMLElement | null | false = null;
 
   /**
    * recursively find the largest visible cell of the current column
@@ -51,14 +59,23 @@ function getMeasureMax(accessor, virtualRowsRange, tableNode): number {
       return;
     }
     const cellNode = row.querySelector(`[data-column-id-cell="${accessor}"]`);
-    const cellTextElement = cellNode.querySelector(`[data-column-id-cell-text="${accessor}"]`);
+    const cellTextElement = cellNode?.querySelector(`[data-column-id-cell-text="${accessor}"]`);
 
     if (cellTextElement) {
-      const currWidth = cellTextElement.scrollWidth;
-      if (maxWidth < currWidth) {
-        maxWidth = currWidth;
-        // only use the cell with the largest content for measuring
-        cellWithMaxWidthContent = cellNode;
+      // for tree tables the indent (margin) has to be taken into account
+      if (isTreeTable && cellNode?.dataset.isFirstColumn) {
+        const cellWidth = calculateContentWidth(cellNode);
+        if (maxWidth < cellWidth) {
+          maxWidth = cellWidth;
+          cellWithMaxWidthContent = false;
+        }
+      } else {
+        const currWidth = cellTextElement.scrollWidth;
+        if (maxWidth < currWidth) {
+          maxWidth = currWidth;
+          // only use the cell with the largest content for measuring
+          cellWithMaxWidthContent = cellNode;
+        }
       }
     }
     // if custom content (`Cell`) is rendered, the `cellTextElement` is not available.
@@ -73,16 +90,17 @@ function getMeasureMax(accessor, virtualRowsRange, tableNode): number {
   const firstRow = tableNode.querySelector(`[data-virtual-row-index="${virtualRowsRange.startIndex}"]`);
   recursiveFindMaxWidth(firstRow, accessor, virtualRowsRange.endIndex - virtualRowsRange.startIndex);
 
+  if (cellWithMaxWidthContent === false) {
+    return Math.ceil(maxWidth + CELL_PADDING_PX + 2 /* account for rounding error and border */);
+  }
+
   if (!cellWithMaxWidthContent) {
     return -1;
   }
 
-  let contentWidth = 0;
-  Array.from<HTMLElement>(cellWithMaxWidthContent.children).forEach((child) => {
-    contentWidth += child.scrollWidth;
-  });
-
-  return Math.ceil(contentWidth + CELL_PADDING_PX + 2 /* account for rounding error and border */);
+  return Math.ceil(
+    calculateContentWidth(cellWithMaxWidthContent) + CELL_PADDING_PX + 2 /* account for rounding error and border */
+  );
 }
 
 const setCellProps = (

From 68bafe876f0ce2d47ca9374dcd8ff9c14a540d8b Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 23 May 2024 09:04:34 +0200
Subject: [PATCH 8/8] docs

---
 .../src/components/AnalyticalTable/AnalyticalTable.mdx   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
index 689f2fc2e51..d666216ac36 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
@@ -152,10 +152,10 @@ import * as ComponentStories from './AnalyticalTable.stories';
 
 **Required Attributes**
 
-| Attribute  | Type                                              | Description                               |
-| ---------- | ------------------------------------------------- | ----------------------------------------- |
-| `accessor` | `string OR ((row: any, rowIndex: number) => any)` |                                           |
-| `id`       | `string`                                          | Only required if `accessor` is a function |
+| Attribute  | Type                                              | Description                                                                                                                                                                                                                    |
+| ---------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `accessor` | `string OR ((row: any, rowIndex: number) => any)` | This `string`/`function` is used to build the data model for your column.<br /><br />**Note**: You can also specify deeply nested values with accessors like `info.hobby` or even `address[0].street`<br />                    |
+| `id`       | `string`                                          | Defines the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc.<br /><br />**Note:** If no `accessor` is set, or the `accessor` is a function, the `id` property has to be set. |
 
 **Optional Properties**
 
@@ -192,6 +192,7 @@ import * as ComponentStories from './AnalyticalTable.stories';
 | `PopInHeader`           | `string OR ComponentType`                                                          | Custom pop-in header renderer. If set, the table will call that component for every column that is "popped-in" and pass the table instance as prop.                                                                                                                                                                                                                                                                                                                                                             |
 | `disableDragAndDrop`    | `boolean`                                                                          | Defines if the column is reorderable by dragging and dropping columns.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `enableMultiSort`       | `boolean`                                                                          | Defines whether this column should allow multi-sort.<br /><br /> **Note:** When sorting by a column that does not allow multiple sorting, only the current column is sorted and all other sorted columns are reset.                                                                                                                                                                                                                                                                                             |
+| `autoResizable`         | `boolean`                                                                          | Defines whether double-clicking a columns resizer will automatically resize the column to fit the largest cell content of visible rows.<br /><br />**Note:** Only default text content is supported by this option, for custom content it might work as well, but we recommend checking the behavior carefully as the logic can't account for all possible implementations.                                                                                                                                     |
 
 <br />