fix(AnalyticalTable): always scale cols correctly with scaleWidthMode "Grow" (#4362)

Fixes #4348

Author: Lukas742

packages/charts/src/components/TimelineChart/TimeLineChart.mdx

@@ -6,7 +6,7 @@ import { TimelineChartAnnotation } from './TimelineChartAnnotation';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader since="1.10.0" />
 
 <Canvas of={ComponentStories.Default} />
 

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

@@ -95,6 +95,7 @@ const meta = {
         Header: 'Actions',
         accessor: '.',
         width: 100,
+        minWidth: 100,
         disableResizing: true,
         disableGroupBy: true,
         disableFilters: true,

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

@@ -292,6 +292,8 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
     return columns.map((column) => ({ ...column, width: column.width ?? defaultWidth }));
   }
 
+  // AnalyticalTableScaleWidthMode.Grow
+
   const rowSample = rows.slice(0, ROW_SAMPLE_SIZE);
 
   const columnMeta = visibleColumns.reduce((acc, column) => {
@@ -345,40 +347,31 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
     return acc;
   }, {});
 
-  const totalCharNum = Object.values(columnMeta).reduce((acc: number, item: any) => acc + item.contentCharAvg, 0);
-
   let reservedWidth = visibleColumns.reduce((acc, column) => {
     const { minHeaderWidth, fullWidth } = columnMeta[column.id ?? column.accessor];
-    return (
-      acc +
-        Math.max(
-          column.minWidth || 0,
-          column.width || 0,
-          minHeaderWidth || 0,
-          scaleWidthMode === AnalyticalTableScaleWidthMode.Grow ? fullWidth : 0
-        ) || 0
-    );
+    return acc + Math.max(column.minWidth || 0, column.width || 0, minHeaderWidth || 0, fullWidth) || 0;
   }, 0);
 
   let availableWidth = totalWidth - reservedWidth;
 
   if (availableWidth > 0) {
-    if (scaleWidthMode === AnalyticalTableScaleWidthMode.Grow) {
-      reservedWidth = visibleColumns.reduce((acc, column) => {
-        const { minHeaderWidth } = columnMeta[column.id ?? column.accessor];
-        return acc + Math.max(column.minWidth || 0, column.width || 0, minHeaderWidth || 0) || 0;
-      }, 0);
-      availableWidth = totalWidth - reservedWidth;
-    }
+    let notReservedCount = 0;
+    reservedWidth = visibleColumns.reduce((acc, column) => {
+      const reserved = Math.max(column.minWidth || 0, column.width || 0) || 0;
+      if (!reserved) {
+        notReservedCount++;
+      }
+      return acc + reserved;
+    }, 0);
+    availableWidth = totalWidth - reservedWidth;
 
     return columns.map((column) => {
       const isColumnVisible = (column.isVisible ?? true) && !hiddenColumns.includes(column.id ?? column.accessor);
       const meta = columnMeta[column.id ?? (column.accessor as string)];
       if (isColumnVisible && meta) {
-        const { minHeaderWidth, contentCharAvg } = meta;
-        const additionalSpaceFactor = totalCharNum > 0 ? contentCharAvg / totalCharNum : 1 / visibleColumns.length;
+        const { minHeaderWidth } = meta;
 
-        const targetWidth = additionalSpaceFactor * availableWidth + minHeaderWidth;
+        const targetWidth = availableWidth / notReservedCount;
 
         return {
           ...column,
@@ -391,7 +384,6 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
     });
   }
 
-  // AnalyticalTableScaleWidthMode Grow
   return columns.map((column) => {
     const isColumnVisible = (column.isVisible ?? true) && !hiddenColumns.includes(column.id ?? column.accessor);
     const meta = columnMeta[column.id ?? (column.accessor as string)];

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

@@ -418,7 +418,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * - **Default**: The available space of the table is distributed evenly for columns without fixed width. If the minimum width of all columns is reached, horizontal scrolling will be enabled.
    * - **Smart**: Every column gets the space it needs for displaying the full header text. If all header texts need more space than the available table width, horizontal scrolling will be enabled. If there is space left, columns with a long text will get more space until there is no more table space left.
-   * - **Grow**: Every column gets the space it needs for displaying its full header text and full text content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled. To prevent huge header text from polluting the table, a max-width of 700px is applied to each column. It can be overwritten by setting the respective column property.
+   * - **Grow**: Every column gets the space it needs for displaying its full header text and full text content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled. To prevent huge header text from polluting the table, a max-width of 700px is applied to each column. It can be overwritten by setting the respective column property. This mode adds a calculated `minWidth` to each column. If the internally calculated `minWidth` is larger than the `width` set in the column options, it can lead to an unwanted scrollbar. To prevent this, you can set the `minWidth` in the column options yourself.
    *
    * __Note:__ Custom cells with components instead of text as children are ignored by the `Smart` and `Grow` modes.
    * __Note:__ For performance reasons, the `Smart` and `Grow` modes base their calculation for table cell width on a subset of column cells. If the first 20 cells of a column are significantly smaller than the rest of the column cells, the content may still not be fully displayed for all cells.

packages/main/src/enums/AnalyticalTableScaleWidthMode.ts

@@ -14,7 +14,11 @@ export enum AnalyticalTableScaleWidthMode {
    */
   Smart = 'Smart',
   /*
-   * Every column gets the space it needs for displaying its full header text and full text content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled. To prevent huge header text from polluting the table, a max-width of 700px is applied to each column. It can be overwritten by setting the respective column property.
+   * Every column gets the space it needs for displaying its full header text and full text content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled.
+   *
+   * __Note:__ To prevent huge header text from polluting the table, a max-width of 700px is applied to each column. It can be overwritten by setting the respective column property.
+   *
+   * __Note:__ This mode adds a calculated `minWidth` to each column. If the internally calculated `minWidth` is larger than the `width` set in the column options, it can lead to an unwanted scrollbar. To prevent this, you can set the `minWidth` in the column options yourself.
    */
   Grow = 'Grow'
 }

packages/main/src/webComponents/Menu/Menu.mdx

@@ -10,7 +10,7 @@ import MenuDomRef from './MenuDomRef.json';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader since="0.23.0" />
 
 ## Example