Index column height works.

Author: natalyjazzviolin

src/components/Grid/Cell.tsx

@@ -20,6 +20,7 @@ export const Cell = memo(
       rowHeight,
       rowStart,
       rowAutoHeight,
+      getRowHeight
     } = data;
 
     const currentRowIndex = rowIndex + rowStart;
@@ -57,9 +58,8 @@ export const Cell = memo(
 
     const cellRef = useRef<HTMLDivElement>(null);
 
-    // useEffect(() => {
-    //   console.log("Current ref form cell: ", cellRef.current?.getBoundingClientRect().height)
-    // })
+    const currentHeight = getRowHeight(rowIndex);
+    console.log(`Which is bigger, rowHeight ${rowHeight} or current height? ${currentHeight}`)
 
     useEffect(() => {
       console.log("Current ref form cell: ", cellRef.current?.getBoundingClientRect().height)
@@ -69,11 +69,12 @@ export const Cell = memo(
       }
     }, [cellRef, data.updateRowHeight, rowIndex]);
 
+    console.log("Row height is: ", rowHeight)
     return (
       <div
         style={{
           ...style,
-          height: "max-content"
+          height: "max-content",
         }}
         data-row={currentRowIndex}
         data-column={columnIndex}

src/components/Grid/Grid.tsx

@@ -213,15 +213,30 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onCopyCallback,
     ]);
 
+    
     const rowHeightsRef = useRef(new Map());
-
+  
+    const getRowHeight = useCallback((index: number) => {
+      // console.log(`GetRowHeight: from ref: ${rowHeightsRef.current.get(index)}`)
+      if (rowHeightsRef.current.get(index)) {
+        // console.log(`Returning ref: ${rowHeightsRef.current.get(index)}`)
+        return rowHeightsRef.current.get(index) + 33;
+      }
+      // console.log("Returning rowHeight")
+      return rowHeight;
+    }, [rowHeight]);
 
     const updateRowHeight = useCallback((rowIndex: number, height: number) => {
       console.log("Updating row height!");
       const prevHeight = rowHeightsRef.current.get(rowIndex) || 0;
+      console.log("Previous row height", prevHeight);
       if (height > prevHeight) {
         rowHeightsRef.current.set(rowIndex, height);
-        gridRef.current?.resetAfterRowIndex(rowIndex);
+        console.log("Current height > prevheight", rowHeightsRef);
+        if (gridRef.current) {
+          gridRef.current.resetAfterRowIndex(rowIndex);
+          console.log("Reset the grid");
+        }
       }
     }, []);
 
@@ -420,7 +435,8 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       rowNumberWidth,
       rowStart,
       rowAutoHeight,
-      updateRowHeight
+      updateRowHeight,
+      getRowHeight
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -806,27 +822,24 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     // to fit content if there is only one row.
     useEffect(() => {
       if (gridRef.current) {
-        gridRef.current.resetAfterRowIndex(0);
-        console.log("Inner: ", innerCellRef.current?.scrollHeight)
-        console.log("Bounding: ", innerCellRef.current?.scrollHeight)
+        gridRef.current.resetAfterRowIndex(1);
+        // 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)
+      // console.log("Inner: ", innerCellRef.current?.getBoundingClientRect().height)
       if (innerCellRef.current) {
         // gridRef.current.resetAfterRowIndex(0);
-        console.log("Is current")
+        // 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)

src/components/Grid/RowNumberColumn.tsx

@@ -23,16 +23,17 @@ const RowNumberColumnContainer = styled.div<{
 const RowNumberCell = styled.div<{
   $height: number;
   $rowNumber: number;
+  $rowAutoHeight?: boolean;
 }>`
   position: absolute;
   left: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-  ${({ $height, $rowNumber }) => `
+  ${({ $height, $rowNumber, $rowAutoHeight }) => `
     top: ${$height * $rowNumber}px;
-    height: ${$height}px;
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
   `}
 `;
 interface RowNumberColumnProps {
@@ -87,6 +88,7 @@ const RowNumber = ({
     <RowNumberCell
       $rowNumber={rowIndex}
       $height={rowHeight}
+      $rowAutoHeight={rowAutoHeight}
     >
       <StyledCell
         $height={rowHeight}

src/components/Grid/StyledCell.tsx

@@ -37,7 +37,8 @@ export const StyledCell = styled.div<{
     $showBorder,
     $rowAutoHeight,
   }) => `
-    height: ${$rowAutoHeight ? "auto" : `${$height}px`};
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
+    min-height: ${$rowAutoHeight ? "auto" : ""};
     overflow-y: ${$rowAutoHeight ? "auto" : "hidden"};
     background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
     color: ${

src/components/Grid/types.ts

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