Made expandable content a separate component

packages/itwinui-react/src/core/Table/Table.test.tsx

@@ -2040,7 +2040,7 @@ it('should render sub-rows and handle expansions', async () => {
   expect(onExpand).toHaveBeenNthCalledWith(1, [data[0]], expect.any(Object));
   expect(onExpand).toHaveBeenNthCalledWith(
     2,
-    [data[0], data[1]],
+    [data[0], data[0].subRows[1]],
     expect.any(Object),
   );
   expect(onExpand).toHaveBeenNthCalledWith(

packages/itwinui-react/src/core/Table/Table.tsx

@@ -38,6 +38,7 @@ import {
   useMergedRefs,
   useLatestRef,
   useVirtualScroll,
+  WithCSSTransition,
 } from '../../utils/index.js';
 import type { CommonProps } from '../../utils/index.js';
 import { TableColumnsContext } from './utils.js';
@@ -66,6 +67,7 @@ import {
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { Virtualizer, type VirtualItem } from '@tanstack/react-virtual';
 import { ColumnHeader } from './ColumnHeader.js';
+import { TableExpandableContentMemoized } from './TableExpandableContentMemoized.js';
 
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
@@ -835,27 +837,46 @@ export const Table = <
       const row = page[index];
       prepareRow(row);
       return (
-        <TableRowMemoized
-          row={row}
-          rowProps={rowProps}
-          isLast={index === page.length - 1}
-          onRowInViewport={onRowInViewportRef}
-          onBottomReached={onBottomReachedRef}
-          intersectionMargin={intersectionMargin}
-          state={state}
-          key={row.getRowProps().key}
-          onClick={onRowClickHandler}
-          subComponent={subComponent}
-          isDisabled={!!isRowDisabled?.(row.original)}
-          tableHasSubRows={hasAnySubRows}
-          tableInstance={instance}
-          expanderCell={expanderCell}
-          scrollContainerRef={tableRef.current}
-          tableRowRef={enableVirtualization ? undefined : tableRowRef(row)}
-          density={density}
-          virtualItem={virtualItem}
-          virtualizer={virtualizer}
-        />
+        <>
+          <TableRowMemoized
+            row={row}
+            rowProps={rowProps}
+            isLast={index === page.length - 1}
+            onRowInViewport={onRowInViewportRef}
+            onBottomReached={onBottomReachedRef}
+            intersectionMargin={intersectionMargin}
+            state={state}
+            key={row.getRowProps().key}
+            onClick={onRowClickHandler}
+            subComponent={subComponent}
+            isDisabled={!!isRowDisabled?.(row.original)}
+            tableHasSubRows={hasAnySubRows}
+            tableInstance={instance}
+            expanderCell={expanderCell}
+            scrollContainerRef={tableRef.current}
+            tableRowRef={enableVirtualization ? undefined : tableRowRef(row)}
+            density={density}
+            virtualItem={virtualItem}
+            virtualizer={virtualizer}
+          />
+          {subComponent && (
+            <WithCSSTransition in={row.isExpanded}>
+              <TableExpandableContentMemoized
+                key={row.getRowProps().key}
+                virtualItem={virtualItem}
+                isDisabled={!!isRowDisabled?.(row.original)}
+                ref={
+                  enableVirtualization
+                    ? virtualizer?.measureElement
+                    : tableRowRef(row)
+                }
+                isSelected={row.isSelected}
+              >
+                {subComponent(row)}
+              </TableExpandableContentMemoized>
+            </WithCSSTransition>
+          )}
+        </>
       );
     },
     [

packages/itwinui-react/src/core/Table/TableExpandableContentMemoized.tsx

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+
+type TableExpandableContentProps = {
+  virtualItem?: VirtualItem<Element>;
+  isDisabled: boolean;
+  children: React.ReactNode;
+  isSelected?: boolean;
+};
+
+const TableExpandableContent = React.forwardRef((props, ref) => {
+  return (
+    <Box
+      className={cx('iui-table-row', 'iui-table-expanded-content')}
+      style={{
+        flex: '0 0 auto',
+        minWidth: '100%',
+        ...(props.virtualItem != null
+          ? { transform: `translateY(${props.virtualItem.start}px)` }
+          : {}),
+      }}
+      aria-disabled={props.isDisabled || undefined}
+      data-iui-index={props.virtualItem?.index}
+      aria-selected={props.isSelected}
+      {...(props.virtualItem != null && { 'data-iui-virtualizer': 'item' })}
+      ref={ref}
+    >
+      {props.children}
+    </Box>
+  );
+}) as PolymorphicForwardRefComponent<'div', TableExpandableContentProps>;
+
+export const TableExpandableContentMemoized = React.memo(
+  TableExpandableContent,
+  (prevProp, nextProp) =>
+    prevProp.children === nextProp.children &&
+    prevProp.virtualItem === nextProp.virtualItem &&
+    prevProp.isDisabled === nextProp.isDisabled &&
+    prevProp.isSelected === nextProp.isSelected,
+);

packages/itwinui-react/src/core/Table/TableRowMemoized.tsx

@@ -10,12 +10,7 @@ import type {
   TableInstance,
   TableState,
 } from '../../react-table/react-table.js';
-import {
-  Box,
-  useIntersection,
-  useMergedRefs,
-  WithCSSTransition,
-} from '../../utils/index.js';
+import { Box, useIntersection, useMergedRefs } from '../../utils/index.js';
 import { TableCell } from './TableCell.js';
 import type { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 
@@ -153,16 +148,6 @@ export const TableRow = <T extends Record<string, unknown>>(props: {
           );
         })}
       </Box>
-      {subComponent && (
-        <WithCSSTransition in={row.isExpanded}>
-          <Box
-            className={cx('iui-table-row', 'iui-table-expanded-content')}
-            aria-disabled={isDisabled}
-          >
-            {subComponent(row)}
-          </Box>
-        </WithCSSTransition>
-      )}
     </>
   );
 };