Expand cell height if there is only one row

Author: natalyjazzviolin

src/components/Grid/Cell.tsx

@@ -1,20 +1,14 @@
-import { memo } from "react";
+import { memo, useEffect, useRef } from "react";
 import { GridChildComponentProps, areEqual } from "react-window";
 import { ItemDataType } from "./types";
 import { StyledCell } from "./StyledCell";
 
 type CellProps = GridChildComponentProps<ItemDataType> & {
   width: number;
-}
+};
 
 export const Cell = memo(
-  ({
-    data,
-    rowIndex,
-    columnIndex,
-    style,
-    ...props
-  }: CellProps) => {
+  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {
     const {
       cell: CellData,
       getSelectionType,
@@ -25,6 +19,8 @@ export const Cell = memo(
       showHeader,
       rowHeight,
       rowStart,
+      rowAutoHeight,
+      updateRowHeight,
     } = data;
 
     const currentRowIndex = rowIndex + rowStart;
@@ -60,11 +56,29 @@ export const Cell = memo(
     const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
     const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
 
+    const cellRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (!rowAutoHeight) {
+        return;
+      }
+      if (cellRef.current) {
+        const height = cellRef.current.getBoundingClientRect().height;
+        updateRowHeight(rowIndex, height);
+      }
+    }, [updateRowHeight, rowIndex, rowAutoHeight]);
+
+    const styleWithHeight = {
+      ...style,
+      height: "auto",
+    };
+
     return (
       <div
-        style={style}
+        style={styleWithHeight}
         data-row={currentRowIndex}
         data-column={columnIndex}
+        ref={cellRef}
       >
         <StyledCell
           as={CellData}
@@ -85,6 +99,7 @@ export const Cell = memo(
           data-grid-row={currentRowIndex}
           data-grid-column={columnIndex}
           $showBorder
+          $rowAutoHeight={rowAutoHeight}
           {...props}
         />
       </div>

src/components/Grid/Grid.stories.tsx

@@ -2,7 +2,14 @@ import { useCallback, useEffect, useState } from "react";
 import { CellProps, GridContextMenuItemProps, SelectedRegion, SelectionFocus } from "..";
 import { Grid as CUIGrid } from "./Grid";
 
-const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
+const Cell: CellProps = ({
+  type,
+  rowIndex,
+  columnIndex,
+  isScrolling,
+  width,
+  ...props
+}) => {
   return (
     <div
       data-scrolling={isScrolling}
@@ -20,6 +27,7 @@ interface Props {
     row: number;
     column: number;
   };
+  rowAutoHeight?: boolean;
 }
 const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
   const [focus, setFocus] = useState(focusProp);
@@ -71,6 +79,7 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
           });
         }}
         getMenuOptions={getMenuOptions}
+        rowAutoHeight={props.rowAutoHeight}
         {...props}
       />
     </div>

src/components/Grid/Grid.test.tsx

@@ -1,16 +1,32 @@
-import {CellProps, Grid, GridProps} from "@/components";
-import {renderCUI} from "@/utils/test-utils";
-import {SelectionFocus} from "./types";
-import {ReactNode} from "react";
+import { CellProps, Grid, GridProps } from "@/components";
+import { renderCUI } from "@/utils/test-utils";
+import { SelectionFocus } from "./types";
+import { ReactNode } from "react";
 
 const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props }) => {
+  let content = `${rowIndex} ${columnIndex} - ${type}`;
+
+  if (rowIndex === 0 && columnIndex === 0) {
+    content = `CREATE TABLE random_user_events (
+        user_id UInt32,
+        event_time DateTime,
+        event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
+        item_id String,
+        price Decimal(10,2),
+        quantity UInt16
+    ) ENGINE = MergeTree()
+    ORDER BY (user_id, event_time)
+    PARTITION BY toYYYYMM(event_time)
+    SETTINGS index_granularity = 8192;`;
+  }
+
   return (
     <div
       data-scrolling={isScrolling}
       {...props}
       data-testid={`${type}-${rowIndex ?? "x"}-${columnIndex ?? "x"}`}
     >
-      {rowIndex} {columnIndex} - {type}
+      {content}
     </div>
   );
 };
@@ -31,6 +47,7 @@ interface Props
   focus?: SelectionFocus;
   onFocusChange?: (rowIndex: number, columnIndex: number) => void;
   onColumnResize?: () => void;
+  rowAutoHeight?: boolean;
 }
 type AutoSizerModule = typeof import("react-virtualized-auto-sizer");
 
@@ -60,6 +77,7 @@ describe("Grid", () => {
     onColumnResize,
     focus,
     onFocusChange,
+    rowAutoHeight,
     ...props
   }: Props) =>
     renderCUI(
@@ -72,6 +90,7 @@ describe("Grid", () => {
         onColumnResize={onColumnResize ?? onColumnResizeTestFn}
         onFocusChange={onFocusChange ?? onFocusChangeTestFn}
         getMenuOptions={getMenuOptions}
+        rowAutoHeight={rowAutoHeight}
         {...props}
       />
     );
@@ -99,4 +118,31 @@ describe("Grid", () => {
     cell && expect(cell.dataset.selected).toEqual("true");
     cell && expect(cell.dataset.focused).toEqual("true");
   });
+
+  it("should set row height to default (33px) when rowAutoHeight is false", async () => {
+    const { getByTestId } = renderGrid({
+      rowCount: 10,
+      columnCount: 10,
+      rowAutoHeight: false,
+    });
+
+    const cell = getByTestId("row-cell-0-0");
+
+    const computedHeight = window.getComputedStyle(cell).height;
+    const heightValue = parseFloat(computedHeight);
+    expect(heightValue).toBe(33);
+  });
+
+  it("should expand row height to 100% when rowAutoHeight is true", async () => {
+    const { getByTestId } = renderGrid({
+      rowCount: 1,
+      columnCount: 1,
+      rowAutoHeight: true,
+    });
+
+    const cell = getByTestId("row-cell-0-0");
+
+    const computedHeight = window.getComputedStyle(cell).height;
+    expect(computedHeight).toBe("100%");
+  });
 });

src/components/Grid/Grid.tsx

@@ -149,6 +149,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onContextMenu: onContextMenuProp,
       forwardedGridRef,
       onItemsRendered: onItemsRenderedProp,
+      rowAutoHeight,
       ...props
     },
     forwardedRef
@@ -212,6 +213,34 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onCopyCallback,
     ]);
 
+    const rowHeightsRef = useRef(new Map());
+
+    const getRowHeight = useCallback(
+      (index: number) => {
+        if (rowAutoHeight && rowHeightsRef.current.get(index)) {
+          return rowHeightsRef.current.get(index) + rowHeight;
+        }
+        return rowHeight;
+      },
+      [rowHeight, rowAutoHeight]
+    );
+
+    const updateRowHeight = useCallback(
+      (rowIndex: number, height: number) => {
+        if (!rowAutoHeight) {
+          return;
+        }
+        const prevHeight = rowHeightsRef.current.get(rowIndex) ?? 0;
+        if (height > prevHeight) {
+          rowHeightsRef.current.set(rowIndex, height);
+          if (gridRef.current) {
+            gridRef.current.resetAfterRowIndex(rowIndex);
+          }
+        }
+      },
+      [rowAutoHeight]
+    );
+
     const customOnCopy: () => Promise<void> = useMemo(() => {
       const result = async () => {
         if (onCopyProp) {
@@ -405,6 +434,9 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       headerHeight,
       rowNumberWidth,
       rowStart,
+      rowAutoHeight,
+      updateRowHeight,
+      getRowHeight,
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -435,6 +467,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 showHeader={showHeader}
                 rowStart={rowStart}
                 showBorder={showBorder}
+                rowAutoHeight={rowAutoHeight}
               />
             )}
 
@@ -755,7 +788,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     const onItemsRendered = useCallback(
       (props: GridOnItemsRenderedProps) => {
         lastItemsRenderedProps.current = props;
-
         return onItemsRenderedProp?.({
           ...props,
           visibleRowStartIndex: props.visibleRowStartIndex + rowStart,
@@ -786,6 +818,13 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       );
     };
 
+    // Handles the case when rowCount/columnCount changes, rerenders styles
+    useEffect(() => {
+      if (gridRef.current) {
+        gridRef.current.resetAfterRowIndex(0);
+      }
+    }, [rowCount, columnCount]);
+
     return (
       <ContextMenu
         modal={false}
@@ -820,7 +859,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 height={height}
                 width={width}
                 columnCount={columnCount}
-                rowHeight={() => rowHeight}
+                rowHeight={getRowHeight}
                 useIsScrolling={useIsScrolling}
                 innerElementType={InnerElementType}
                 itemData={data}

src/components/Grid/Header.tsx

@@ -99,6 +99,7 @@ const RowColumnContainer = styled(HeaderCellContainer)<{
 const RowColumn = styled(StyledCell)`
   width: 100%;
   text-align: right;
+  overflow: hidden;
 `;
 
 const Column = ({
@@ -130,7 +131,7 @@ const Column = ({
     (leftSelectionType === "selectDirect" || isSelected) &&
     leftSelectionType !== selectionType;
 
-  const columnWidth = getColumnWidth(columnIndex)
+  const columnWidth = getColumnWidth(columnIndex);
   return (
     <HeaderCellContainer
       $width={columnWidth}
@@ -186,7 +187,7 @@ const Header = ({
   getColumnHorizontalPosition,
   getResizerPosition,
   showBorder,
-  resizingState
+  resizingState,
 }: HeaderProps) => {
   const selectedAllType = getSelectionType({
     type: "all",