fix(AnalyticalTable): fix scrollbar issue on column reorder & initial horizontal scrolling (#413)

Author: MarcusNotheis

.github/workflows/compressed-size.yml

@@ -13,5 +13,6 @@ jobs:
       - uses: preactjs/compressed-size-action@v1
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          pattern: 'lib/*.js'
+          pattern: 'packages/**/lib/**/*.js'
+          exlude: 'packages/**/src/lib/**'
           compression: 'gzip'

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -59,7 +59,8 @@ const styles = {
     position: 'relative',
     width: '100%',
     overflowX: 'hidden',
-    padding: `0 0.5rem`
+    padding: `0 0.5rem`,
+    boxSizing: 'border-box'
   },
   iconContainer: {
     display: 'inline-block',

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -4902,7 +4902,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
           >
             <div
-              aria-colindex="1"
+              aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
@@ -4917,7 +4917,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               </span>
             </div>
             <div
-              aria-colindex="2"
+              aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
@@ -4969,7 +4969,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
             <div
-              aria-colindex="1"
+              aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
@@ -4984,7 +4984,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
               </span>
             </div>
             <div
-              aria-colindex="2"
+              aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
@@ -5036,14 +5036,14 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
           >
             <div
-              aria-colindex="1"
+              aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
-              aria-colindex="2"
+              aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
@@ -5071,14 +5071,14 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
             <div
-              aria-colindex="1"
+              aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
-              aria-colindex="2"
+              aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
@@ -5106,14 +5106,14 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
           >
             <div
-              aria-colindex="1"
+              aria-colindex="2"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
               tabindex="-1"
             />
             <div
-              aria-colindex="2"
+              aria-colindex="1"
               class="AnalyticalTable-tableCell-0"
               role="cell"
               style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"

packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts

@@ -4,8 +4,8 @@ import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
 import { CSSProperties } from 'react';
 
 const getCellProps = (cellProps, { cell: { column }, instance }) => {
-  const lastColumnId = instance.columns[instance.columns.length - 1]?.id;
-  const columnIndex = instance.columns.findIndex(({ id }) => id === column.id);
+  const lastColumnId = instance.visibleColumns[instance.visibleColumns.length - 1]?.id;
+  const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id);
   const { classes } = instance.webComponentsReactProperties;
   const style: CSSProperties = {};