Fixed expandable content does not work when using enableVirtualization in Table

.changeset/lucky-suits-decide.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed broken `subComponent` when enabling virtualization in `Table`.

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[0].subRows[1]],
+    [data[0], data[1]],
     expect.any(Object),
   );
   expect(onExpand).toHaveBeenNthCalledWith(

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

@@ -38,7 +38,6 @@ import {
   useMergedRefs,
   useLatestRef,
   useVirtualScroll,
-  WithCSSTransition,
 } from '../../utils/index.js';
 import type { CommonProps } from '../../utils/index.js';
 import { TableColumnsContext } from './utils.js';
@@ -65,7 +64,7 @@ import {
   onTableResizeStart,
 } from './actionHandlers/index.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
-import { Virtualizer, type VirtualItem } from '@tanstack/react-virtual';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { ColumnHeader } from './ColumnHeader.js';
 import { TableExpandableContentMemoized } from './TableExpandableContentMemoized.js';
 
@@ -580,6 +579,20 @@ export const Table = <
     );
   }, [data, getSubRows]);
 
+  const [rowHasParent] = React.useState(() => new Set<T>());
+
+  const getSubRowsWithSubComponents = React.useCallback(
+    (originalRow: T) => {
+      if (!rowHasParent.has(originalRow)) {
+        rowHasParent.add(originalRow);
+        return [originalRow];
+      }
+
+      return (originalRow.subRows as T[]) || [];
+    },
+    [rowHasParent],
+  );
+
   const instance = useTable<T>(
     {
       manualPagination: !paginatorRenderer, // Prevents from paginating rows in regular table without pagination
@@ -592,7 +605,7 @@ export const Table = <
       filterTypes,
       selectSubRows,
       data,
-      getSubRows,
+      getSubRows: (subComponent && getSubRowsWithSubComponents) ?? getSubRows,
       initialState: { pageSize, ...props.initialState },
       columnResizeMode,
     },
@@ -836,8 +849,9 @@ export const Table = <
     ) => {
       const row = page[index];
       prepareRow(row);
-      return (
-        <>
+
+      if (row.subRows.length > 0 || !subComponent) {
+        return (
           <TableRowMemoized
             row={row}
             rowProps={rowProps}
@@ -859,24 +873,34 @@ export const Table = <
             virtualItem={virtualItem}
             virtualizer={virtualizer}
           />
-          {subComponent && (
-            <WithCSSTransition in={row.isExpanded}>
+        );
+      } else {
+        return (
+          <>
+            {subComponent && (
               <TableExpandableContentMemoized
                 key={row.getRowProps().key}
-                ref={tableRowRef(row)}
+                virtualItem={virtualItem}
+                ref={
+                  enableVirtualization
+                    ? virtualizer?.measureElement
+                    : tableRowRef(row)
+                }
                 isDisabled={!!isRowDisabled?.(row.original)}
               >
                 {subComponent(row)}
               </TableExpandableContentMemoized>
-            </WithCSSTransition>
-          )}
-        </>
-      );
+            )}
+          </>
+        );
+      }
     },
     [
       page,
       prepareRow,
       rowProps,
+      onRowInViewportRef,
+      onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
@@ -888,8 +912,6 @@ export const Table = <
       enableVirtualization,
       tableRowRef,
       density,
-      onBottomReachedRef,
-      onRowInViewportRef,
     ],
   );
 

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

@@ -6,23 +6,31 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { VirtualItem } from '@tanstack/react-virtual';
 
 type TableExpandableContentProps = {
   children: React.ReactNode;
+  virtualItem?: VirtualItem<Element>;
   isDisabled?: boolean;
 };
 
 const TableExpandableContent = React.forwardRef((props, ref) => {
-  const { children, className, style, isDisabled, ...rest } = props;
+  const { children, className, style, isDisabled, virtualItem, ...rest } =
+    props;
   return (
     <Box
       className={cx('iui-table-row', 'iui-table-expanded-content', className)}
       style={{
         flex: '0 0 auto',
         minWidth: '100%',
+        ...(virtualItem != null
+          ? { transform: `translateY(${virtualItem.start}px)` }
+          : {}),
         ...style,
       }}
       aria-disabled={isDisabled}
+      data-iui-index={virtualItem?.index}
+      {...(virtualItem != null && { 'data-iui-virtualizer': 'item' })}
       ref={ref}
       {...rest}
     >

testing/e2e/app/routes/Table/route.tsx

@@ -70,6 +70,7 @@ function EverythingElse() {
   const oneRow = searchParams.get('oneRow') === 'true';
   const stateReducer = searchParams.get('stateReducer') === 'true';
   const scrollRow = Number(searchParams.get('scrollRow'));
+  const hasSubComponent = searchParams.get('hasSubComponent') === 'true';
 
   const virtualizedData = React.useMemo(() => {
     const size = oneRow ? 1 : 100000;
@@ -162,6 +163,13 @@ function EverythingElse() {
               }
             : undefined
         }
+        subComponent={
+          hasSubComponent
+            ? (row) => (
+                <div>{`Expanded component, name: ${row.original.name}`}</div>
+              )
+            : undefined
+        }
       />
     </>
   );

testing/e2e/app/routes/Table/spec.ts

@@ -510,6 +510,50 @@ test.describe('Virtual Scroll Tests', () => {
     const rows = page.getByRole('rowgroup').getByRole('row');
     expect((await rows.all()).length).toBe(1);
   });
+
+  test('virtualized table should allow expandable contents', async ({
+    page,
+  }) => {
+    await page.goto(
+      '/Table?virtualization=true&scroll=true&scrollRow=50&hasSubComponent=true',
+      {
+        waitUntil: 'networkidle',
+      },
+    ); //Need to wait until the virtual rows are able to be rendered for the tests to work.
+
+    const rows = page.getByRole('rowgroup').getByRole('row');
+    await expect(rows.nth(1)).toContainText('Name50');
+    await expect(rows.nth(4)).toContainText('Name53');
+
+    const row50ExpanderContent = page.getByText(
+      'Expanded component, name: Name50',
+    );
+    const row53ExpanderContent = page.getByText(
+      'Expanded component, name: Name53',
+    );
+
+    const expanderButtonRow50Cell = rows
+      .nth(1)
+      .getByRole('cell')
+      .nth(0)
+      .getByRole('button');
+    const expanderButtonRow53Cell = rows
+      .nth(4)
+      .getByRole('cell')
+      .nth(0)
+      .getByRole('button');
+
+    await expanderButtonRow50Cell.click();
+    await expanderButtonRow53Cell.click();
+    await expect(row50ExpanderContent).toBeInViewport();
+    await expect(row53ExpanderContent).toBeInViewport();
+
+    // Collapse the expanded content
+    await expanderButtonRow50Cell.click();
+    await expect(row50ExpanderContent).not.toBeInViewport();
+    await expanderButtonRow53Cell.click();
+    await expect(row53ExpanderContent).not.toBeInViewport();
+  });
 });
 
 test.describe('Table filters', () => {

testing/e2e/playwright.config.ts

@@ -5,7 +5,7 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testMatch: 'app/**/*spec.ts', // Look for test files anywhere in the app
-
+  timeout: 100000, // Increase timeout to 100s
   fullyParallel: true, // Run tests in files in parallel
   forbidOnly: !!process.env.CI, // Fail CI if you accidentally left test.only
   retries: process.env.CI ? 2 : 0, // Retry on CI only