Fix PR comments

src/components/Grid/useColumns.ts

@@ -5,6 +5,41 @@ import { VariableSizeGrid } from "react-window";
 const DEFAULT_WIDTH = 100;
 const MIN_COLUMN_WIDTH = 32;
 
+/**
+ * Measures the minimum width required to display all content in a column without wrapping or truncation.
+ * Note. We cannot simply measure item.scrollWidth, because it will return the current width if it is larger than needed.
+ * To workaround it, we temporary shrink the column width to MIN_COLUMN_WIDTH and measure the scrollWidth.
+ * @param {number} columnIndex - The index of the column to measure
+ * @param {HTMLDivElement} outerGrid - The grid element containing the column
+ * @returns {number} The minimum width needed for the column's content (in pixels)
+ *                   Returns MIN_COLUMN_WIDTH if outerGridRef is not available
+ */
+const measureColumnWidth = (columnIndex: number, outerGrid: HTMLDivElement): number => {
+  // Store the original widths
+  const cells = outerGrid.querySelectorAll<HTMLDivElement>(
+    `[data-grid-column="${columnIndex}"]`
+  );
+
+  // Store the original widths and temporarily set cells to minimum width
+  const originalWidths: string[] = [];
+  cells.forEach(cell => {
+    originalWidths.push(cell.style.width);
+    cell.style.width = `${MIN_COLUMN_WIDTH}px`;
+  });
+
+  // Measure the actual content width
+  const maxWidth = Array.from(cells).reduce((max, item) => {
+    return Math.max(max, item.scrollWidth + 2);
+  }, MIN_COLUMN_WIDTH);
+
+  // Restore original widths
+  cells.forEach((cell, i) => {
+    cell.style.width = originalWidths[i];
+  });
+
+  return maxWidth;
+};
+
 interface Props {
   columnCount: number;
   columnWidth?: (index: number) => number;
@@ -64,49 +99,6 @@ const useColumns = ({
     [columnCount, columnWidthProp, gridRef]
   );
 
-  /**
-   * Measures the minimum width required to display all content in a column without wrapping or truncation.
-   * Note. We cannot simply measure item.scrollWidth, because it will return the current width if it is larger than needed.
-   * To workaround it, we temporary shrink the column width to MIN_COLUMN_WIDTH and measure the scrollWidth.
-   * @param {number} columnIndex - The index of the column to measure
-   * @returns {number} The minimum width needed for the column's content (in pixels)
-   *                   Returns MIN_COLUMN_WIDTH if outerGridRef is not available
-   */
-  const measureColumnWidth = useCallback(
-    (columnIndex: number): number => {
-      if (!outerGridRef.current) {
-        // The check is not necessary, but without it the linter will complain.
-        return MIN_COLUMN_WIDTH;
-      }
-
-      // Store the original widths
-      const cells = outerGridRef.current.querySelectorAll<HTMLDivElement>(
-        `[data-grid-column="${columnIndex}"]`
-      );
-      // In theory, all widths are the same, but it's better to be safe than sorry.
-      const originalWidths = Array.from(cells).map(cell => cell.style.width);
-
-      // Temporarily set cells to minimum width
-      cells.forEach(cell => {
-        cell.style.width = `${MIN_COLUMN_WIDTH}px`;
-      });
-
-      // Measure the actual content width
-      let maxWidth = MIN_COLUMN_WIDTH;
-      cells.forEach(item => {
-        maxWidth = Math.max(maxWidth, item.scrollWidth + 2);
-      });
-
-      // Restore original widths
-      cells.forEach((cell, i) => {
-        cell.style.width = originalWidths[i];
-      });
-
-      return maxWidth;
-    },
-    [outerGridRef]
-  );
-
   const onColumnResize: ColumnResizeFn = useCallback(
     (columnIndex, newWidth, type) => {
       columnResized.current = true;
@@ -118,7 +110,7 @@ const useColumns = ({
           newWidth = prevWidth.current[columnIndex.toString()];
           autoWidthIndices.current.splice(widthIndex, 1);
         } else if (outerGridRef.current) {
-          newWidth = measureColumnWidth(columnIndex);
+          newWidth = measureColumnWidth(columnIndex, outerGridRef.current);
           autoWidthIndices.current.push(columnIndex);
         }
       } else {