mind column.width, check if fonts are ready

Author: Lukas742

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

@@ -12,7 +12,8 @@ interface IColumnMeta {
   contentPxAvg: number;
   headerPx: number;
   headerDefinesWidth?: boolean;
-  maxWidth?: number;
+  maxWidth?: number | undefined;
+  width?: number | undefined;
 }
 
 const ROW_SAMPLE_SIZE = 20;
@@ -260,6 +261,7 @@ const calculateSmartAndGrowColumns = (
         contentPxAvg: contentPxLength,
         // When Grow mode is active, static max width should be applied
         maxWidth: column.maxWidth ?? (isGrow ? MAX_WIDTH : undefined),
+        width: column.width,
       };
       return metadata;
     },
@@ -279,7 +281,7 @@ const calculateSmartAndGrowColumns = (
     if (isGrow) {
       totalContentPxAvgPrio1 += columnMeta[columnIdOrAccessor].contentPxAvg;
       const targetWidth = Math.min(
-        Math.max(column.minWidth ?? 0, column.width ?? 0, contentPxAvg, headerPx),
+        Math.max(column.minWidth ?? 0, column.width ?? Math.max(contentPxAvg, headerPx)),
         column.maxWidth ?? MAX_WIDTH,
       );
 
@@ -288,6 +290,7 @@ const calculateSmartAndGrowColumns = (
       }
       return acc + targetWidth;
     }
+
     if (contentPxAvg > headerPx) {
       if (!column.minWidth && !column.width) {
         totalContentPxAvgPrio1 += columnMeta[columnIdOrAccessor].contentPxAvg;
@@ -300,7 +303,7 @@ const calculateSmartAndGrowColumns = (
       if (!column.minWidth && !column.width) {
         totalNumberColPrio2++;
       }
-      const max = Math.max(column.minWidth || 0, column.width || 0, headerPx);
+      const max = Math.max(column.minWidth || 0, column.width ?? headerPx);
       columnMeta[columnIdOrAccessor].headerDefinesWidth = true;
       return acc + max;
     }
@@ -365,8 +368,8 @@ const calculateSmartAndGrowColumns = (
         width: targetWidth,
       };
     } else {
-      const targetWidth = Math.max(column.width || 0, 60, headerPx, column.minWidth ?? 0);
-      if (targetWidth < (column.maxWidth ?? Infinity)) {
+      const targetWidth = Math.max(Math.min(column.width ?? 0, headerPx), column.minWidth ?? 0);
+      if (targetWidth < (column.maxWidth ?? Infinity) && !meta.width) {
         lessThanMaxWidthCount++;
       }
       fullWidthOfAllColumns += targetWidth;
@@ -378,11 +381,24 @@ const calculateSmartAndGrowColumns = (
   });
 
   // Step 3: Distribute remaining width to all columns that are not at their maxWidth
-  const remainingWidth = totalWidth - fullWidthOfAllColumns;
+  let remainingWidth = totalWidth - fullWidthOfAllColumns;
   if (remainingWidth > 0) {
     return visibleColumnsAdaptedPrio2.map((column) => {
-      if (column.width !== column.maxWidth) {
-        return { ...column, width: column.width + remainingWidth / lessThanMaxWidthCount };
+      const columnIdOrAccessor = (column.id ?? column.accessor) as string;
+      const meta = columnMeta[columnIdOrAccessor];
+      if (column.width !== column.maxWidth && !meta.width) {
+        const proportionalRemainingWidth = remainingWidth / (lessThanMaxWidthCount || 1);
+        let proportionalWidth = column.width + proportionalRemainingWidth;
+        // if maxWidth is reached, distribute the remaining width to the other columns
+        if (proportionalWidth > column.maxWidth) {
+          proportionalWidth = column.maxWidth;
+          remainingWidth -= proportionalWidth - column.width;
+          if (lessThanMaxWidthCount >= 2) {
+            lessThanMaxWidthCount -= 1;
+          }
+        }
+
+        return { ...column, width: proportionalWidth };
       }
       return column;
     });
@@ -422,16 +438,17 @@ const useColumnsDeps = (
     state.hiddenColumns.length,
     webComponentsReactProperties.scaleWidthMode,
     isLoadingPlaceholder,
+    webComponentsReactProperties.fontsReady,
   ];
 };
 
 const columns = (columns: TableInstance['columns'], { instance }: { instance: TableInstance }) => {
-  if (!instance.state || !instance.rows) {
-    return columns;
-  }
+  const { scaleWidthMode, loading, fontsReady } = instance.webComponentsReactProperties;
   const { state } = instance;
   const { hiddenColumns, tableClientWidth: totalWidth } = state;
-  const { scaleWidthMode, loading } = instance.webComponentsReactProperties;
+  if (!instance.state || !instance.rows || !fontsReady) {
+    return columns;
+  }
 
   if (columns.length === 0 || !totalWidth || !AnalyticalTableScaleWidthMode[scaleWidthMode]) {
     return columns;

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

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+// If reused, think about implementing the behavior via useSyncExternalStore
+
+/**
+ * Hook that returns whether the fonts are loaded and ready to use.
+ *
+ * @returns boolean
+ */
+export function useFontsReady(): boolean {
+  const [fontsReady, setFontsReady] = useState(document.fonts?.status === 'loaded');
+  useEffect(() => {
+    if (!document.fonts) return;
+
+    if (document.fonts.status === 'loading') {
+      let mounted = true;
+
+      void document.fonts.ready.then(() => {
+        if (mounted) {
+          setFontsReady(true);
+        }
+      });
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, []);
+
+  return fontsReady;
+}

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

@@ -62,6 +62,7 @@ import { useAutoResize } from './hooks/useAutoResize.js';
 import { useColumnsDeps } from './hooks/useColumnsDeps.js';
 import { useColumnDragAndDrop } from './hooks/useDragAndDrop.js';
 import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths.js';
+import { useFontsReady } from './hooks/useFontsReady.js';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
 import { usePopIn } from './hooks/usePopIn.js';
 import { useResizeColumnsConfig } from './hooks/useResizeColumnsConfig.js';
@@ -186,6 +187,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
 
   useStylesheet(styleData, AnalyticalTable.displayName);
   const isInitialized = useRef(false);
+  const fontsReady = useFontsReady();
 
   const nativeScrollbar = className?.includes('ui5-content-native-scrollbars');
   const alwaysShowSubComponent =
@@ -251,6 +253,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
         alternateRowColor,
         alwaysShowSubComponent,
         classes: classNames,
+        fontsReady,
         highlightField,
         isTreeTable,
         loading,

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -211,6 +211,7 @@ export interface TableInstance {
 }
 
 export interface WCRPropertiesType {
+  fontsReady: boolean;
   selectionMode: AnalyticalTablePropTypes['selectionMode'];
   onRowSelect?: AnalyticalTablePropTypes['onRowSelect'];
   translatableTexts: {
@@ -852,10 +853,10 @@ 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. 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**: 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.
    *
    * __Note:__
-   * - Custom cells with components instead of text as children are ignored by the `Smart` and `Grow` modes.
+   * - Custom cells with components instead of text as children are ignored by the `Smart` and `Grow` modes. You can use the `scaleWidthModeOptions` property on the column definition to add custom strings for the internal width calculation.
    * - 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.
    * - Only the default mode is available out of the box for the `sap.m.Table`; similar behavior to the `"Grow"` mode can be achieved in `sap.ui.table` using `autoResizeColumn`.
    *