diff --git a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx index d1455dc05d..b5e60fcf69 100644 --- a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx +++ b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx @@ -1,4 +1,4 @@ -import React, { ComponentType, forwardRef, useCallback, useEffect } from "react"; +import React, { ComponentType, forwardRef, useCallback, useEffect, useMemo } from "react"; import { VibeComponentProps } from "../../../types"; import TableBody from "../TableBody/TableBody"; import styles from "./TableVirtualizedBody.module.scss"; @@ -101,6 +101,19 @@ const TableVirtualizedBody = forwardRef( if (!virtualizedWithHeader) markTableAsVirtualized(); }, [markTableAsVirtualized, virtualizedWithHeader]); + const memoizedInnerElementType = useMemo( + () => + virtualizedWithHeader + ? forwardRef(({ children, ...rest }: any, ref: React.Ref) => ( +
+ {headerRenderer!(columns!)} + {children} +
+ )) + : undefined, + [virtualizedWithHeader, headerRenderer, columns] + ); + return ( { virtualizedListRef.current = element; }} - innerElementType={ - virtualizedWithHeader - ? forwardRef(({ children, ...rest }, ref) => ( -
- {headerRenderer(columns)} - {children} -
- )) - : undefined - } + innerElementType={memoizedInnerElementType} > {itemRenderer}