feat(AnalyticalTable): add subComponentsBehavior prop (#4986)

This PR adds the `subComponentsBehavior` prop which accepts the
`AnalyticalTableSelectionBehavior` enum.

It enables controlling how subcomponents should be rendered and if they
should be considered when calculating the initial table body height.

`alwaysShowSubComponent` has been deprecated in favor of
`subComponentsBehavior`.

Fixes #3862

---------

Co-authored-by: Marcus Notheis <[email protected]>

Author: Lukas742

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

@@ -1,3 +1,4 @@
+import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { AnalyticalTablePropTypes } from '../..';
@@ -6,13 +7,13 @@ import {
   AnalyticalTableHooks,
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,
+  AnalyticalTableSubComponentsBehavior,
   Button,
   Input
 } from '../..';
 import { AnalyticalTableSelectionMode, AnalyticalTableVisibleRowCountMode, ValueState } from '../../enums/index.js';
 import { useManualRowSelect } from './pluginHooks/useManualRowSelect';
 import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
-import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
 const generateMoreData = (count) => {
   return new Array(count).fill('').map((item, index) => ({
@@ -1476,6 +1477,13 @@ describe('AnalyticalTable', () => {
   });
 
   it('render subcomponents', () => {
+    const renderRowSubComponentLarge = (row) => {
+      return (
+        <div title="subcomponent" style={{ height: '200px', width: '100%', display: 'flex', alignItems: 'end' }}>
+          {`SubComponent ${row.index}`}
+        </div>
+      );
+    };
     const renderRowSubComponent = () => {
       return <div title="subcomponent">SubComponent</div>;
     };
@@ -1519,7 +1527,7 @@ describe('AnalyticalTable', () => {
         data={data}
         columns={columns}
         renderRowSubComponent={renderRowSubComponent}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
       />
     );
     cy.findAllByText('SubComponent').should('be.visible').should('have.length', 4);
@@ -1531,12 +1539,40 @@ describe('AnalyticalTable', () => {
         data={data}
         columns={columns}
         renderRowSubComponent={onlyFirstRowWithSubcomponent}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
       />
     );
     cy.findByText('SingleSubComponent').should('be.visible').should('have.length', 1);
     cy.findByTitle('Expand Node').should('not.exist');
     cy.findByTitle('Collapse Node').should('not.exist');
+
+    cy.mount(
+      <AnalyticalTable
+        data={data}
+        columns={columns}
+        renderRowSubComponent={renderRowSubComponentLarge}
+        visibleRows={3}
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
+      />
+    );
+
+    cy.findByText('SubComponent 1').should('exist').and('not.be.visible');
+    cy.findByTitle('Expand Node').should('not.exist');
+    cy.findByTitle('Collapse Node').should('not.exist');
+
+    cy.mount(
+      <AnalyticalTable
+        data={data}
+        columns={columns}
+        renderRowSubComponent={renderRowSubComponentLarge}
+        visibleRows={3}
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.IncludeHeight}
+      />
+    );
+    cy.findByText('SubComponent 1').should('be.visible');
+    cy.findByText('SubComponent 2').should('be.visible');
+    cy.findByTitle('Expand Node').should('not.exist');
+    cy.findByTitle('Collapse Node').should('not.exist');
   });
 
   it('pop-in columns', () => {
@@ -2300,7 +2336,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={generateMoreData(50)}
         columns={columns.slice(0, 2)}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
         renderRowSubComponent={renderSubComp}
       />
     );
@@ -2344,7 +2380,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={generateMoreData(50)}
         columns={columns.slice(0, 2)}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
         renderRowSubComponent={renderSubComp2}
       />
     );

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

@@ -276,14 +276,14 @@ const InfiniteScrollTable = (props) => {
 ## AnalyticalTable with subcomponents
 
 Adding custom subcomponents below table rows can be achieved by setting the `renderRowSubComponent` prop.
-The prop expects a function with an optional parameter containing the `row` instance, there you can control which row should display subcomponents. If you want to display the subcomponent at the bottom of the row without an expandable container, you can set the `alwaysShowSubComponent` prop to `true`.
+The prop expects a function with an optional parameter containing the `row` instance, there you can control which row should display subcomponents. If you want to display the subcomponent at the bottom of the row without an expandable container, you can set `subComponentsBehavior` prop to `"Visible"` or to `"IncludeHeight"`. "Visible" simply adds the subcomponent to the row without including its height in the initial calculation of the table body, whereas "IncludeHeight" does.
 
 ### Notes
 
 - 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.
 
-<ControlsWithNote of={ComponentStories.Subcomponents} include={['alwaysShowSubComponent', 'renderRowSubComponent']} />
+<ControlsWithNote of={ComponentStories.Subcomponents} include={['renderRowSubComponent', 'subComponentsBehavior']} />
 
 <Canvas sourceState="none" of={ComponentStories.Subcomponents} />
 

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

@@ -2,6 +2,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 type { AnalyticalTablePropTypes } from '../index.js';
 import type { ScrollToRefType } from '../interfaces.js';
 import { getSubRowsByString } from '../util/index.js';
 import { EmptyRow } from './EmptyRow.js';
@@ -23,13 +24,14 @@ interface VirtualTableBodyProps {
   renderRowSubComponent: (row?: Record<string, unknown>) => ReactNode;
   popInRowHeight: number;
   isRtl: boolean;
-  markNavigatedRow?: (row?: Record<string, unknown>) => boolean;
+  markNavigatedRow?: AnalyticalTablePropTypes['markNavigatedRow'];
   alwaysShowSubComponent: boolean;
   dispatch?: (e: { type: string; payload?: Record<string, unknown> }) => void;
   subComponentsHeight?: Record<string, { rowId: string; subComponentHeight?: number }>;
   columnVirtualizer: Record<string, any>;
   manualGroupBy?: boolean;
   subRowsKey: string;
+  scrollContainerRef?: MutableRefObject<HTMLDivElement>;
 }
 
 const measureElement = (el) => el.offsetHeight;
@@ -57,7 +59,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     subComponentsHeight,
     columnVirtualizer,
     manualGroupBy,
-    subRowsKey
+    subRowsKey,
+    scrollContainerRef
   } = props;
 
   const itemCount = Math.max(minRows, rows.length);
@@ -102,6 +105,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
   );
   return (
     <div
+      ref={scrollContainerRef}
       data-component-name="AnalyticalTableBodyScrollableContainer"
       style={{
         position: 'relative',