feat(AnalyticalTable): add option to always show subcomponents below a row, fix race condition in subcomponent renderer (#1377)

Author: Lukas742

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

@@ -30,7 +30,7 @@ import { useRowDisableSelection } from '@ui5/webcomponents-react/lib/AnalyticalT
   title="Data Display / AnalyticalTable"
   component={AnalyticalTable}
   args={{
-    data: generateData(1000),
+    data: generateData(500),
     columns: [
       {
         Header: 'Name',
@@ -362,7 +362,7 @@ For more details on this behavior you can double check the [react-table docs](ht
 ## Tree Table
 
 <Canvas>
-  <Story name="Tree Table" args={{ data: generateData(20, true), isTreeTable: true }}>
+  <Story name="Tree Table" args={{ data: generateData(15, true), isTreeTable: true }}>
     {(args) => <AnalyticalTable {...args} />}
   </Story>
 </Canvas>
@@ -471,12 +471,63 @@ 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.
+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`.
 
 **Note:** When `renderRowSubComponent` is set, `grouping` is disabled.
 
+<ArgsTable story="with subcomponents" />
+
 <Canvas>
-  <Story name="with subcomponents" args={{ data: generateData(100) }}>
+  <Story
+    name="with subcomponents"
+    args={{ data: generateData(50) }}
+    argTypes={{
+      columns: { table: { disable: true } },
+      data: { table: { disable: true } },
+      title: { table: { disable: true } },
+      extension: { table: { disable: true } },
+      minRows: { table: { disable: true } },
+      visibleRowCountMode: { table: { disable: true } },
+      visibleRows: { table: { disable: true } },
+      loading: { table: { disable: true } },
+      noDataText: { table: { disable: true } },
+      rowHeight: { table: { disable: true } },
+      alternateRowColor: { table: { disable: true } },
+      withRowHighlight: { table: { disable: true } },
+      highlightField: { table: { disable: true } },
+      filterable: { table: { disable: true } },
+      sortable: { table: { disable: true } },
+      groupable: { table: { disable: true } },
+      groupBy: { table: { disable: true } },
+      selectionBehavior: { table: { disable: true } },
+      selectionMode: { table: { disable: true } },
+      scaleWidthMode: { table: { disable: true } },
+      columnOrder: { table: { disable: true } },
+      infiniteScroll: { table: { disable: true } },
+      infiniteScrollThreshold: { table: { disable: true } },
+      onSort: { table: { disable: true } },
+      onGroup: { table: { disable: true } },
+      onRowSelected: { table: { disable: true } },
+      onRowExpandChange: { table: { disable: true } },
+      onColumnsReordered: { table: { disable: true } },
+      onLoadMore: { table: { disable: true } },
+      reactTableOptions: { table: { disable: true } },
+      tableHooks: { table: { disable: true } },
+      subRowsKey: { table: { disable: true } },
+      selectedRowIds: { table: { disable: true } },
+      isTreeTable: { table: { disable: true } },
+      overscanCountHorizontal: { table: { disable: true } },
+      overscanCount: { table: { disable: true } },
+      NoDataComponent: { table: { disable: true } },
+      LoadingComponent: { table: { disable: true } },
+      style: { table: { disable: true } },
+      className: { table: { disable: true } },
+      tooltip: { table: { disable: true } },
+      onRowClick: { table: { disable: true } },
+      withNavigationHighlight: { table: { disable: true } },
+      markNavigatedRow: { table: { disable: true } }
+    }}
+  >
     {(args) => {
       const renderRowSubComponent = (row) => {
         if (row.id === '0') {
@@ -520,7 +571,14 @@ The prop expects a function with an optional parameter containing the `row` inst
           </FlexBox>
         );
       };
-      return <AnalyticalTable data={args.data} columns={args.columns} renderRowSubComponent={renderRowSubComponent} />;
+      return (
+        <AnalyticalTable
+          data={args.data}
+          columns={args.columns}
+          renderRowSubComponent={renderRowSubComponent}
+          alwaysShowSubComponent={args.alwaysShowSubComponent}
+        />
+      );
     }}
   </Story>
 </Canvas>
@@ -571,7 +629,14 @@ const TableWithSubcomponents = (props) => {
       </FlexBox>
     );
   };
-  return <AnalyticalTable data={props.data} columns={props.columns} renderRowSubComponent={renderRowSubComponent} />;
+  return (
+    <AnalyticalTable
+      data={props.data}
+      columns={props.columns}
+      renderRowSubComponent={renderRowSubComponent}
+      alwaysShowSubComponent={false} //default value
+    />
+  );
 };
 ```
 
@@ -623,6 +688,7 @@ By adding the `visibleRowCountMode` prop and setting it to `TableVisibleRowCount
       overscanCountHorizontal: { table: { disable: true } },
       overscanCount: { table: { disable: true } },
       renderRowSubComponent: { table: { disable: true } },
+      alwaysShowSubComponent: { table: { disable: true } },
       NoDataComponent: { table: { disable: true } },
       LoadingComponent: { table: { disable: true } },
       style: { table: { disable: true } },
@@ -755,6 +821,7 @@ In the example below you can have a look at this behavior:
       overscanCountHorizontal: { table: { disable: true } },
       overscanCount: { table: { disable: true } },
       renderRowSubComponent: { table: { disable: true } },
+      alwaysShowSubComponent: { table: { disable: true } },
       NoDataComponent: { table: { disable: true } },
       LoadingComponent: { table: { disable: true } },
       style: { table: { disable: true } },

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

@@ -24,6 +24,9 @@ interface VirtualTableBodyProps {
   popInRowHeight: number;
   isRtl: boolean;
   markNavigatedRow?: (row?: Record<any, any>) => boolean;
+  alwaysShowSubComponent: boolean;
+  dispatch?: (e: { type: string; payload?: any }) => void;
+  subComponentsHeight?: Record<string, { rowId: string; subComponentHeight?: number }>;
 }
 
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
@@ -45,11 +48,12 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     renderRowSubComponent,
     popInRowHeight,
     markNavigatedRow,
-    isRtl
+    isRtl,
+    alwaysShowSubComponent,
+    dispatch,
+    subComponentsHeight
   } = props;
 
-  const rowSubComponentsHeight = useRef({});
-
   const itemCount = Math.max(minRows, rows.length);
   const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
   const consolidatedParentRef = useConsolidatedRef(parentRef);
@@ -60,16 +64,19 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     parentRef: consolidatedParentRef,
     estimateSize: React.useCallback(
       (index) => {
-        if (renderRowSubComponent && rows[index].isExpanded && rowSubComponentsHeight.current.hasOwnProperty(index)) {
-          return rowHeight + (rowSubComponentsHeight.current?.[index] ?? 0);
+        if (
+          renderRowSubComponent &&
+          (rows[index].isExpanded || alwaysShowSubComponent) &&
+          subComponentsHeight?.[index]?.rowId === rows[index].id
+        ) {
+          return rowHeight + (subComponentsHeight?.[index]?.subComponentHeight ?? 0);
         }
         return rowHeight;
       },
-      [rowHeight, rows, renderRowSubComponent]
+      [rowHeight, rows, renderRowSubComponent, alwaysShowSubComponent, subComponentsHeight]
     ),
     overscan
   });
-
   const columnVirtualizer = useVirtual({
     size: visibleColumns.length,
     parentRef: tableRef,
@@ -185,8 +192,14 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
       {rowVirtualizer.virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
         const setSubcomponentsRefs = (el) => {
-          if (el?.offsetHeight) {
-            rowSubComponentsHeight.current[virtualRow.index] = el.offsetHeight;
+          if (el?.offsetHeight && subComponentsHeight?.[virtualRow.index]?.subComponentHeight !== el?.offsetHeight) {
+            dispatch({
+              type: 'SUB_COMPONENTS_HEIGHT',
+              payload: {
+                ...subComponentsHeight,
+                [virtualRow.index]: { subComponentHeight: el?.offsetHeight, rowId: row.id }
+              }
+            });
           }
         };
         if (!row) {
@@ -214,7 +227,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
               position: 'absolute'
             }}
           >
-            {RowSubComponent && row.isExpanded && (
+            {RowSubComponent && (row.isExpanded || alwaysShowSubComponent) && (
               <div
                 ref={setSubcomponentsRefs}
                 style={{
@@ -249,7 +262,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
                 cell.column.id === '__ui5wcr__internal_navigation_column'
               ) {
                 contentToRender = 'Cell';
-              } else if (isTreeTable || RowSubComponent) {
+              } else if (isTreeTable || (!alwaysShowSubComponent && RowSubComponent)) {
                 contentToRender = 'Expandable';
               } else if (cell.isGrouped) {
                 contentToRender = 'Grouped';

packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

@@ -50,9 +50,15 @@ export const Expandable = (props) => {
     paddingLeft
   };
   const rowProps = row.getToggleRowExpandedProps();
+
+  const subComponentExpandable =
+    typeof webComponentsReactProperties?.renderRowSubComponent === 'function' &&
+    !!webComponentsReactProperties?.renderRowSubComponent(row) &&
+    !webComponentsReactProperties.alwaysShowSubComponent;
+
   return (
     <>
-      {columnIndex === 0 && (row.canExpand || !!webComponentsReactProperties.renderRowSubComponent) ? (
+      {columnIndex === 0 && (row.canExpand || subComponentExpandable) ? (
         <span onClick={rowProps.onClick} title={rowProps.title} style={{ ...rowProps.style, ...style }}>
           <Icon
             name={`${row.isExpanded ? 'navigation-down-arrow' : 'navigation-right-arrow'}`}

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

@@ -277,6 +277,10 @@ export interface TableProps extends Omit<CommonProps, 'title'> {
    * Defines the subcomponent that should be displayed below each row.
    */
   renderRowSubComponent?: (row?: any) => ReactNode;
+  /**
+   * Defines whether a subcomponent should be rendered as expandable container or directly at the bottom of the row.
+   */
+  alwaysShowSubComponent?: boolean;
 
   // default components
   /**
@@ -338,7 +342,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     onLoadMore,
     extension,
     columnOrder,
-    renderRowSubComponent
+    renderRowSubComponent,
+    alwaysShowSubComponent
   } = props;
 
   const classes = useStyles();
@@ -401,7 +406,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
         highlightField,
         withNavigationHighlight,
         markNavigatedRow,
-        renderRowSubComponent
+        renderRowSubComponent,
+        alwaysShowSubComponent
       },
       ...reactTableOptions
     },
@@ -742,8 +748,11 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
                 visibleColumnsWidth={visibleColumnsWidth}
                 overscanCountHorizontal={overscanCountHorizontal}
                 renderRowSubComponent={renderRowSubComponent}
+                alwaysShowSubComponent={alwaysShowSubComponent}
                 markNavigatedRow={markNavigatedRow}
                 isRtl={isRtl}
+                subComponentsHeight={tableState.subComponentsHeight}
+                dispatch={dispatch}
               />
             </VirtualTableBodyContainer>
           )}
@@ -805,7 +814,8 @@ AnalyticalTable.defaultProps = {
   isTreeTable: false,
   alternateRowColor: false,
   overscanCountHorizontal: 5,
-  visibleRowCountMode: TableVisibleRowCountMode.FIXED
+  visibleRowCountMode: TableVisibleRowCountMode.FIXED,
+  alwaysShowSubComponent: false
 };
 
 export { AnalyticalTable };

packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts

@@ -1,11 +1,11 @@
 import { actions } from 'react-table';
 
-export const stateReducer = (newState, action) => {
+export const stateReducer = (prevState, action) => {
   const { payload } = action;
 
-  if (newState.isRtl && action.type === actions.columnResizing) {
+  if (prevState.isRtl && action.type === actions.columnResizing) {
     const { clientX } = action;
-    const { startX, columnWidth, headerIdWidths } = newState.columnResizing;
+    const { startX, columnWidth, headerIdWidths } = prevState.columnResizing;
 
     const deltaX = startX - clientX;
     const percentageDeltaX = deltaX / columnWidth;
@@ -17,11 +17,11 @@ export const stateReducer = (newState, action) => {
     });
 
     return {
-      ...newState,
+      ...prevState,
       columnResizing: {
-        ...newState.columnResizing,
+        ...prevState.columnResizing,
         columnWidths: {
-          ...newState.columnResizing.columnWidths,
+          ...prevState.columnResizing.columnWidths,
           ...newColumnWidths
         }
       }
@@ -30,20 +30,22 @@ export const stateReducer = (newState, action) => {
 
   switch (action.type) {
     case 'TABLE_RESIZE':
-      return { ...newState, tableClientWidth: payload.tableClientWidth };
+      return { ...prevState, tableClientWidth: payload.tableClientWidth };
     case 'VISIBLE_ROWS':
-      return { ...newState, visibleRows: payload.visibleRows };
+      return { ...prevState, visibleRows: payload.visibleRows };
     case 'TABLE_SCROLLING_ENABLED':
-      return { ...newState, isScrollable: payload.isScrollable };
+      return { ...prevState, isScrollable: payload.isScrollable };
     case 'SET_SELECTED_ROW_IDS':
-      return { ...newState, selectedRowIds: payload.selectedRowIds };
+      return { ...prevState, selectedRowIds: payload.selectedRowIds };
     case 'SET_POPIN_COLUMNS':
-      return { ...newState, popInColumns: payload };
+      return { ...prevState, popInColumns: payload };
     case 'INTERACTIVE_ROWS_HAVE_POPIN':
-      return { ...newState, interactiveRowsHavePopIn: payload };
+      return { ...prevState, interactiveRowsHavePopIn: payload };
     case 'IS_RTL':
-      return { ...newState, isRtl: payload.isRtl };
+      return { ...prevState, isRtl: payload.isRtl };
+    case 'SUB_COMPONENTS_HEIGHT':
+      return { ...prevState, subComponentsHeight: payload };
     default:
-      return newState;
+      return prevState;
   }
 };