Getting cell height in grid.

Author: natalyjazzviolin

src/components/Grid/Cell.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect, useRef } from "react";
 import { GridChildComponentProps, areEqual } from "react-window";
 import { ItemDataType } from "./types";
 import { StyledCell } from "./StyledCell";
@@ -54,11 +54,30 @@ export const Cell = memo(
 
     const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
     const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
+
+    const cellRef = useRef<HTMLDivElement>(null);
+
+    // useEffect(() => {
+    //   console.log("Current ref form cell: ", cellRef.current?.getBoundingClientRect().height)
+    // })
+
+    useEffect(() => {
+      console.log("Current ref form cell: ", cellRef.current?.getBoundingClientRect().height)
+      if (cellRef.current && data.updateRowHeight) {
+        const height = cellRef.current.getBoundingClientRect().height;
+        data.updateRowHeight(rowIndex, height);
+      }
+    }, [cellRef, data.updateRowHeight, rowIndex]);
+
     return (
       <div
-        style={style}
+        style={{
+          ...style,
+          height: "max-content"
+        }}
         data-row={currentRowIndex}
         data-column={columnIndex}
+        ref={cellRef}
       >
         <StyledCell
           as={CellData}

src/components/Grid/Grid.tsx

@@ -213,6 +213,19 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onCopyCallback,
     ]);
 
+    const rowHeightsRef = useRef(new Map());
+
+
+    const updateRowHeight = useCallback((rowIndex: number, height: number) => {
+      console.log("Updating row height!");
+      const prevHeight = rowHeightsRef.current.get(rowIndex) || 0;
+      if (height > prevHeight) {
+        rowHeightsRef.current.set(rowIndex, height);
+        gridRef.current?.resetAfterRowIndex(rowIndex);
+      }
+    }, []);
+    
+
     const customOnCopy: () => Promise<void> = useMemo(() => {
       const result = async () => {
         if (onCopyProp) {
@@ -407,6 +420,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       rowNumberWidth,
       rowStart,
       rowAutoHeight,
+      updateRowHeight
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -758,7 +772,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     const onItemsRendered = useCallback(
       (props: GridOnItemsRenderedProps) => {
         lastItemsRenderedProps.current = props;
-
         return onItemsRenderedProp?.({
           ...props,
           visibleRowStartIndex: props.visibleRowStartIndex + rowStart,
@@ -794,9 +807,30 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     useEffect(() => {
       if (gridRef.current) {
         gridRef.current.resetAfterRowIndex(0);
+        console.log("Inner: ", innerCellRef.current?.scrollHeight)
+        console.log("Bounding: ", innerCellRef.current?.scrollHeight)
       }
     }, [rowCount]);
 
+    
+    const innerCellRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      console.log("Inner: ", innerCellRef.current?.getBoundingClientRect().height)
+      if (innerCellRef.current) {
+        // gridRef.current.resetAfterRowIndex(0);
+        console.log("Is current")
+      }
+    }, [onItemsRendered]);
+
+    const getRowHeight = useCallback((index: number) => {
+      console.log(`GetRowHeight: from ref: ${rowHeightsRef.current.get(index)}`)
+      return rowHeightsRef.current.get(index) || rowHeight;
+    }, [rowHeight]);
+    
+    
+    // console.log("Inner ref? ", innerCellRef.current?.scrollHeight)
+    // console.log("Bounding client height? ", innerCellRef.current?.getBoundingClientRect().height)
     return (
       <ContextMenu
         modal={false}
@@ -831,7 +865,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 height={height}
                 width={width}
                 columnCount={columnCount}
-                rowHeight={() => rowHeight}
+                rowHeight={getRowHeight}
                 useIsScrolling={useIsScrolling}
                 innerElementType={InnerElementType}
                 itemData={data}
@@ -847,6 +881,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 outerRef={outerRef}
                 outerElementType={OuterElementType}
                 onItemsRendered={onItemsRendered}
+                innerRef={innerCellRef}
                 {...props}
               >
                 {CellWithWidth}

src/components/Grid/types.ts

@@ -158,6 +158,7 @@ export interface ItemDataType {
   rowNumberWidth: number;
   rowStart: number;
   rowAutoHeight?: boolean;
+  updateRowHeight: (rowIndex: number, height: number) => void;
 }
 
 export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "children"> {