feat: implement table widget infinite scroll with dynamic height

app/client/src/widgets/TableWidgetV2/component/TableBody/Row.tsx

@@ -1,11 +1,15 @@
 import type { CSSProperties, Key } from "react";
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import type { Row as ReactTableRowType } from "react-table";
 import type { ListChildComponentProps } from "react-window";
 import { BodyContext } from ".";
 import { renderEmptyRows } from "../cellComponents/EmptyCell";
 import { renderBodyCheckBoxCell } from "../cellComponents/SelectionCheckboxCell";
-import { MULTISELECT_CHECKBOX_WIDTH, StickyType } from "../Constants";
+import {
+  MULTISELECT_CHECKBOX_WIDTH,
+  StickyType,
+  TABLE_SIZES,
+} from "../Constants";
 
 interface RowType {
   className?: string;
@@ -14,20 +18,112 @@ interface RowType {
   style?: ListChildComponentProps["style"];
 }
 
+interface CellWithColumnProps {
+  column: {
+    columnProperties?: {
+      allowCellWrapping?: boolean;
+    };
+  };
+}
+
 export function Row(props: RowType) {
+  const { index, row } = props;
+  const rowRef = useRef<HTMLDivElement>(null);
   const {
     accentColor,
     borderRadius,
     columns,
     isAddRowInProgress,
+    listRef,
     multiRowSelection,
     prepareRow,
     primaryColumnId,
+    rowHeights,
+    rowNeedsMeasurement,
     selectedRowIndex,
     selectedRowIndices,
     selectTableRow,
   } = useContext(BodyContext);
 
+  useEffect(() => {
+    if (
+      rowNeedsMeasurement.current &&
+      rowNeedsMeasurement.current[index] === false
+    ) {
+      return;
+    }
+
+    const element = rowRef.current;
+
+    if (!element || !row) return;
+
+    const cellIndexesWithAllowCellWrapping: number[] = [];
+    const cellIndexesWithHTMLCell: number[] = [0];
+
+    try {
+      row.cells.forEach((cell, index: number) => {
+        try {
+          const typedCell = cell as unknown as CellWithColumnProps;
+
+          if (typedCell.column.columnProperties?.allowCellWrapping) {
+            cellIndexesWithAllowCellWrapping.push(index);
+          }
+        } catch (e) {
+          // Handle potential errors
+        }
+      });
+    } catch (error) {}
+
+    // Get all child elements
+    const children = element.children;
+    let normalCellHeight = 0;
+    let htmlCellHeight = 0;
+
+    cellIndexesWithAllowCellWrapping.forEach((index: number) => {
+      const child = children[index] as HTMLElement;
+      const dynamicContent = child.querySelector(
+        ".t--table-cell-tooltip-target",
+      );
+
+      if (dynamicContent) {
+        const styles = window.getComputedStyle(dynamicContent);
+
+        normalCellHeight +=
+          (dynamicContent as HTMLElement).offsetHeight +
+          parseFloat(styles.marginTop) +
+          parseFloat(styles.marginBottom) +
+          parseFloat(styles.paddingTop) +
+          parseFloat(styles.paddingBottom);
+      }
+    });
+
+    cellIndexesWithHTMLCell.forEach((index: number) => {
+      const child = children[index] as HTMLElement;
+      const dynamicContent = child.querySelector(
+        '[data-testid="t--table-widget-v2-html-cell"]>span',
+      );
+
+      if (dynamicContent) {
+        const styles = window.getComputedStyle(dynamicContent);
+
+        htmlCellHeight +=
+          (dynamicContent as HTMLElement).offsetHeight +
+          parseFloat(styles.marginTop) +
+          parseFloat(styles.marginBottom) +
+          parseFloat(styles.paddingTop) * 2 +
+          parseFloat(styles.paddingBottom) * 2;
+      }
+    });
+
+    const totalHeight =
+      Math.max(normalCellHeight, htmlCellHeight) +
+      TABLE_SIZES.DEFAULT.VERTICAL_PADDING * 2;
+
+    rowHeights.current && (rowHeights.current[index] = totalHeight);
+    rowNeedsMeasurement.current && (rowNeedsMeasurement.current[index] = false);
+    listRef && listRef.current?.resetAfterIndex(index);
+  }, [index, row]);
+
   prepareRow?.(props.row);
   const rowProps = {
     ...props.row.getRowProps(),
@@ -61,6 +157,7 @@ export function Row(props: RowType) {
         selectTableRow?.(props.row);
         e.stopPropagation();
       }}
+      ref={rowRef}
     >
       {multiRowSelection &&
         renderBodyCheckBoxCell(isRowSelected, accentColor, borderRadius)}

app/client/src/widgets/TableWidgetV2/component/TableBody/VirtualList.tsx

@@ -1,12 +1,16 @@
-import type { ListOnItemsRenderedProps, ReactElementType } from "react-window";
-import { FixedSizeList, areEqual } from "react-window";
-import React from "react";
-import type { ListChildComponentProps } from "react-window";
-import type { Row as ReactTableRowType } from "react-table";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
-import { EmptyRow, Row } from "./Row";
-import type { TableSizes } from "../Constants";
+import React, { useCallback, useContext } from "react";
+import type { Row as ReactTableRowType } from "react-table";
+import type {
+  ListChildComponentProps,
+  ListOnItemsRenderedProps,
+  ReactElementType,
+} from "react-window";
+import { VariableSizeList, areEqual } from "react-window";
 import type SimpleBar from "simplebar-react";
+import { BodyContext } from ".";
+import type { TableSizes } from "../Constants";
+import { EmptyRow, Row } from "./Row";
 
 const rowRenderer = React.memo((rowProps: ListChildComponentProps) => {
   const { data, index, style } = rowProps;
@@ -35,7 +39,7 @@ interface BaseVirtualListProps {
   innerElementType?: ReactElementType;
   outerRef?: React.Ref<SimpleBar>;
   onItemsRendered?: (props: ListOnItemsRenderedProps) => void;
-  infiniteLoaderListRef?: React.Ref<FixedSizeList>;
+  infiniteLoaderListRef?: React.Ref<VariableSizeList>;
   itemCount: number;
   pageSize: number;
 }
@@ -50,9 +54,44 @@ const BaseVirtualList = React.memo(function BaseVirtualList({
   rows,
   tableSizes,
 }: BaseVirtualListProps) {
+  const { listRef, rowHeights } = useContext(BodyContext);
+
+  const combinedRef = (list: VariableSizeList | null) => {
+    // Handle infiniteLoaderListRef
+    if (infiniteLoaderListRef) {
+      if (typeof infiniteLoaderListRef === "function") {
+        infiniteLoaderListRef(list);
+      } else {
+        (
+          infiniteLoaderListRef as React.MutableRefObject<VariableSizeList | null>
+        ).current = list;
+      }
+    }
+
+    // Handle listRef - only if it's a mutable ref
+    if (listRef && "current" in listRef) {
+      (listRef as React.MutableRefObject<VariableSizeList | null>).current =
+        list;
+    }
+  };
+
+  const getItemSize = useCallback(
+    (index: number) => {
+      try {
+        return rowHeights.current?.[index]
+          ? Math.max(rowHeights.current?.[index], tableSizes.ROW_HEIGHT)
+          : tableSizes.ROW_HEIGHT;
+      } catch (error) {
+        return tableSizes.ROW_HEIGHT;
+      }
+    },
+    [rowHeights.current, tableSizes.ROW_HEIGHT],
+  );
+
   return (
-    <FixedSizeList
+    <VariableSizeList
       className="virtual-list simplebar-content"
+      estimatedItemSize={tableSizes.ROW_HEIGHT}
       height={
         height -
         tableSizes.TABLE_HEADER_HEIGHT -
@@ -61,14 +100,14 @@ const BaseVirtualList = React.memo(function BaseVirtualList({
       innerElementType={innerElementType}
       itemCount={itemCount}
       itemData={rows}
-      itemSize={tableSizes.ROW_HEIGHT}
+      itemSize={getItemSize}
       onItemsRendered={onItemsRendered}
       outerRef={outerRef}
-      ref={infiniteLoaderListRef}
+      ref={combinedRef}
       width={`calc(100% + ${2 * WIDGET_PADDING}px)`}
     >
       {rowRenderer}
-    </FixedSizeList>
+    </VariableSizeList>
   );
 });
 

app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx

@@ -1,10 +1,10 @@
-import type { Ref } from "react";
-import React from "react";
+import React, { useEffect, type Ref, type RefObject, useRef } from "react";
 import type {
   Row as ReactTableRowType,
   TableBodyPropGetter,
   TableBodyProps,
 } from "react-table";
+import type { VariableSizeList } from "react-window";
 import { type ReactElementType } from "react-window";
 import type SimpleBar from "simplebar-react";
 import type { ReactTableColumnProps, TableSizes } from "../Constants";
@@ -33,6 +33,9 @@ export type BodyContextType = {
     propGetter?: TableBodyPropGetter<Record<string, unknown>> | undefined,
   ): TableBodyProps;
   totalColumnsWidth?: number;
+  rowHeights: RefObject<{ [key: number]: number }>;
+  rowNeedsMeasurement: RefObject<{ [key: number]: boolean }>;
+  listRef: RefObject<VariableSizeList> | null;
 } & Partial<HeaderComponentProps>;
 
 export const BodyContext = React.createContext<BodyContextType>({
@@ -47,6 +50,9 @@ export const BodyContext = React.createContext<BodyContextType>({
   primaryColumnId: "",
   isAddRowInProgress: false,
   totalColumnsWidth: 0,
+  rowHeights: { current: {} },
+  rowNeedsMeasurement: { current: {} },
+  listRef: null,
 });
 
 interface BodyPropsType {
@@ -133,6 +139,15 @@ export const TableBody = React.forwardRef(
       ...restOfProps
     } = props;
 
+    const listRef = useRef<VariableSizeList>(null);
+    const rowHeights = useRef<{ [key: number]: number }>({});
+    // Keep track of which rows need measurement
+    const rowNeedsMeasurement = useRef<{ [key: number]: boolean }>({});
+
+    useEffect(() => {
+      rowNeedsMeasurement.current = {};
+    }, [rows]);
+
     return (
       <BodyContext.Provider
         value={{
@@ -164,6 +179,9 @@ export const TableBody = React.forwardRef(
           rows,
           getTableBodyProps: props.getTableBodyProps,
           totalColumnsWidth: props.totalColumnsWidth,
+          rowHeights: rowHeights,
+          rowNeedsMeasurement: rowNeedsMeasurement,
+          listRef: listRef,
         }}
       >
         {isInfiniteScrollEnabled ? (