feat(AnalyticalTable): add IncludeHeightExpandable option to subComponentsBehavior prop (#5250)

Closes #1700

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1639,6 +1639,33 @@ describe('AnalyticalTable', () => {
     cy.findByText('SubComponent 2').should('be.visible');
     cy.findByTitle('Expand Node').should('not.exist');
     cy.findByTitle('Collapse Node').should('not.exist');
+
+    const loadMore = cy.spy().as('more');
+    cy.mount(
+      <AnalyticalTable
+        onLoadMore={loadMore}
+        infiniteScroll={true}
+        infiniteScrollThreshold={0}
+        data={data}
+        columns={columns}
+        renderRowSubComponent={renderRowSubComponentLarge}
+        visibleRows={3}
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.IncludeHeightExpandable}
+      />
+    );
+    cy.findByText('A').should('be.visible');
+    cy.findByText('X').should('be.visible');
+    cy.findByText('C').should('not.be.visible');
+    cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.findByText('A').should('be.visible');
+    cy.findByText('X').should('be.visible');
+    cy.findByText('C').should('not.be.visible');
+    cy.get('[aria-rowindex="2"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.findByText('A').should('be.visible');
+    cy.findByText('X').should('be.visible');
+    cy.findByText('C').should('not.be.visible');
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.get('@more').should('have.been.calledOnce');
   });
 
   it('pop-in columns', () => {

packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx

@@ -283,6 +283,7 @@ The prop expects a function with an optional parameter containing the `row` inst
 
 - When `renderRowSubComponent` is set, `grouping` is disabled.
 - When rendering active elements inside the subcomponent, make sure to add the `data-subcomponent-active-element' attribute, otherwise focus behavior won't be consistent.
+- When `AnalyticalTableSubComponentsBehavior.IncludeHeight` or `AnalyticalTableSubComponentsBehavior.IncludeHeightExpandable` is used, `AnalyticalTableVisibleRowCountMode.Interactive` is not supported.
 
 <ControlsWithNote of={ComponentStories.Subcomponents} include={['renderRowSubComponent', 'subComponentsBehavior']} />
 

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -478,15 +478,7 @@ export const Subcomponents: Story = {
         </FlexBox>
       );
     };
-    return (
-      <AnalyticalTable
-        {...args}
-        data={args.data}
-        columns={args.columns}
-        renderRowSubComponent={renderRowSubComponent}
-        alwaysShowSubComponent={args.alwaysShowSubComponent}
-      />
-    );
+    return <AnalyticalTable {...args} renderRowSubComponent={renderRowSubComponent} />;
   }
 };
 

packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx

@@ -28,7 +28,6 @@ interface RowSubComponent {
   rowIndex: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const RowSubComponent = (props: RowSubComponent) => {
   const {
     subComponentsHeight,

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -3,6 +3,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
 import type { MutableRefObject, ReactNode } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
+import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js';
 import type { ScrollToRefType } from '../interfaces.js';
 import type { AnalyticalTablePropTypes, DivWithCustomScrollProp } from '../types/index.js';
 import { getSubRowsByString } from '../util/index.js';
@@ -33,6 +34,7 @@ interface VirtualTableBodyProps {
   manualGroupBy?: boolean;
   subRowsKey: string;
   scrollContainerRef?: MutableRefObject<HTMLDivElement>;
+  subComponentsBehavior: AnalyticalTablePropTypes['subComponentsBehavior'];
 }
 
 const measureElement = (el: HTMLElement) => {
@@ -63,7 +65,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     columnVirtualizer,
     manualGroupBy,
     subRowsKey,
-    scrollContainerRef
+    scrollContainerRef,
+    subComponentsBehavior
   } = props;
 
   const itemCount = Math.max(minRows, rows.length);
@@ -172,7 +175,13 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
         const isNavigatedCell = markNavigatedRow(row);
         const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;
 
-        if (!RowSubComponent && subComponentsHeight && subComponentsHeight?.[virtualRow.index]?.subComponentHeight) {
+        if (
+          (!RowSubComponent ||
+            (subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeightExpandable &&
+              !row.isExpanded)) &&
+          subComponentsHeight &&
+          subComponentsHeight?.[virtualRow.index]?.subComponentHeight
+        ) {
           dispatch({
             type: 'SUB_COMPONENTS_HEIGHT',
             payload: {

packages/main/src/components/AnalyticalTable/index.tsx

@@ -278,7 +278,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
 
   const includeSubCompRowHeight =
     !!renderRowSubComponent &&
-    subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeight &&
+    (subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeight ||
+      subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeightExpandable) &&
     !!tableState.subComponentsHeight &&
     !!Object.keys(tableState.subComponentsHeight);
 
@@ -434,7 +435,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
       adjustTableHeightOnPopIn
         ? popInRowHeight
         : internalRowHeight;
-
     if (includeSubCompRowHeight) {
       let initialBodyHeightWithSubComps = 0;
       for (let i = 0; i < rowNum; i++) {
@@ -722,6 +722,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                   columnVirtualizer={columnVirtualizer}
                   manualGroupBy={reactTableOptions?.manualGroupBy as boolean | undefined}
                   subRowsKey={subRowsKey}
+                  subComponentsBehavior={subComponentsBehavior}
                 />
               </VirtualTableBodyContainer>
             )}

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -549,9 +549,11 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * - __"Expandable":__ Render subcomponents as expandable container of each row.
    * - __"Visible":__ Render subcomponents below each row.
    * - __"IncludeHeight":__ Render subcomponents below each row. The height of each initially visible subcomponent (defined by `visibleRows`) is taken into account when defining the body height of the table.
+   * - __"IncludeHeightExpandable":__ Render subcomponents as expandable container of each row. The height of each expanded subcomponent of visible rows (defined by `visibleRows`) is taken into account when defining the body height of the table, so that the height of the table changes when a subcomponent is expanded/collapsed. (since: v1.23.0)
    *
    * __Default:__ `"Expandable"`
    *
+   * @since 1.19.0
    */
   subComponentsBehavior?: AnalyticalTableSubComponentsBehavior | keyof typeof AnalyticalTableSubComponentsBehavior;
   /**

packages/main/src/enums/AnalyticalTableSubComponentsBehavior.ts

@@ -12,6 +12,17 @@ export enum AnalyticalTableSubComponentsBehavior {
   Visible = 'Visible',
   /**
    * Render subcomponents below each row. The height of each initially visible subcomponent (defined by `visibleRows`) is taken into account when defining the body height of the table.
+   *
+   * __Note:__ `AnalyticalTableVisibleRowCountMode.Interactive` is not supported with this mode.
    */
-  IncludeHeight = 'IncludeHeight'
+  IncludeHeight = 'IncludeHeight',
+  /**
+   * Render subcomponents as expandable container of each row. The height of each expanded subcomponent of visible rows (defined by `visibleRows`) is taken into account when defining the body height of the table, so that the height of the table changes when a subcomponent is expanded/collapsed.
+   *
+   * __Note:__ This mode can lead to performance degradation, please use with caution!
+   * __Note:__ `AnalyticalTableVisibleRowCountMode.Interactive` is not supported with this mode.
+   *
+   * @since 1.23.0
+   */
+  IncludeHeightExpandable = 'IncludeHeightExpandable'
 }