fix(AnalyticalTable): fix dynamic column width and prevent table from overflowing in some cases (#597)

Author: Lukas742

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

@@ -2,7 +2,7 @@
 
 exports[`AnalyticalTable Alternate Row Color 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -509,7 +509,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
 
 exports[`AnalyticalTable Loading - Loader 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -1016,7 +1016,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
 
 exports[`AnalyticalTable Loading - Placeholder 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -1515,7 +1515,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
 
 exports[`AnalyticalTable Tree Table 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -2165,7 +2165,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
 
 exports[`AnalyticalTable custom row height 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; --sapWcrAnalyticalTableRowHeight: 60px; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; --sapWcrAnalyticalTableRowHeight: 60px; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -2672,7 +2672,7 @@ exports[`AnalyticalTable custom row height 1`] = `
 
 exports[`AnalyticalTable render without data 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -2944,7 +2944,7 @@ exports[`AnalyticalTable render without data 1`] = `
 
 exports[`AnalyticalTable test Asc desc 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -3451,7 +3451,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
 
 exports[`AnalyticalTable test Asc desc 2`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -3958,7 +3958,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
 
 exports[`AnalyticalTable test Asc desc 3`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -4465,7 +4465,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
 
 exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -4972,7 +4972,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
 
 exports[`AnalyticalTable with highlight row 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -5607,7 +5607,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
 
 exports[`AnalyticalTable without selection Column 1`] = `
 <div
-  style="max-width: 100%; overflow-x: auto; visibility: hidden;"
+  style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"

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

@@ -59,12 +59,12 @@ const columns = (columns, { instance }) => {
           internalDefaultColumnsCount--;
           return acceptedWidth;
         }
-        if (minWidth > availableWidth / defaultColumnsCount) {
+        if (minWidth > availableWidth / internalDefaultColumnsCount) {
           availableWidth -= minWidth;
           internalDefaultColumnsCount--;
           return minWidth;
         }
-        if (maxWidth < availableWidth / defaultColumnsCount) {
+        if (maxWidth < availableWidth / internalDefaultColumnsCount) {
           availableWidth -= maxWidth;
           internalDefaultColumnsCount--;
           return maxWidth;
@@ -74,7 +74,6 @@ const columns = (columns, { instance }) => {
       .filter(Boolean);
 
     const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0);
-
     const defaultColumnsCount = visibleColumns.length - columnsWithFixedWidth.length;
     // check if columns are visible and table has width
     if (visibleColumns.length > 0 && totalWidth > 0) {

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

@@ -327,7 +327,9 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   const inlineStyle = useMemo(() => {
     const tableStyles = {
       maxWidth: '100%',
-      overflowX: 'auto'
+      overflowX: 'auto',
+      display: 'flex',
+      flexDirection: 'column'
     };
     if (!!rowHeight) {
       tableStyles['--sapWcrAnalyticalTableRowHeight'] = `${rowHeight}px`;